/* ==========================================================================
   Diferance IA & Web · design system
   Charte Diferance : anthracite, blanc, rouge E31E24 en accent unique.
   Montserrat (affichage) / Hanken Grotesk (texte) / Barlow Condensed (labels)
   Angles vifs, rayon 1px. Trois fonds de section, jamais deux sombres de suite.
   Sommaire
   01 Jetons          07 Rubriques        13 Réalisations     19 Formulaire
   02 Base            08 Services         14 Actus / blog     20 Pages légales
   03 Boutons         09 Damier           15 FAQ              21 Bandeau cookies
   04 Navigation      10 Citation         16 Final + footer   22 Révélations
   05 Hero accueil    11 Offres           17 Barre collante   23 Responsive
   06 Hero interne    12 Process          18 Article
   ========================================================================== */

/* 01 · Jetons ------------------------------------------------------------ */
:root{
  --ink:#1A1A1A; --ink2:#232323; --line:#303030;
  --white:#fff; --off:#F6F6F4;
  --red:#E31E24; --red-dk:#B8161B;
  --hair:#E2E1DE; --gray:#4A4A4A; --gray-l:#8A8A8A;
  --wrap:1320px; --pad-section:126px; --radius:1px; --nav-h:78px;
  --e:cubic-bezier(.16,1,.3,1);
}

