/* ==========================================================================
   WebHopper · base.css
   Socle commun a toutes les pages : reset, composants, nav, pied de page.
   Genere le 1er aout 2026 depuis la homepage. Charte Ember & Steel.
   ========================================================================== */

/* tokens.css doit etre charge avant ce fichier (voir le <head> des pages). */

/* ============ RESET, COMPOSANTS, NAV ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);font-size:17px;line-height:1.7;color:var(--charbon);
  background:var(--ivoire);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
/* height:auto est INDISPENSABLE a cote de max-width. Sans lui, une image qui
   porte un attribut height voit sa largeur contrainte mais garde sa hauteur
   declaree, donc s'etire verticalement. Constate sur les illustrations des
   articles apres l'ajout des attributs de dimensions. Les regles qui fixent une
   hauteur explicite plus loin restent prioritaires. */
img{max-width:100%;height:auto;display:block}
a{color:var(--charbon);text-decoration:none}
h1,h2,h3,h4,p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit}
::selection{background:var(--ambre);color:var(--charbon)}
:focus-visible{outline:3px solid var(--ambre);outline-offset:3px;border-radius:3px}

.skip-link{position:absolute;left:1rem;top:-100%;background:var(--ambre);color:var(--charbon);padding:.75rem 1.25rem;
  border-radius:var(--r-btn);font-weight:700;font-size:14px;z-index:2000;transition:top .2s ease}
.skip-link:focus{top:1rem}


.mono{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:1px;text-transform:uppercase;line-height:1}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-mono);font-size:12px;font-weight:500;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--pierre);line-height:1}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ambre);flex-shrink:0}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.rule{height:1px;background:var(--border-clair);border:0;margin:0}
section{position:relative}

/* Boutons */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-body);font-weight:700;font-size:14px;line-height:1;
  padding:14px 26px;border-radius:var(--r-btn);border:1.5px solid transparent;cursor:pointer;text-decoration:none;
  transition:transform .18s var(--ease), background-color .18s ease, box-shadow .18s ease, color .18s ease, border-color .18s ease;min-height:44px}
.btn svg{width:18px;height:18px;transition:transform .2s ease}
.btn-primary{background:var(--charbon);color:var(--blanc)}
.btn-primary:hover{background:var(--charbon-3)}
.btn-primary:hover svg{transform:translateX(3px)}
.btn-outline{border-color:var(--gravier);color:var(--charbon);background:transparent}
.btn-outline:hover{background:var(--blanc)}
.btn-outline:hover svg{transform:translateX(3px)}
.btn-accent{background:var(--ambre);color:var(--charbon)}
.btn-accent:hover{background:var(--charbon);color:var(--ambre)}
.cta .btn-accent:hover,.footer .btn-accent:hover,.process .btn-accent:hover{background:var(--blanc);color:var(--charbon)}
.btn-accent:hover svg{transform:translate(3px,-3px)}

.text-link{color:var(--charbon);border-bottom:1.5px solid var(--ambre);transition:background .2s ease}
.text-link:hover,.text-link:focus-visible{background:var(--ambre-pale)}

.ghost-link{display:inline-flex;align-items:center;gap:.55rem;font-weight:700;font-size:15px;color:var(--charbon);
  text-underline-offset:6px;position:relative;padding-bottom:2px}
.ghost-link svg{width:18px;height:18px;color:var(--ambre);transition:transform .2s ease}
.ghost-link::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:var(--ambre);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.ghost-link:hover::after,.ghost-link:focus-visible::after{transform:scaleX(1)}
.ghost-link:hover svg{transform:translateX(4px)}

.hdr{position:sticky;top:0;z-index:100;height:var(--header-main);pointer-events:none}
.hdr-main,.mnav{pointer-events:auto}
.hdr-main{position:absolute;top:0;left:0;right:0;margin:0 auto;max-width:100%;background:rgba(245,242,237,0);border:1px solid transparent;border-radius:0;transition:top .6s var(--ease-out),max-width .6s var(--ease-out),border-radius .6s var(--ease-out),background-color .4s var(--ease),border-color .4s var(--ease),box-shadow .5s var(--ease)}
.hdr-bar{height:var(--header-main);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2rem;transition:height .6s var(--ease-out),padding .6s var(--ease-out)}
.hdr-logo{display:inline-flex;align-items:center;justify-self:start}
.hdr-logo img{height:24px;width:auto;transition:height .6s var(--ease-out)}
.hdr-nav{position:relative;display:flex;align-items:center;gap:2px}
.nav-glider{position:absolute;top:50%;left:0;width:0;height:40px;margin-top:-20px;border-radius:var(--r-pill);background:rgba(26,25,24,.06);opacity:0;pointer-events:none;transition:transform .45s var(--ease-out),width .45s var(--ease-out),opacity .25s var(--ease)}
.nav-glider.on{opacity:1}
.nav-link{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 15px;border:0;border-radius:var(--r-pill);background:none;font-family:var(--font-body);font-size:14px;font-weight:500;line-height:1;color:var(--ink);cursor:pointer;transition:color .2s ease}
.nav-link:hover,.nav-link[aria-expanded="true"]{color:var(--charbon)}
.nav-link:focus-visible{outline-offset:0}
.nav-link[aria-current],.nav-link.is-current{color:var(--charbon);font-weight:600}
.nav-link[aria-current]::after,.nav-link.is-current::after{content:"";position:absolute;left:50%;bottom:3px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--ambre)}
.nav-link .chev{width:12px;height:12px;color:var(--pierre);transition:transform .3s var(--ease)}
.nav-link[aria-expanded="true"] .chev{transform:rotate(180deg)}
.hdr-actions{display:flex;align-items:center;justify-content:flex-end;gap:1rem}
.hdr .btn-sm{height:42px;min-height:42px;padding:0 18px;font-size:14px;font-weight:600;transition:background-color .25s ease,color .25s ease,border-radius .6s var(--ease-out)}
.hdr .btn:hover{transform:none;box-shadow:none}
.hdr .btn-accent:hover{background:var(--charbon);color:var(--ambre)}
.hdr .btn svg{width:16px;height:16px}

@media(min-width:901px){
  .hdr.is-scrolled .hdr-main{top:12px;max-width:min(1200px,calc(100% - 32px));border-radius:var(--r-pill);background:var(--voile);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border-color:rgba(26,25,24,.08);box-shadow:var(--shadow-float)}
  .hdr.is-scrolled .hdr-bar{height:60px;padding-left:24px;padding-right:9px}
  .hdr.is-scrolled .hdr-logo img{height:21px}
  .hdr.is-scrolled .btn-sm{border-radius:var(--r-pill)}
  .hdr-main.mega-open{background:var(--blanc);border-bottom-color:var(--border-clair)}
  .hdr.is-scrolled .hdr-main.mega-open{background:var(--voile);border-color:rgba(26,25,24,.08)}
}