/* 02 · Base -------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font:300 17.5px/1.78 "Hanken Grotesk",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body.no-scroll{overflow:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;font-family:Montserrat,sans-serif;font-weight:900;letter-spacing:-.036em;line-height:.98;text-transform:uppercase}
h1{font-size:clamp(42px,7.4vw,104px)}
h2{font-size:clamp(30px,4.4vw,60px)}
h3{font-size:clamp(20px,2.1vw,29px)}
h4{font-size:19px}
p{margin:0 0 18px}
strong{font-weight:500}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 44px}
section{padding:var(--pad-section) 0}
.s--off{background:var(--off)}
.s--dark{background:var(--ink);color:#B0B0B0}
.s--dark h2,.s--dark h3,.s--dark h4{color:#fff}
.k{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--red);margin:0 0 18px}
.fine{font-size:12.5px;line-height:1.6;color:var(--gray-l);font-weight:300}
.fine strong{color:var(--gray);font-weight:500}
.center{text-align:center}
.mt40{margin-top:40px}.mt52{margin-top:52px}

/* 03 · Boutons ----------------------------------------------------------- */
.btn{background:transparent;display:inline-flex;align-items:center;justify-content:center;gap:11px;padding:18px 32px;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:14px;letter-spacing:.19em;text-transform:uppercase;border:1px solid transparent;border-radius:var(--radius);position:relative;overflow:hidden;cursor:pointer;transition:color .45s var(--e),border-color .45s var(--e)}
.btn span{position:relative;z-index:2}
.btn::before{content:"";position:absolute;inset:-2px;background:var(--red);transform:translateX(-118%) skewX(-12deg);transform-origin:left;transition:transform .55s var(--e);z-index:1}
.btn:hover::before{transform:translateX(0) skewX(0)}
.btn--red{background:var(--red);color:#fff}.btn--red::before{background:var(--ink)}
.btn--ink{background:var(--ink);color:#fff}
.btn--line{border-color:var(--hair);color:var(--ink)}.btn--line:hover{color:#fff;border-color:var(--red)}
.btn--lite{border-color:#414141;color:#fff}.btn--lite:hover{border-color:var(--red)}
.btn--sm{padding:12px 20px;font-size:13px}
.btn--full{width:100%}

/* 04 · Navigation -------------------------------------------------------- */
header{position:fixed;top:0;left:0;right:0;z-index:80;color:#fff;border-bottom:1px solid transparent;transition:background .5s var(--e),color .5s var(--e),border-color .5s var(--e)}
header.solid,body.page-inner header{background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-color:var(--hair);color:var(--ink)}
.nav{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:30px}
.logo{font-family:Montserrat,sans-serif;font-weight:900;font-size:17px;text-transform:uppercase;letter-spacing:-.02em;white-space:nowrap}
.logo i{color:var(--red);font-style:normal}
.menu{display:flex;gap:30px;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:14px;letter-spacing:.16em;text-transform:uppercase;opacity:.78}
.menu a{position:relative;white-space:nowrap}
.menu a:hover,.menu a.on{color:var(--red);opacity:1}
.burger{display:none;width:34px;height:34px;border:1px solid currentColor;background:none;cursor:pointer;color:inherit}
.burger span,.burger span::before,.burger span::after{display:block;width:15px;height:1px;background:currentColor;position:relative;margin:0 auto}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-5px}.burger span::after{top:5px}

/* 05 · Hero accueil ------------------------------------------------------ */
.hero{background:var(--ink);color:#fff;min-height:100vh;display:flex;align-items:flex-end;padding:132px 0 0;position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero-num{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.3em;text-transform:uppercase;color:#7A7A7A;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:48px}
.hero-num b{color:var(--red);font-weight:600}
.hero-main{display:grid;grid-template-columns:1.32fr .68fr;gap:56px;align-items:end}
.hero h1{color:#fff}
.hero h1 mark{background:var(--red);color:#fff;padding:0 14px;display:inline-block}
.hero .lead{color:#B0B0B0;font-size:19px;max-width:46ch;margin:34px 0 0}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.hero-card{border:1px solid var(--line);padding:30px 28px;background:rgba(35,35,35,.6)}
.hero-card p{color:#A5A5A5;font-size:15.5px;margin:0 0 22px}
.hero-card .from{display:flex;align-items:baseline;gap:12px}
.hero-card .from b{font-family:Montserrat,sans-serif;font-weight:900;font-size:54px;letter-spacing:-.045em;color:#fff;line-height:1}
.hero-card .from s{font-family:Montserrat,sans-serif;font-weight:800;font-size:22px;color:#767676}
.hero-card .ht{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:#767676;margin:10px 0 20px}
.hero-strip{border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);margin-top:56px}
.hero-strip div{padding:26px 0;border-right:1px solid var(--line)}
.hero-strip div:last-child{border-right:0}
.hero-strip b{display:block;font-family:Montserrat,sans-serif;font-weight:900;font-size:30px;letter-spacing:-.04em}
.hero-strip span{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#7A7A7A}

/* 06 · Hero interne ------------------------------------------------------ */
.phero{background:var(--ink);color:#B0B0B0;padding:calc(var(--nav-h) + 86px) 0 86px;position:relative;overflow:hidden}
.phero::after{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:calc(100%/5) 100%;opacity:.5;pointer-events:none}
.phero .wrap{position:relative;z-index:2}
.phero h1{color:#fff;font-size:clamp(36px,5.4vw,76px)}
.phero .lead{font-size:19px;max-width:56ch;margin:28px 0 0;color:#B0B0B0}
.crumb{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:#7A7A7A;margin-bottom:26px}
.crumb a:hover{color:var(--red)}
.crumb i{font-style:normal;color:var(--red);margin:0 9px}
.phero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

/* 07 · Rubriques --------------------------------------------------------- */
.rub{display:grid;grid-template-columns:210px 1fr;gap:50px;align-items:start;border-top:2px solid var(--ink);padding-top:26px;margin-bottom:66px}
.rub .no{font-family:Montserrat,sans-serif;font-weight:900;font-size:15px;letter-spacing:.06em;color:var(--red)}
.rub p{color:var(--gray);font-size:18.5px;max-width:60ch;margin:22px 0 0}
.s--dark .rub{border-color:#fff}
.s--dark .rub p{color:#A5A5A5}

/* 08 · Services ---------------------------------------------------------- */
.split{display:grid;grid-template-columns:.82fr 1.18fr;gap:70px;align-items:start}
.sticky{position:sticky;top:calc(var(--nav-h) + 40px)}
.sticky h2{margin-bottom:22px}
.sticky p{color:var(--gray)}
.arts{border-top:1px solid var(--hair)}
.art{padding:42px 0;border-bottom:1px solid var(--hair);display:grid;grid-template-columns:62px 1fr;gap:24px;transition:padding-left .55s var(--e)}
.art:hover{padding-left:14px}
.art .n{font-family:Montserrat,sans-serif;font-weight:900;font-size:15px;color:var(--red);padding-top:6px}
.art h3{margin-bottom:14px}
.art p{color:var(--gray);font-size:16.5px;margin:0}
.art ul{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.art li{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--hair);padding:6px 12px;color:var(--gray)}
.lnk{display:inline-block;margin-top:22px;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);border-bottom:1px solid var(--red);padding-bottom:3px}

/* 09 · Damier ------------------------------------------------------------ */
.board{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--hair)}
.cell{padding:46px 38px;border-right:1px solid var(--hair);min-height:270px;display:flex;flex-direction:column;justify-content:space-between;transition:background .5s var(--e),color .5s var(--e)}
.cell:last-child{border-right:0}
.cell--red{background:var(--red);color:#fff;border-color:var(--red)}
.cell--red h3{color:#fff}
.cell--ink{background:var(--ink);color:#B0B0B0;border-color:var(--ink)}
.cell--ink h3{color:#fff}
.cell:not(.cell--red):not(.cell--ink):hover{background:var(--ink);color:#B0B0B0}
.cell:not(.cell--red):not(.cell--ink):hover h3{color:#fff}
.cell .num{font-family:Montserrat,sans-serif;font-weight:900;font-size:14px;letter-spacing:.12em;color:var(--red);margin-bottom:20px;display:block}
.cell--red .num{color:#fff}
.cell h3{margin-bottom:13px;transition:color .5s var(--e)}
.cell p{font-size:15.5px;margin:0}
.cell .tagl{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-top:24px;opacity:.7}
.board--4{grid-template-columns:repeat(4,1fr)}
.board--4 .cell{min-height:230px;padding:36px 30px}

/* 10 · Citation ---------------------------------------------------------- */
.pull{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:92px 0;text-align:center}
.pull p{font-family:Montserrat,sans-serif;font-weight:800;font-size:clamp(24px,3.2vw,42px);letter-spacing:-.03em;line-height:1.16;max-width:20ch;margin:0 auto;text-transform:none}
.pull p em{font-style:normal;color:var(--red)}
.pull span{display:block;margin-top:26px;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gray-l)}

/* 11 · Offres ------------------------------------------------------------ */
.alert{background:var(--ink);color:#fff;border-left:4px solid var(--red);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;padding:24px 30px;margin-bottom:52px}
.alert p{margin:0;font-size:15.5px;color:#DDD}
.alert .dot{display:inline-block;width:8px;height:8px;background:var(--red);margin-right:13px;animation:pl 1.7s infinite}
@keyframes pl{0%,100%{opacity:1}50%{opacity:.15}}
.cd{display:flex;gap:8px}
.cd div{min-width:66px;border:1px solid var(--line);padding:9px 6px;text-align:center}
.cd b{display:block;font-family:Montserrat,sans-serif;font-weight:900;font-size:24px;letter-spacing:-.03em;color:#fff}
.cd span{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#7A7A7A}
.offers{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--hair)}
.off{padding:52px 46px 52px 0;border-bottom:1px solid var(--hair);border-right:1px solid var(--hair);display:flex;flex-direction:column}
.off--hi{background:var(--ink);color:#B0B0B0;padding:52px 46px;border-color:var(--ink);position:relative}
.off--hi h3{color:#fff}
.rib{position:absolute;top:0;right:0;background:var(--red);color:#fff;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;padding:7px 15px}
.tagtop{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--red);margin-bottom:18px;display:block}
.off h3{margin-bottom:12px}
.off .desc{color:var(--gray);font-size:16px;margin-bottom:26px}
.off--hi .desc{color:#A5A5A5}
.price{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.price b{font-family:Montserrat,sans-serif;font-weight:900;font-size:clamp(46px,5vw,66px);letter-spacing:-.05em;line-height:1}
.off--hi .price b{color:#fff}
.price s{font-family:Montserrat,sans-serif;font-weight:800;font-size:24px;color:var(--gray-l)}
.price em{font-style:normal;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gray-l)}
.off ul{list-style:none;margin:28px 0 22px;padding:0;font-size:16px;color:var(--gray);flex:1}
.off--hi ul{color:#B0B0B0}
.off li{display:flex;gap:13px;padding:8px 0;border-bottom:1px solid var(--hair)}
.off--hi li{border-color:var(--line)}
.off li::before{content:"";width:6px;height:6px;background:var(--red);margin-top:11px;flex:none}
.off .fine{margin:0 0 26px;padding-top:14px;border-top:1px solid var(--hair)}
.off--hi .fine{border-color:var(--line);color:#7E7E7E}
.off .btn{align-self:flex-start}
.bar{display:grid;grid-template-columns:1fr auto;gap:36px;align-items:center;padding:38px 0;border-bottom:1px solid var(--hair)}
.bar h3{margin-bottom:10px}
.bar p{color:var(--gray);margin:0;font-size:16px;max-width:70ch}
.bar .amt{font-family:Montserrat,sans-serif;font-weight:900;font-size:34px;letter-spacing:-.04em;white-space:nowrap}
.bar--dark{background:var(--ink);color:#A5A5A5;padding:38px 40px;border:0}
.bar--dark h3{color:#fff}.bar--dark p{color:#A5A5A5}
.renew{margin-top:26px;border:1px solid var(--hair);padding:20px 24px;display:flex;gap:18px;align-items:flex-start}
.renew i{width:6px;height:6px;background:var(--gray-l);margin-top:8px;flex:none}

/* 12 · Process ----------------------------------------------------------- */
.flow{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line)}
.fstep{padding:38px 30px;border-right:1px solid var(--line)}
.fstep:last-child{border-right:0}
.fstep b{font-family:Montserrat,sans-serif;font-weight:900;font-size:44px;letter-spacing:-.05em;color:var(--line);display:block;line-height:1;transition:color .5s var(--e)}
.fstep:hover b{color:var(--red)}
.fstep h4{font-family:Montserrat,sans-serif;font-weight:800;font-size:17px;text-transform:uppercase;color:#fff;margin:16px 0 10px}
.fstep p{font-size:14.5px;color:#A5A5A5;margin:0}
.flow--light{border-color:var(--hair)}
.flow--light .fstep{border-color:var(--hair)}
.flow--light .fstep b{color:var(--hair)}
.flow--light .fstep h4{color:var(--ink)}
.flow--light .fstep p{color:var(--gray)}

/* 13 · Réalisations ------------------------------------------------------ */
.works{display:grid;grid-template-columns:repeat(12,1fr);gap:26px}
.works .work:nth-child(1){grid-column:span 7}
.works .work:nth-child(2){grid-column:span 5;margin-top:48px}
.works .work:nth-child(3){grid-column:span 5}
.works .work:nth-child(4){grid-column:span 7;margin-top:-32px}
.works .work:nth-child(5){grid-column:span 6}
.works .work:nth-child(6){grid-column:span 6;margin-top:36px}
.work{overflow:hidden;display:block}
.work .thumb{aspect-ratio:16/10;overflow:hidden;background:var(--off);border:1px solid var(--hair);position:relative}
.work img{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform 1.2s var(--e),filter .8s var(--e);filter:grayscale(1) contrast(1.02)}
.work:hover img{transform:scale(1.04);filter:none}
.work .meta{display:flex;justify-content:space-between;align-items:baseline;padding:16px 2px 0;gap:14px}
.work b{font-family:Montserrat,sans-serif;font-weight:800;font-size:16px}
.work span{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gray-l)}
/* gabarit maison : visible pendant le chargement, et definitif si aucune
   capture n'est disponible pour ce site */
.fallback{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;font-family:Montserrat,sans-serif;font-weight:800;font-size:17px;letter-spacing:-.02em;color:#7A7A7A;background:var(--ink);overflow:hidden}
.fallback::before{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px),linear-gradient(var(--line) 1px,transparent 1px);background-size:46px 46px;opacity:.8}
.fallback span{position:relative;z-index:2}
/* grille de la page réalisations */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:44px;padding-bottom:26px;border-bottom:1px solid var(--hair)}
.filters button{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:13px;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--hair);background:none;padding:11px 18px;cursor:pointer;color:var(--gray);transition:background .4s var(--e),color .4s var(--e),border-color .4s var(--e)}
.filters button:hover{border-color:var(--ink)}
.filters button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.filters button em{font-style:normal;opacity:.55;margin-left:8px}
.gridworks{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.gridworks .work .thumb{aspect-ratio:16/11}
.count{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--gray-l);margin-bottom:26px}

/* 14 · Actus / blog ------------------------------------------------------ */
.news{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--hair)}
.post{padding:38px 34px 38px 0;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);transition:background .5s var(--e);display:flex;flex-direction:column}
.post:nth-child(n+2){padding-left:34px}
.post:last-child{border-right:0}
.post:hover{background:var(--off)}
.post time{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.post h3{font-family:Montserrat,sans-serif;font-weight:800;font-size:20px;text-transform:none;letter-spacing:-.025em;line-height:1.3;margin:15px 0 12px}
.post p{font-size:15.5px;color:var(--gray);margin:0 0 18px;flex:1}
.post .cat{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gray-l)}
.postgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.pcard{border:1px solid var(--hair);display:flex;flex-direction:column;transition:border-color .5s var(--e),transform .5s var(--e)}
.pcard:hover{border-color:var(--ink);transform:translateY(-5px)}
.pcard .pbody{padding:30px 28px;display:flex;flex-direction:column;flex:1}
.pcard time{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.pcard h3{font-family:Montserrat,sans-serif;font-weight:800;font-size:21px;text-transform:none;letter-spacing:-.025em;line-height:1.28;margin:14px 0 12px}
.pcard p{font-size:15.5px;color:var(--gray);flex:1;margin:0 0 18px}
.pcard .cover{aspect-ratio:16/9;background:var(--ink);position:relative;overflow:hidden;border-bottom:1px solid var(--hair)}
.pcard .cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;transition:transform 1.1s var(--e)}
.pcard:hover .cover img{transform:scale(1.05)}
.pcard .cover span{z-index:3;position:absolute;left:0;bottom:0;background:var(--red);color:#fff;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;padding:6px 13px}
.pcard .cover::after{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px),linear-gradient(var(--line) 1px,transparent 1px);background-size:52px 52px;opacity:.7}
.empty{border:1px solid var(--hair);padding:56px 40px;text-align:center;color:var(--gray)}

/* 15 · FAQ --------------------------------------------------------------- */
.q{border-bottom:1px solid var(--hair)}
.q:first-child{border-top:1px solid var(--ink)}
.q button{width:100%;background:none;border:0;text-align:left;padding:28px 0;display:flex;justify-content:space-between;gap:24px;align-items:center;cursor:pointer;font-family:Montserrat,sans-serif;font-weight:800;font-size:19px;letter-spacing:-.025em;color:var(--ink)}
.q i{width:14px;height:14px;position:relative;flex:none}
.q i::before,.q i::after{content:"";position:absolute;background:var(--red)}
.q i::before{left:0;top:6.5px;width:14px;height:1px}
.q i::after{left:6.5px;top:0;width:1px;height:14px;transition:transform .4s var(--e)}
.q.open i::after{transform:scaleY(0)}
.q .a{display:none;padding-bottom:28px;color:var(--gray);max-width:78ch}
.q .a p:last-child{margin-bottom:0}

/* 16 · Final + footer ---------------------------------------------------- */
.final{background:var(--red);color:#fff;text-align:center}
.final h2{color:#fff;margin-bottom:20px}
.final .k{color:#fff}
.final p{max-width:56ch;margin:0 auto 32px;font-size:18.5px;color:rgba(255,255,255,.92)}
.final .btn--ink::before{background:#fff}
.final .btn--ink:hover{color:var(--ink)}
.final .btn--lite{color:#fff;border-color:rgba(255,255,255,.5)}
.final .btn--lite::before{background:#fff}
.final .btn--lite:hover{color:var(--red);border-color:#fff}
footer{background:var(--ink);color:#8E8E8E;padding:0 0 40px;font-size:15px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding:66px 0 46px}
footer h5{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:#fff;margin:0 0 18px}
footer ul{list-style:none;margin:0;padding:0}
footer li{padding:5px 0}
footer a:hover{color:var(--red)}
.fbot{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13.5px;color:#6B6B6B}
.fbot a:hover{color:var(--red)}
.fbot nav{display:flex;gap:18px;flex-wrap:wrap}

/* 17 · Barre collante ---------------------------------------------------- */
.stick{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--ink);color:#fff;border-top:1px solid var(--line);transform:translateY(102%);transition:transform .6s var(--e)}
.stick.on{transform:none}
.stick .wrap{display:flex;align-items:center;justify-content:space-between;gap:22px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap}
.stick p{margin:0;font-size:15px;color:#C9C9C9}
.stick b{color:#fff;font-family:Montserrat,sans-serif;font-weight:800}

/* 18 · Article ----------------------------------------------------------- */
.article{max-width:760px;margin:0 auto}
.article h2{font-size:clamp(24px,3vw,34px);margin:52px 0 20px}
.article h3{font-size:22px;margin:38px 0 16px}
.article p{font-size:18px;color:var(--gray);margin:0 0 22px}
.article ul,.article ol{color:var(--gray);font-size:18px;padding-left:22px;margin:0 0 24px}
.article li{padding:5px 0}
.article a{color:var(--red);border-bottom:1px solid var(--red)}
.article blockquote{margin:34px 0;padding:24px 0 24px 28px;border-left:3px solid var(--red);font-family:Montserrat,sans-serif;font-weight:800;font-size:21px;line-height:1.35;letter-spacing:-.02em;color:var(--ink)}
.article blockquote p{font-family:inherit;font-size:inherit;color:inherit;margin:0}
.article hr{border:0;border-top:1px solid var(--hair);margin:44px 0}
.article strong{color:var(--ink);font-weight:500}
.artmeta{display:flex;gap:22px;flex-wrap:wrap;align-items:center;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:#7A7A7A}
.artmeta b{color:var(--red);font-weight:600}

/* 19 · Formulaire -------------------------------------------------------- */
.formgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:start}
.field{margin-bottom:22px}
.field label{display:block;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gray);margin-bottom:9px}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--hair);border-radius:var(--radius);background:var(--white);padding:15px 16px;font:300 16px/1.6 "Hanken Grotesk",sans-serif;color:var(--ink);transition:border-color .4s var(--e)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red)}
.field textarea{min-height:150px;resize:vertical}
.field--half{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.consent{display:flex;gap:13px;align-items:flex-start;margin:8px 0 26px}
.consent input{width:17px;height:17px;margin-top:3px;flex:none;accent-color:var(--red)}
.consent label{font-size:13.5px;color:var(--gray);line-height:1.6;text-transform:none;letter-spacing:0;font-family:"Hanken Grotesk",sans-serif;font-weight:300}
.consent a{color:var(--red);border-bottom:1px solid var(--red)}
.infobox{border:1px solid var(--hair);padding:34px 32px}
.infobox+.infobox{margin-top:22px}
.infobox h3{font-size:21px;margin-bottom:16px}
.infobox dl{margin:0}
.infobox dt{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gray-l);margin-top:16px}
.infobox dt:first-child{margin-top:0}
.infobox dd{margin:5px 0 0;font-size:16.5px}
.infobox dd a:hover{color:var(--red)}

.pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field--captcha{border:1px solid var(--hair);border-left:3px solid var(--red);padding:20px 22px;background:var(--off)}
.field--captcha input{max-width:140px;background:var(--white)}
.formstatus{margin:20px 0 0;font-size:15.5px;display:none;padding:14px 18px;border-left:3px solid var(--hair)}
.formstatus.on{display:block}
.formstatus.ok{border-color:var(--red);background:var(--off);color:var(--ink)}
.formstatus.ko{border-color:var(--ink);background:var(--off);color:var(--gray)}

/* 20 · Pages légales ----------------------------------------------------- */
.legal{max-width:860px;margin:0 auto}
.legal h2{font-size:clamp(23px,2.6vw,30px);margin:52px 0 18px;padding-top:26px;border-top:1px solid var(--hair)}
.legal h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal h3{font-size:19px;margin:30px 0 12px}
.legal p,.legal li{font-size:16.5px;color:var(--gray)}
.legal ul{padding-left:22px;margin:0 0 22px}
.legal li{padding:4px 0}
.legal a{color:var(--red);border-bottom:1px solid var(--red)}
.legal table{width:100%;border-collapse:collapse;margin:0 0 26px;font-size:15.5px}
.legal th,.legal td{text-align:left;padding:13px 16px 13px 0;border-bottom:1px solid var(--hair);vertical-align:top;color:var(--gray)}
.legal th{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.legal th[scope="row"]{width:34%;padding-right:26px}
.legal th[scope="row"]+td{color:var(--ink);font-weight:400}
.legal td:first-child{padding-right:26px;color:var(--ink)}
.legal .maj{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gray-l);margin-bottom:40px}
.toc{border:1px solid var(--hair);padding:26px 30px;margin-bottom:52px}
.toc ol{margin:0;padding-left:20px;columns:2;column-gap:36px}
.toc li{padding:5px 0;font-size:15.5px}
.toc a{color:var(--gray);border:0}
.toc a:hover{color:var(--red)}

/* 21 · Bandeau cookies --------------------------------------------------- */
.ck{position:fixed;left:26px;bottom:26px;z-index:120;width:380px;max-width:calc(100vw - 52px);background:var(--white);border:1px solid var(--hair);border-left:3px solid var(--red);box-shadow:0 30px 70px -40px rgba(0,0,0,.55);opacity:0;transform:translateY(24px);pointer-events:none;transition:opacity .55s var(--e),transform .55s var(--e)}
.ck.on{opacity:1;transform:none;pointer-events:auto}
.ck-in{max-width:none;margin:0;padding:24px 24px 22px}
.ck h4{font-family:Montserrat,sans-serif;font-weight:800;font-size:16px;text-transform:uppercase;color:var(--ink);margin-bottom:9px}
.ck p{margin:0 0 18px;font-size:14px;line-height:1.62;color:var(--gray);max-width:none}
.ck a{color:var(--ink);border-bottom:1px solid var(--red)}
.ck-btn{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ck-btn .btn{padding:12px 10px;font-size:12px;letter-spacing:.14em}
.ck-perso{grid-column:1/-1;justify-self:start;margin-top:2px;padding:0;border:0;background:none;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gray-l);border-bottom:1px solid var(--hair);cursor:pointer;transition:color .35s var(--e),border-color .35s var(--e)}
.ck-perso:hover{color:var(--ink);border-color:var(--red)}
.ckmodal{position:fixed;inset:0;z-index:130;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.72)}
.ckmodal.on{display:flex}
.ckbox{background:var(--white);max-width:640px;width:100%;max-height:86vh;overflow:auto;padding:40px 38px;border-top:3px solid var(--red)}
.ckbox h3{margin-bottom:16px}
.ckbox p{font-size:15.5px;color:var(--gray)}
.cktoggle{border-top:1px solid var(--hair);padding:20px 0;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}
.cktoggle b{display:block;font-family:Montserrat,sans-serif;font-weight:800;font-size:15px;margin-bottom:5px}
.cktoggle p{margin:0;font-size:14px}
.sw{position:relative;display:inline-block;width:48px;height:26px;flex:none;cursor:pointer}
.sw input{opacity:0;width:100%;height:100%;margin:0;cursor:pointer;position:relative;z-index:2}
.sw i{position:absolute;inset:0;border:1px solid var(--hair);background:var(--off);transition:background .35s var(--e),border-color .35s var(--e);pointer-events:none}
.sw i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;background:var(--gray-l);transition:transform .35s var(--e),background .35s var(--e)}
.sw input:checked+i{background:var(--ink);border-color:var(--ink)}
.sw input:checked+i::after{transform:translateX(22px);background:var(--red)}
.sw input:disabled+i{opacity:.5}
.ckbox .ck-btn{margin-top:28px}

.artvisuel{padding:0}
.artvisuel+section{padding-top:52px}
.artvisuel img{display:block;width:100%;height:auto;border:1px solid var(--hair)}

/* 22 · Révélations ------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s var(--e),transform 1s var(--e)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .btn::before{transition:none}
}


/* 24 · Brief en étapes ---------------------------------------------------- */
.hd--nu .aide-nav{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-l)}
.hd--nu .aide-nav a{color:var(--red)}
body.page-brief{padding-bottom:96px}
/* page de saisie : pied de page réduit aux mentions, rien qui distraie */
body.page-brief footer{padding-top:0}
body.page-brief footer .fgrid{display:none}
body.page-brief footer .fbot{border-top:0;padding-top:34px;padding-bottom:20px}
.brief{max-width:860px;margin:0 auto}

/* bandeau de progression, compact et collant sous la barre du site */
.brief-tete{position:sticky;top:var(--nav-h);z-index:40;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-bottom:1px solid var(--hair);padding:16px 0 13px;margin-bottom:56px}
.fil{display:flex;gap:0;list-style:none;margin:0 0 13px;padding:0;overflow-x:auto;scrollbar-width:none}
.fil::-webkit-scrollbar{display:none}
.fil li{flex:none}
.fil button{background:none;border:0;cursor:pointer;padding:5px 14px 5px 0;display:flex;align-items:center;gap:8px;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-l);white-space:nowrap;transition:color .4s var(--e)}
.fil button:disabled{cursor:default}
.fil b{width:20px;height:20px;border:1px solid var(--hair);display:flex;align-items:center;justify-content:center;font-family:Montserrat,sans-serif;font-weight:800;font-size:10.5px;flex:none;transition:background .4s var(--e),border-color .4s var(--e),color .4s var(--e)}
.fil li.faite button{color:var(--ink)}
.fil li.faite b{background:var(--ink);border-color:var(--ink);color:#fff}
.fil li.active button{color:var(--red)}
.fil li.active b{background:var(--red);border-color:var(--red);color:#fff}
.fil li:not(:last-child) button::after{content:"";width:16px;height:1px;background:var(--hair);margin-left:6px}
.jauge{height:2px;background:var(--hair);position:relative;overflow:hidden}
.jauge i{position:absolute;left:0;top:0;bottom:0;background:var(--red);width:0;transition:width .6s var(--e)}
.brief-compte{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:10px;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-l)}
.brief-compte span+span{color:var(--gray-l)}

.etape{display:none}
.etape.on{display:block;animation:apparait .45s var(--e)}
@keyframes apparait{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.etape>h2{margin-bottom:12px}
.etape>.intro{color:var(--gray);font-size:17.5px;max-width:62ch;margin-bottom:38px}

/* intertitre de sous-groupe : donne du rythme dans une longue étape */
.groupe{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--red);margin:44px 0 0;padding-top:22px;border-top:2px solid var(--ink)}
.groupe:first-child{margin-top:0}

/* une question */
.qbloc{padding:20px 0;border-top:1px solid var(--hair)}
.qbloc:first-of-type{border-top:2px solid var(--ink);padding-top:22px}
.duo2{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;border-top:1px solid var(--hair)}
.duo2:first-of-type{border-top:2px solid var(--ink)}
/* un intertitre porte déjà le filet : le champ qui suit n'en remet pas */
.groupe+.qbloc,.groupe+.duo2,.groupe+.duo2 .qbloc{border-top:0}
.groupe+.qbloc,.groupe+.duo2 .qbloc{padding-top:16px}
.duo2 .qbloc{border-top:0;padding-top:20px}
.duo2 .qbloc:first-of-type{border-top:0;padding-top:20px}
.qbloc>label,.qtitre{display:block;font-family:Montserrat,sans-serif;font-weight:800;font-size:16.5px;letter-spacing:-.02em;margin-bottom:7px;color:var(--ink)}
.qbloc .aide{font-size:14px;color:var(--gray-l);margin:0 0 13px;max-width:70ch}
.qbloc .obl{color:var(--red)}
.qbloc input[type=text],.qbloc input[type=email],.qbloc input[type=tel],.qbloc input[type=url],.qbloc input[type=number],.qbloc input[type=date],.qbloc select,.qbloc textarea{width:100%;border:1px solid var(--hair);border-radius:var(--radius);background:var(--white);padding:13px 15px;font:300 16px/1.6 "Hanken Grotesk",sans-serif;color:var(--ink);transition:border-color .35s var(--e)}
.qbloc textarea{min-height:120px;resize:vertical}
.qbloc input:focus,.qbloc select:focus,.qbloc textarea:focus{outline:none;border-color:var(--red)}
.qbloc.erreur input,.qbloc.erreur select,.qbloc.erreur textarea{border-color:var(--red)}
.qbloc .msg{display:none;margin:9px 0 0;font-size:13.5px;color:var(--red)}
.qbloc.erreur .msg{display:block}

/* cartes de choix */
.cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cartes--2{grid-template-columns:repeat(2,1fr)}
.carte{position:relative;border:1px solid var(--hair);padding:24px 22px;cursor:pointer;display:flex;flex-direction:column;transition:border-color .4s var(--e),background .4s var(--e),transform .4s var(--e)}
.carte:hover{border-color:var(--ink);transform:translateY(-3px)}
.carte input{position:absolute;opacity:0;pointer-events:none}
.carte b{font-family:Montserrat,sans-serif;font-weight:800;font-size:17px;text-transform:uppercase;letter-spacing:-.02em;margin-bottom:8px}
.carte span{font-size:14px;color:var(--gray);flex:1;line-height:1.5}
.carte em{font-style:normal;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gray-l);margin-top:14px}
.carte:has(input:checked){border-color:var(--red);background:var(--off)}
.carte:has(input:checked) b{color:var(--red)}

/* cases à cocher */
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.case{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--hair);padding:12px 14px;cursor:pointer;transition:border-color .35s var(--e),background .35s var(--e)}
.case:hover{border-color:var(--gray-l)}
.case:has(input:checked){border-color:var(--red);background:var(--off)}
.case input{width:16px;height:16px;margin:2px 0 0;flex:none;accent-color:var(--red)}
.case span{font-size:14.5px;line-height:1.45}

/* curseurs de ton */
.curseur{display:grid;gap:6px;padding:8px 0}
.curseur .bornes{display:flex;justify-content:space-between;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-l)}
.curseur input[type=range]{width:100%;accent-color:var(--red)}

/* champs répétables */
.repet .ligne{display:grid;grid-template-columns:1fr auto;gap:8px;margin-bottom:8px}
.repet .ligne button{border:1px solid var(--hair);background:none;width:44px;cursor:pointer;color:var(--gray-l);font-size:17px;line-height:1;transition:border-color .35s var(--e),color .35s var(--e)}
.repet .ligne button:hover{border-color:var(--red);color:var(--red)}
.qbloc .ajout{margin-top:4px;background:none;border:0;padding:0;cursor:pointer;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--red);border-bottom:1px solid var(--red)}

/* grille des tâches */
.taches{border-top:1px solid var(--hair)}
.tache{display:grid;grid-template-columns:1fr 128px 128px;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--hair)}
.tache .nom{display:flex;gap:11px;align-items:center;cursor:pointer;font-size:15px}
.tache .nom input{width:16px;height:16px;flex:none;accent-color:var(--red)}
.tache select{opacity:.35;transition:opacity .35s var(--e)}
.tache.on select{opacity:1}
.tacheentete{display:grid;grid-template-columns:1fr 128px 128px;gap:12px;padding-bottom:9px;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-l)}

/* barre d'action collante : le bouton reste toujours à portée */
.brief-barre{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-top:1px solid var(--hair)}
.brief-barre .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap}
.brief-barre .droite{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.sauvegarde{font-size:12.5px;color:var(--gray-l)}
.sauvegarde b{color:var(--red);font-weight:500}

/* récapitulatif */
.recap dl{margin:0}
.recap .rgroupe{padding:18px 0;border-bottom:1px solid var(--hair)}
.recap h3{font-size:18px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.recap h3 button{background:none;border:0;padding:0;cursor:pointer;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--red);border-bottom:1px solid var(--red)}
.recap .r{display:grid;grid-template-columns:40% 1fr;gap:16px;padding:6px 0;font-size:15px}
.recap .r dt{color:var(--gray-l)}
.recap .r dd{margin:0;color:var(--ink)}
.recap .vide{color:var(--gray-l);font-style:italic}

@media(max-width:820px){
  .cartes,.cartes--2,.cases,.duo2{grid-template-columns:1fr}
  .duo2{border-top:0}
  .duo2 .qbloc{border-top:1px solid var(--hair)}
  .tache,.tacheentete{grid-template-columns:1fr}
  .tacheentete{display:none}
  .tache{padding:14px 0;gap:8px}
  .recap .r{grid-template-columns:1fr;gap:2px}
  .brief-tete{position:static}
  .brief-barre .sauvegarde{display:none}
  body.page-brief{padding-bottom:84px}
}

/* 23 · Responsive -------------------------------------------------------- */
@media(max-width:1080px){
  :root{--pad-section:84px}
  .hero{min-height:0;padding:126px 0 0}
  .hero-main,.split,.rub,.formgrid{grid-template-columns:1fr;gap:36px}
  .rub{gap:16px}
  .sticky{position:static}
  .hero-strip,.board,.flow,.news,.postgrid,.gridworks{grid-template-columns:repeat(2,1fr)}
  .board--4{grid-template-columns:repeat(2,1fr)}
  .cell{border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);min-height:0}
  .offers{grid-template-columns:1fr}
  .off{padding:44px 0;border-right:0}
  .off--hi{padding:44px 32px}
  .works{grid-template-columns:1fr}
  .works .work{grid-column:span 1!important;margin-top:0!important}
  .post{border-right:0;padding-left:0!important;padding-right:0}
  .menu{display:none}
  .menu.open{display:flex;position:absolute;top:var(--nav-h);left:0;right:0;background:var(--ink);color:#fff;opacity:1;flex-direction:column;gap:18px;padding:26px 44px 30px}
  body.page-inner .menu.open{background:var(--white)}
  .burger{display:block}
  .ck{left:14px;right:14px;bottom:14px;width:auto;max-width:none}
  .toc ol{columns:1}
}
@media(max-width:640px){
  .wrap{padding:0 22px}
  .hero-strip,.board,.board--4,.flow,.news,.postgrid,.gridworks{grid-template-columns:1fr}
  .bar{grid-template-columns:1fr}
  .field--half{grid-template-columns:1fr}
  .menu.open{padding:26px 22px 30px}
  .fgrid{grid-template-columns:1fr;gap:30px}
}