.mega{position:absolute;left:0;right:0;top:100%;background:var(--blanc);border-bottom:1px solid var(--border-clair);box-shadow:var(--shadow-float);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s var(--ease),transform .45s var(--ease-out),visibility 0s linear .25s}
.mega.is-open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.hdr.is-scrolled .mega{top:calc(100% + 10px);border:1px solid var(--border-clair);border-radius:20px;overflow:hidden}
.hdr.is-scrolled .mega .wrap{padding-left:24px;padding-right:24px}
.mega-in{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:2rem;padding-top:2rem;padding-bottom:2rem}
.mega-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.mega-item{display:grid;grid-template-columns:auto 1fr auto;gap:4px 16px;align-items:start;padding:20px;border-radius:var(--r-btn);transition:background-color .25s var(--ease)}
.mega-n{grid-row:span 2;padding-top:5px;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;line-height:1.2;color:var(--pierre)}
.mega-item strong{font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--charbon)}
.mega-item .d{grid-column:2;font-size:15px;line-height:1.55;color:var(--pierre)}
.mega-item svg{grid-row:1;grid-column:3;width:16px;height:16px;margin-top:5px;color:var(--ambre);opacity:0;transform:translateX(-6px);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.mega-item:hover,.mega-item[aria-current]{background:var(--ambre-pale)}
.mega-item:hover svg,.mega-item:focus-visible svg{opacity:1;transform:none}
.mega-foot{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:18px 20px 0;margin-top:12px;border-top:1px solid var(--border-clair)}
.mega-lbl,.mnav-lbl{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;line-height:1.2;color:var(--pierre)}
.mega-side{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;padding:24px;border-radius:var(--r-btn);background:var(--ivoire)}
.mega-side .who{display:flex;align-items:center;gap:12px}
.mega-side .who img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.mega-side .who strong{display:block;font-size:15px;font-weight:600;line-height:1.3;color:var(--charbon)}
.mega-side .who span{font-size:13px;line-height:1.4;color:var(--pierre)}
.mega-side p{font-size:15px;line-height:1.6;color:var(--ink)}

.menu-btn{display:none;align-items:center;gap:10px;height:40px;padding:0 16px 0 18px;border:1px solid var(--gravier);border-radius:var(--r-pill);background:transparent;font-size:14px;font-weight:600;color:var(--charbon);cursor:pointer}
.menu-btn .bars{display:grid;gap:4px;width:16px}
.menu-btn .bars i{display:block;height:1.5px;border-radius:1px;background:currentColor;transition:transform .3s var(--ease)}
.menu-btn[aria-expanded="true"] .bars i:first-child{transform:translateY(2.75px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .bars i:last-child{transform:translateY(-2.75px) rotate(-45deg)}
.mnav{display:none;position:fixed;left:0;right:0;top:64px;bottom:0;z-index:99;overflow-y:auto;overscroll-behavior:contain;background:var(--ivoire);padding:8px var(--gutter) 40px}
.mnav.open{display:block;animation:mnavIn .35s var(--ease-out) both}
@keyframes mnavIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
html.menu-open body{overflow:hidden}
.mnav-list > li{border-bottom:1px solid var(--border-clair)}
.mnav-list > li > a,.mnav-toggle{display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:8px;width:100%;padding:16px 0;border:0;background:none;text-align:left;cursor:pointer;font-family:var(--font-display);font-size:30px;font-weight:800;letter-spacing:-.025em;line-height:1.1;color:var(--charbon)}
.mnav-n{font-family:var(--font-mono);font-size:12px;font-weight:400;letter-spacing:.04em;color:var(--pierre)}
.mnav-list > li > a[aria-current]::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--ambre)}
.mnav-toggle .chev{width:20px;height:20px;color:var(--charbon);transition:transform .45s var(--ease-out)}
.mnav-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.mnav-sub{display:grid;grid-template-rows:0fr;margin:0;transition:grid-template-rows .5s var(--ease-out),margin .5s var(--ease-out)}
.mnav-toggle[aria-expanded="true"] + .mnav-sub{grid-template-rows:1fr;margin-bottom:18px}
.mnav-sub-in{min-height:0;overflow:hidden;border-radius:14px;background:var(--blanc);transition:box-shadow .3s var(--ease)}
.mnav-toggle[aria-expanded="true"] + .mnav-sub .mnav-sub-in{box-shadow:0 0 0 1px var(--border-clair)}
.mnav-sub-in a{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;padding:15px 16px;border-bottom:1px solid var(--border-clair);font-size:16px;font-weight:600;color:var(--charbon);opacity:0;transform:translateY(-6px);transition:opacity .35s var(--ease),transform .45s var(--ease-out),background-color .2s ease}
.mnav-sub-in a:last-child{border-bottom:0}
.mnav-sub-in a svg{width:16px;height:16px;color:var(--ambre)}
.mnav-sub-in a[aria-current]{background:var(--ambre-pale)}
.mnav-sn{font-family:var(--font-mono);font-size:12px;font-weight:400;letter-spacing:.04em;color:var(--pierre)}
.mnav-sub-in a.mnav-all{grid-template-columns:1fr auto;font-size:14px;color:var(--ink)}
.mnav-toggle[aria-expanded="true"] + .mnav-sub a{opacity:1;transform:none}
.mnav-toggle[aria-expanded="true"] + .mnav-sub a:nth-child(2){transition-delay:.04s}
.mnav-toggle[aria-expanded="true"] + .mnav-sub a:nth-child(3){transition-delay:.08s}
.mnav-toggle[aria-expanded="true"] + .mnav-sub a:nth-child(4){transition-delay:.12s}
.mnav-toggle[aria-expanded="true"] + .mnav-sub a:nth-child(5){transition-delay:.16s}
.mnav-contact{display:grid;gap:14px;margin-top:32px}
.mnav-contact > a:not(.btn){font-size:16px;color:var(--charbon)}
.mnav-soc{display:flex;flex-wrap:wrap;gap:8px 24px;padding-top:14px;border-top:1px solid var(--border-clair)}
.mnav-soc a{display:inline-flex;align-items:center;gap:5px;min-height:40px;font-size:15px;font-weight:600;color:var(--charbon)}
.mnav-soc svg{width:14px;height:14px;color:var(--ambre);transition:transform .25s var(--ease)}
.mnav-soc a:hover svg{transform:translate(2px,-2px)}
.mnav-contact .btn{justify-self:start;margin-top:8px}

@media(max-width:900px){
  .hdr{height:64px}
  .hdr-main{background:var(--voile);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border-width:0 0 1px;border-color:var(--border-clair)}
  .hdr-nav,.hdr-actions .btn,.mega{display:none}
  .hdr-bar{height:64px;grid-template-columns:1fr auto}
  .hdr-logo img{height:20px}
  .menu-btn{display:inline-flex}
  .hdr.is-scrolled .hdr-main{box-shadow:var(--shadow-float)}
}
@media(min-width:901px){.mnav{display:none!important}}
@media(prefers-reduced-motion:reduce){.mnav-sub-in a{opacity:1;transform:none}}

/* ============ EN-TETE DE SECTION ============ */
/* ============ SECTION HEAD ============ */
.section-pad{padding:clamp(4rem,9vw,7.5rem) 0}
.sec-head{position:relative;margin-bottom:clamp(2.5rem,5vw,4rem);padding-top:1.4rem;border-top:1px solid var(--charbon)}
@media(min-width:900px){
  .wrap > .sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);column-gap:2rem;align-items:start}
  .wrap > .sec-head > *{grid-column:2}
  .wrap > .sec-head > .sec-marker{grid-column:1;grid-row:1 / span 6;margin:.8rem 0 0}
}
.process .sec-head{border-top-color:var(--filet-sombre)}
.sec-index{display:none;position:absolute;right:0;top:-.35em;font-family:var(--font-display);font-weight:900;font-size:clamp(7rem,20vw,17rem);line-height:.8;letter-spacing:-.05em;color:var(--charbon);opacity:.05;pointer-events:none;user-select:none;z-index:0}
.sec-marker{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:2px;color:var(--charbon);display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.2rem}
.sec-marker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ambre);flex-shrink:0}
.sec-title{font-family:var(--font-display);font-weight:900;font-size:clamp(1.9rem,4.4vw,3.1rem);letter-spacing:-.025em;line-height:1.08;color:var(--charbon);max-width:18ch;position:relative;z-index:1}
.sec-lead{font-size:clamp(1rem,1.3vw,1.12rem);color:var(--ink);max-width:56ch;margin-top:1.4rem;line-height:1.7;position:relative;z-index:1}

/* ============ SECTION CTA (reprise sur toutes les pages) ============ */
/* ============ CTA FINALE (sombre + grain + projecteur) ============ */
.cta{background:var(--charbon);color:var(--blanc);position:relative;overflow:hidden;isolation:isolate}
.cta::before{content:"";position:absolute;right:-220px;bottom:-360px;width:760px;height:760px;border-radius:50%;border:1px solid rgba(222,99,0,.4);z-index:-1;pointer-events:none}
.cta::after{content:"";position:absolute;right:-60px;bottom:-200px;width:440px;height:440px;border-radius:50%;border:1px solid var(--filet-sombre);z-index:-1;pointer-events:none}
.cta-mesh{display:none;position:absolute;inset:0;pointer-events:none;z-index:-3;
  background:radial-gradient(60% 55% at 18% 20%,rgba(222,99,0,.30),transparent 60%),radial-gradient(50% 50% at 88% 82%,rgba(222,99,0,.22),transparent 62%)}
.cta-grain{position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cta-spot{display:none;position:absolute;width:560px;height:560px;border-radius:50%;pointer-events:none;z-index:-2;left:50%;top:38%;
  transform:translate(-50%,-50%);opacity:0;transition:opacity .4s ease;
  background:radial-gradient(circle,rgba(222,99,0,.28),rgba(222,99,0,.09) 40%,transparent 66%)}
/* padding en raccourci : le 0 horizontal ecrasait la gouttiere de .wrap et le
   texte venait toucher le bord de l'ecran sur mobile. Seul le vertical est
   redefini ici. */
.cta .wrap{position:relative;z-index:1;text-align:center;
  padding-top:clamp(4.5rem,10vw,8rem);padding-bottom:clamp(4.5rem,10vw,8rem)}
.cta .marker{color:var(--ambre);font-family:var(--font-mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;display:block;margin-bottom:1.6rem}
.cta h2{font-family:var(--font-display);font-weight:900;letter-spacing:-.03em;line-height:1.04;font-size:clamp(2.3rem,6vw,4.5rem);max-width:15ch;margin:0 auto 1.6rem}
.cta p{color:var(--sable);max-width:52ch;margin:0 auto 2.6rem;font-size:clamp(1rem,1.3vw,1.18rem);line-height:1.7}
.cta .btn-accent:focus-visible{outline-color:var(--ambre)}

/* ============ PIED DE PAGE ============ */
/* ============ FOOTER ============ */
.footer{background:var(--charbon);color:var(--sable);border-top:1px solid rgba(255,255,255,.1)}
/* Meme correction que sur .cta : la gouttiere de .wrap est conservee, sinon
   les colonnes du pied de page ne tombaient pas sur la meme verticale que le
   contenu au-dessus, et collaient au bord sur mobile. */
.footer .wrap{padding-top:clamp(3rem,6vw,4.5rem);padding-bottom:2rem}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(2rem,4vw,3rem)}
.foot-brand .b{display:inline-flex;align-items:center}
.foot-brand .b .brand-logo{height:30px}
.foot-brand p{margin-top:1rem;max-width:34ch;font-size:.95rem;line-height:1.7;color:var(--cendre)}
.foot-col h3{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:var(--gravier);margin-bottom:1.2rem}
.foot-col a,.foot-col span{display:block;color:var(--sable);font-size:.95rem;padding:.35rem 0;line-height:1.4}
.foot-col a{position:relative;width:fit-content}
.foot-col a::after{content:"";position:absolute;left:0;bottom:.2rem;height:1px;width:100%;background:var(--ambre);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.foot-col a:hover::after,.foot-col a:focus-visible::after{transform:scaleX(1)}
.foot-col a:hover{color:var(--blanc)}
.foot-bottom{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.1);font-size:.85rem;color:var(--gravier)}
.foot-bottom .links{display:flex;gap:1.5rem;flex-wrap:wrap}
.foot-bottom a{color:var(--cendre)}
.foot-bottom a:hover{color:var(--blanc)}

/* Visible des lecteurs d'ecran, invisible a l'oeil. Pas display:none, qui le
   retirerait aussi de l'arbre d'accessibilite. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============ NEWSLETTER (bandeau du pied de page) ============
   Pose en premiere rangee du pied de page plutot qu'en cinquieme colonne : a
   cinq, les colonnes tombaient sous 150px et le champ de saisie devenait
   inutilisable sur portable. Le bandeau garde toute la largeur. */
.foot-news{display:grid;grid-template-columns:1.4fr 1.6fr;gap:clamp(1.5rem,4vw,3rem);
  align-items:start;padding-bottom:clamp(2.5rem,5vw,3.5rem);margin-bottom:clamp(2.5rem,5vw,3.5rem);
  border-bottom:1px solid rgba(255,255,255,.12)}
.foot-news h3{font-family:var(--font-display);font-weight:800;font-size:clamp(1.15rem,2vw,1.45rem);
  letter-spacing:-.015em;color:var(--blanc);margin-bottom:.5rem}
/* :not(.fn-msg) est indispensable. La mesure de 40 caracteres vise le paragraphe
   d'introduction, pour qu'il reste confortable a lire. Le message de retour est
   un <p> du meme conteneur : sans cette exclusion il heritait du plafond et se
   repliait sur 371px alors que le formulaire en fait 649. */
.foot-news p:not(.fn-msg){font-size:.95rem;line-height:1.7;color:var(--cendre);max-width:40ch}
.fn-form{display:flex;flex-direction:column;gap:.85rem}
.fn-row{display:flex;gap:.6rem;flex-wrap:wrap}
.fn-row input[type=email]{flex:1 1 240px;min-width:0;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.22);border-radius:var(--r-btn);color:var(--blanc);
  padding:12px 14px;font-family:var(--font-body);font-size:.95rem}
.fn-row input[type=email]::placeholder{color:var(--gravier)}
.fn-row input[type=email]:focus-visible{outline:2px solid var(--ambre);outline-offset:2px;
  border-color:transparent;background:rgba(255,255,255,.1)}
/* L'autofill de Chrome repeint le champ en blanc avec un texte sombre, ce qui
   rend la saisie illisible sur le charbon du pied de page. On ne peut pas
   surcharger son fond, seulement le recouvrir par une ombre interne. La
   transition interminable empeche le navigateur de repasser sa couleur apres
   coup. Sans effet sur les surlignages injectes par un gestionnaire de mots de
   passe, qui vivent hors de la page. */
.fn-row input[type=email]:-webkit-autofill,
.fn-row input[type=email]:-webkit-autofill:hover,
.fn-row input[type=email]:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--blanc);caret-color:var(--blanc);
  -webkit-box-shadow:0 0 0 100px var(--charbon-2) inset;
  transition:background-color 9999s ease-out 0s}
.fn-row button{flex:0 0 auto}
/* Le piege a robots. Jamais display:none : certains robots ignorent les champs
   caches ainsi, et un lecteur d'ecran doit pouvoir le sauter proprement. */
.fn-pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fn-consent{display:flex;gap:.65rem;align-items:flex-start;font-size:.85rem;
  line-height:1.55;color:var(--cendre)}
.fn-consent input{margin-top:.2rem;flex-shrink:0;width:16px;height:16px;accent-color:var(--ambre)}
.fn-consent a{color:var(--sable);text-decoration:underline;text-underline-offset:2px}
.fn-consent a:hover{color:var(--blanc)}
/* Message de retour des formulaires.
   Pas un cartouche d'alerte a barre laterale : le site n'en utilise nulle part,
   et un bandeau colore importe un vocabulaire qui n'est pas le sien. On reprend
   celui de .sec-marker, filet ambre de 22px puis intitule en mono, qui sert
   d'en-tete de section sur toutes les pages.

   Le composant sert sur DEUX fonds : la carte blanche du formulaire de contact
   et le charbon du pied de page. D'ou les deux jeux de couleurs. Sur clair,
   l'intitule est en charbon et c'est le filet qui porte l'accent, l'ambre ne
   passant pas en petit texte sur fond clair. Sur charbon il atteint 4,92:1, il
   peut donc porter l'intitule lui-meme. */
.fn-msg{display:none;font-size:.95rem;line-height:1.65;color:var(--ink)}
.fn-msg.on{display:block}
.fn-msg-l{display:flex;align-items:center;gap:.6rem;margin-bottom:.45rem;
  font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--charbon)}
.fn-msg-l::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ambre);flex-shrink:0}
.footer .fn-msg{color:var(--sable)}
.footer .fn-msg-l{color:var(--ambre)}
@media(max-width:860px){.foot-news{grid-template-columns:1fr}}

/* Champ refuse par le serveur. L'ambre porte le signal, mais jamais seul :
   le message nomme le champ en toutes lettres, ce qu'exige WCAG 1.4.1. */
[aria-invalid="true"]{border-color:var(--ambre)!important;
  box-shadow:0 0 0 3px rgba(222,99,0,.14)}
.footer [aria-invalid="true"]{border-color:var(--ambre)!important}
/* Plusieurs erreurs a la fois : une liste, pas un pave. */
.fn-msg-list{margin:.15rem 0 0;padding-left:1.1rem;list-style:none}
.fn-msg-list li{position:relative;padding-left:.1rem;margin-top:.3rem}
.fn-msg-list li::before{content:"";position:absolute;left:-1rem;top:.62em;
  width:6px;height:1px;background:var(--ambre)}

/* ============ APPARITION AU DEFILEMENT ============ */
/* ============ REVEAL ============ */
.js .reveal{opacity:0;transform:translateY(18px);
  transition:opacity .7s ease, transform .7s var(--ease);transition-delay:var(--rd,0ms)}
.js .reveal.in{opacity:1;transform:none}

/* ============ RESPONSIVE (elements communs) ============ */
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1 / -1}}
@media(max-width:560px){
  .foot-grid{grid-template-columns:1fr}
  .sec-index{opacity:.045;font-size:clamp(6rem,32vw,10rem)}
}

/* ============ MOUVEMENT REDUIT (elements communs) ============ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .js .reveal{opacity:1 !important;transform:none !important}
}

/* ============ TRANSITIONS ENTRE PAGES ============
   Passage d'une page a l'autre gere nativement par le navigateur. Zero
   JavaScript. Les navigateurs qui ne connaissent pas la regle l'ignorent et
   naviguent normalement. Ne fonctionne qu'avec un serveur, pas en ouverture
   directe des fichiers. */
@view-transition{navigation:auto}

/* La barre de nav est NOMMEE, donc sortie de l'instantane « root » : le
   navigateur la reconnait d'une page a l'autre et la laisse en place au lieu
   de la faire disparaitre puis reapparaitre. Sans ca, le fondu par defaut
   emporte la nav avec le reste et produit un clignotement qui se lit
   exactement comme un rechargement de page, soit l'inverse de l'effet
   recherche. C'est le seul element nomme : il est colle en haut (sticky),
   donc toujours a l'ecran, et identique sur les 24 pages.
   Ne pas nommer .footer ni main. Le pied de page est hors champ au moment du
   clic, et main est un element tres haut : son instantane ferait la hauteur
   de la page entiere, et deux pages de hauteurs differentes produiraient un
   etirement visible. L'instantane « root » est lui borne a la fenetre. */
.hdr-main{view-transition-name:nav}
/* La nav garde le fondu par defaut, seulement plus court. Ne PAS le couper
   avec animation:none : les deux etats different par le soulignement ambre de
   la page courante, et les figer tous les deux a pleine opacite afficherait
   deux soulignements a la fois pendant toute la transition. Le gain du nom
   est ailleurs : la nav est sortie de l'instantane « root », elle ne suit
   donc pas la translation du contenu et reste geometriquement fixe. */
::view-transition-group(nav),
::view-transition-old(nav),
::view-transition-new(nav){animation-duration:.2s}

/* Le contenu part vers le haut, le suivant arrive d'en bas : le mouvement
   raconte une progression au lieu d'un simple fondu. Les deux animations se
   jouent en meme temps, la transition dure donc 400ms, pas 640ms.
   mix-blend-mode est remis a normal : la feuille de style du navigateur pose
   un plus-lighter pensé pour un fondu symetrique, qui delave les aplats quand
   on y ajoute une translation. */
::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal}

/* Mouvement et fondu sont DEUX animations distinctes sur le meme element, et
   non un seul jeu d'images-cles a trois paliers. Avec un palier intermediaire,
   la courbe d'acceleration se rejoue sur chaque segment et produit un a-coup
   au milieu du mouvement. Les separer laisse chacun avoir sa duree et sa
   courbe : le contenu devient lisible en 300ms pendant qu'il continue de se
   poser sur 480ms. C'est ce decalage qui donne la sensation de fluidite.

   Aucune mise a l'echelle, volontairement. Ces pseudo-elements sont des
   captures bitmap, pas du texte vivant : les agrandir reechantillonne les
   lettres et les rend molles pendant toute la transition. Une translation
   reste nette. C'est la difference entre « fluide » et « flou ». */
::view-transition-old(root){
  animation:pageSortMouvement .26s cubic-bezier(.4,0,1,1) both,
            pageSortFondu .2s linear both}
::view-transition-new(root){
  animation:pageEntreMouvement .48s var(--ease) both,
            pageEntreFondu .3s linear both}
@keyframes pageSortMouvement{to{transform:translateY(-18px)}}
@keyframes pageSortFondu{to{opacity:0}}
@keyframes pageEntreMouvement{from{transform:translateY(36px)}}
@keyframes pageEntreFondu{from{opacity:0}}

/* ============ MOUVEMENT REDUIT : ajouts ============ */
@media(prefers-reduced-motion:reduce){
  .js .reveal{transition-delay:0ms !important}
  .sec-index{transform:none !important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
}

/* ============ QUESTIONS FRÉQUENTES : ouverture en fondu ============ */
.faq details[open] .ans{animation:faqIn .35s var(--ease) both}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.faq details[open] .ans{animation:none}}

/* ==========================================================================
   COMPOSANTS DE PAGE INTERIEURE
   Remontes depuis offres.css le 2 aout 2026 : ils servent sur toutes les
   pages interieures (offres, services, a propos).
   ========================================================================== */

/* ---- En-tete ---- */
.page-hero{padding:clamp(3rem,7vw,5.5rem) 0 clamp(2rem,4vw,3rem)}
.page-hero h1{font-family:var(--font-display);font-weight:900;font-size:clamp(2.1rem,5.2vw,3.9rem);
  letter-spacing:-.03em;line-height:1.05;color:var(--charbon);max-width:18ch;margin:1.5rem 0}
.page-lead{font-size:clamp(1.02rem,1.4vw,1.18rem);color:var(--ink);max-width:60ch;line-height:1.7}
.hero-facts{display:grid;gap:1rem;margin-top:2.4rem;padding-top:2rem;border-top:1px solid var(--border-clair)}
@media(min-width:860px){.hero-facts{grid-template-columns:repeat(3,1fr);gap:1.8rem}}
.fact{display:flex;gap:.8rem;align-items:flex-start;color:var(--charbon);font-weight:500;
  font-size:.98rem;line-height:1.5;max-width:34ch}
.fact svg{width:20px;height:20px;color:var(--ambre);flex-shrink:0;margin-top:2px}

/* ---- Pourquoi travailler avec moi ---- */
.why-grid{display:grid;gap:1.3rem;margin-top:clamp(2.2rem,4.5vw,3.4rem)}
@media(min-width:700px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.why-grid{grid-template-columns:repeat(4,1fr)}}
.why{background:var(--blanc);border:1px solid var(--border-clair);border-radius:var(--r-card);
  padding:clamp(1.4rem,2.6vw,1.8rem);transition:transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease}
.why:hover{border-color:var(--charbon)}
.why-icon{width:40px;height:40px;border-radius:var(--r-tag);background:var(--ambre-pale);
  border:1px solid rgba(222,99,0,.35);color:var(--ambre);display:flex;align-items:center;
  justify-content:center;margin-bottom:1.2rem}
.why-icon svg{width:20px;height:20px}
.why h3{font-family:var(--font-display);font-weight:800;font-size:1.16rem;letter-spacing:-.015em;
  color:var(--charbon);margin-bottom:.6rem;line-height:1.2}
.why p{color:var(--ink);font-size:.96rem;line-height:1.6}

/* ---- Questions frequentes ----
   Accordeon natif <details>/<summary> : accessible au clavier et fonctionnel
   sans une ligne de JavaScript. */
.faq{margin-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--border-clair);max-width:78ch}
.faq details{border-bottom:1px solid var(--border-clair)}
.faq summary{cursor:pointer;list-style:none;padding:1.45rem 0;display:flex;justify-content:space-between;
  align-items:center;gap:1.4rem;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.04rem,1.7vw,1.22rem);letter-spacing:-.012em;line-height:1.3;color:var(--charbon)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq summary:hover{color:var(--ambre)}
.faq .chev{flex-shrink:0;width:30px;height:30px;border-radius:var(--r-tag);
  border:1px solid var(--border-clair);display:flex;align-items:center;justify-content:center;
  color:var(--ambre);transition:transform .3s var(--ease), border-color .2s ease}
.faq .chev svg{width:16px;height:16px}
.faq details[open] .chev{transform:rotate(180deg);border-color:var(--ambre)}
.faq .ans{padding:0 0 1.6rem;color:var(--ink);font-size:1rem;line-height:1.75;max-width:68ch}
.faq .ans p + p{margin-top:.9rem}

/* ---- Cartes de renvoi vers d'autres pages (remonte depuis service.css) ---- */
/* ---- Les autres services ---- */
.related{display:grid;gap:1.3rem;margin-top:clamp(2.2rem,4.5vw,3.2rem)}
@media(min-width:760px){.related{grid-template-columns:repeat(3,1fr)}}
.rcard{display:flex;flex-direction:column;gap:.7rem;background:var(--blanc);
  border:1px solid var(--border-clair);border-radius:var(--r-card);padding:clamp(1.3rem,2.5vw,1.7rem);
  transition:transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease}
.rcard:hover{border-color:var(--charbon)}
.rcard .rlbl{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:1px;
  text-transform:uppercase;color:var(--pierre);line-height:1}
.rcard h3{font-family:var(--font-display);font-weight:800;font-size:1.2rem;letter-spacing:-.015em;
  line-height:1.2;color:var(--charbon)}
.rcard p{color:var(--ink);font-size:.95rem;line-height:1.6;flex:1}
.rcard .rgo{display:inline-flex;align-items:center;gap:.5rem;margin-top:.4rem;font-weight:700;
  font-size:.92rem;color:var(--charbon)}
.rcard .rgo svg{width:17px;height:17px;color:var(--ambre);transition:transform .25s ease}
.rcard:hover .rgo svg{transform:translateX(4px)}

/* ============ FIL D'ARIANE ============
   Composant commun. Doit toujours etre double d'un balisage BreadcrumbList
   en JSON-LD : c'est ce que Google affiche dans ses resultats a la place de
   l'URL brute, et ca ameliore nettement le taux de clic. */
.breadcrumb{padding:1.1rem 0 0}
.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;list-style:none;margin:0;padding:0}
.breadcrumb li{display:flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:12px;
  font-weight:500;letter-spacing:.8px;text-transform:uppercase;color:var(--pierre);line-height:1.4}
.breadcrumb li + li::before{content:"";width:5px;height:5px;border-right:1.5px solid var(--ambre);
  border-bottom:1.5px solid var(--ambre);transform:rotate(-45deg);flex-shrink:0}
.breadcrumb a{color:var(--pierre);text-decoration:none;border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease}
.breadcrumb a:hover{color:var(--charbon);border-bottom-color:var(--ambre)}
.breadcrumb [aria-current="page"]{color:var(--charbon)}

/* ---- Carte article (remontee depuis blog.css) ----
   Utilisee par l'index du blog ET par le bloc « A lire ensuite » des articles.
   Elle etait dans blog.css, que les articles ne chargent pas : les images
   s'affichaient donc a leur taille naturelle et les fleches sans style. */
.blog-grid{display:grid;gap:clamp(1.4rem,2.8vw,2rem);margin-top:clamp(2.2rem,4.5vw,3.4rem);
  padding-bottom:clamp(3.5rem,7vw,6rem)}
@media(min-width:720px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.blog-grid{grid-template-columns:repeat(3,1fr)}}

.pcard{display:flex;flex-direction:column;background:var(--blanc);border:1px solid var(--border-clair);
  border-radius:var(--r-card);overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease}
.pcard:hover{border-color:var(--charbon)}
.pcard-img{aspect-ratio:16/10;overflow:hidden;background:var(--ambre-pale);border-bottom:1px solid var(--border-clair)}
.pcard-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease-out)}
.pcard:hover .pcard-img img{transform:scale(1.025)}
.pcard-in{display:flex;flex-direction:column;gap:.7rem;padding:clamp(1.2rem,2.4vw,1.6rem);flex:1}
.pcard-top{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;font-family:var(--font-mono);
  font-size:12px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--pierre);line-height:1}
.pcard-cat{color:var(--charbon);background:var(--ambre-pale);border:1px solid rgba(222,99,0,.45);
  padding:.4rem .65rem;border-radius:var(--r-pill)}
.pcard h2,.pcard .pcard-title{font-family:var(--font-display);font-weight:800;font-size:clamp(1.14rem,1.9vw,1.32rem);
  letter-spacing:-.018em;line-height:1.25;color:var(--charbon);flex:none}
.pcard p{color:var(--ink);font-size:.95rem;line-height:1.6;flex:1}
.pcard .pgo{display:inline-flex;align-items:center;gap:.5rem;margin-top:.3rem;font-weight:700;
  font-size:.92rem;color:var(--charbon)}
.pcard .pgo svg{width:17px;height:17px;color:var(--ambre);transition:transform .25s ease}
.pcard:hover .pgo svg{transform:translateX(4px)}

.foot-col a.foot-soc{display:flex;align-items:center;gap:6px}
.foot-soc svg{width:12px;height:12px;color:var(--ambre);transition:transform .25s var(--ease)}
.foot-soc:hover svg{transform:translate(2px,-2px)}