/* LE SOCLE — ce que les quinze pages hors accueil partagent vraiment :
   la palette, la remise à zéro, la typographie, les boutons et les liens.

   Ce fichier s'appelait « expertises-pages.css » alors que neuf des quinze
   pages qui le chargent ne parlent pas d'expertises. La page « Nos
   expertises » y avait même déposé sa propre mise en page, que les quatorze
   autres téléchargeaient pour rien : elle est sortie dans
   expertises-index.css. */

:root{--ivory:#f8f5ed;--ink:#101719;--petrol:#125469;--orange:#ff7526}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--ivory);color:var(--ink)}h1,h2,h3,p{margin:0}a{color:inherit}button{font:inherit;cursor:pointer}h1,h2{letter-spacing:-.06em;line-height:1.02}h1{font-size:clamp(46px,6vw,88px)}h2{font-size:clamp(36px,4.6vw,70px)}h3{font-size:30px;line-height:1.12;letter-spacing:-.035em}em{color:var(--orange);font-style:normal}p{line-height:1.65}main{overflow:clip}.ivory{background:var(--ivory)}.dark{background:var(--ink);color:var(--ivory)}.eyebrow{font-size:11px;letter-spacing:.13em;font-weight:700;margin-bottom:22px}.eyebrow a{text-decoration:none}.button{display:inline-flex;text-decoration:none;border:1px solid currentColor;border-radius:40px;padding:15px 24px;font-size:14px;align-items:center;justify-content:center;transition:background .25s,color .25s,transform .25s}.button:hover{background:var(--orange);border-color:var(--orange);color:var(--ink);transform:translateY(-3px)}.button.orange{background:var(--orange);border-color:var(--orange);color:var(--ink)}.text-link{display:inline-block;font-size:14px;font-weight:700;text-underline-offset:7px;text-decoration-thickness:1px}.text-link:hover{color:var(--orange)}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--orange);outline-offset:5px}.section-head{margin-bottom:65px}.closing-copy p:not(.eyebrow){max-width:520px;margin:30px 0}.phone{margin-left:25px;font-size:15px;text-decoration:none}.studio-heading p:not(.eyebrow){max-width:445px;font-size:17px;margin:30px 0;text-align:justify;hyphens:auto}.production-note p:not(.eyebrow){margin:30px 0;text-align:justify;hyphens:auto}.price-card .eyebrow{font-size:9px;margin-bottom:22px}.price-card>p:not(.eyebrow):not(.price){font-size:14px}.recurring p:not(.eyebrow){max-width:650px;margin-top:20px;font-size:15px}.recurring .button{flex-shrink:0}@media(min-width:901px){.recurring.recurring--price-grid p:not(.eyebrow){grid-column:3/4;max-width:none;margin-top:0}.recurring.recurring--price-grid .button{grid-column:4/5;justify-self:end;margin-top:0}}.related{padding:95px 7%;background:#132c33}.motion-ready .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s,transform .8s}.motion-ready .reveal.visible{opacity:1;transform:none}@keyframes signal{0%,100%{transform:rotate(-12deg) scale(.9)}50%{transform:rotate(15deg) scale(1.05)}}@keyframes sway{0%,100%{rotate:-4deg}50%{rotate:5deg}}@keyframes float{0%,100%{translate:0 -7px}50%{translate:0 8px}}@keyframes pulse{0%,100%{scale:1;opacity:1}50%{scale:.85;opacity:.45}}@keyframes panel-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@media(max-width:1100px){.hero-title{width:85%}.expert-signal{opacity:.3;right:0}.hero-bottom{gap:25px}.recurring .button{margin-top:25px}}@media(max-width:650px){h1{font-size:48px}h2{font-size:39px}.hero-title h1{font-size:48px}.domains,.studio-services{padding:70px 6%}.together{display:block}.join-mark{display:none}.phone{display:block;margin:25px 0 0}.related{padding:70px 6%}.section-head{margin-bottom:40px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.motion-ready .reveal{opacity:1;transform:none}}@media(min-width:901px){.domains,.together,.studio-services,.production-note,.related{min-height:100svh}}.request-dialog{border:0;border-radius:22px;background:var(--ivory);color:var(--ink);padding:42px;width:min(680px,calc(100% - 30px));max-height:90dvh;overflow:auto}.request-dialog::backdrop{background:#08181ccc;backdrop-filter:blur(9px)}.request-dialog h2{font-size:48px}.request-dialog .eyebrow{margin-bottom:12px}.request-close{position:absolute;right:18px;top:14px;border:0;background:none;font-size:32px;width:40px;height:40px;color:inherit}.request-intro{margin:18px 0}.request-form label{display:block;font-size:12px;font-weight:700}.request-fields{display:grid;grid-template-columns:1fr 1fr;gap:15px}.request-form input,.request-form select,.request-form textarea{display:block;width:100%;font:inherit;font-weight:400;font-size:15px;color:var(--ink);background:#fff9;border:1px solid #b5c0bd;border-radius:7px;padding:11px;margin:7px 0 15px}.request-form textarea{resize:vertical}.request-form input:focus,.request-form select:focus,.request-form textarea:focus{outline:2px solid var(--petrol);outline-offset:2px}.request-form small{font-weight:400}.request-help{font-size:11px;margin-top:12px;color:#516266}.request-result{border-top:1px solid #bbc5c0;margin-top:20px;padding-top:16px}.request-result p{font-size:13px;margin-bottom:14px}.request-phone{display:block;margin-top:22px;font-size:13px;text-underline-offset:4px}@media(max-width:650px){.domain-photo{height:260px}.photo-art{height:auto;aspect-ratio:1.22}.request-dialog{padding:30px 22px}.request-fields{grid-template-columns:1fr}.request-dialog h2{font-size:40px}}
/* Complementary services belong to the reading flow, before the shared contact. */
.related.ivory{background:var(--ivory);color:var(--ink);min-height:0;padding:20px 5.3% 70px}.related.ivory h2{font-size:clamp(32px,3vw,46px)}.related.ivory .related-links{margin-top:32px;gap:20px}.related.ivory .related-links a{border:1px solid #b7c3bd;border-radius:12px;padding:25px;font-size:23px;background:#eeede5;transition:background .3s,color .3s,transform .3s}.related.ivory .related-links a:hover{background:var(--petrol);color:var(--ivory);transform:translateY(-4px)}.related.ivory .related-links span{color:inherit;text-decoration:underline;text-underline-offset:5px;opacity:.8}@keyframes craft-line{0%,100%{stroke-dashoffset:0}50%{stroke-dashoffset:.4}}

/* ── Grammaire commune aux quatre pictos ── */
  @keyframes derive1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(28px,-20px) scale(1.14)}}
  @keyframes derive2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-24px,22px) scale(.9)}}
  @keyframes monte{0%{transform:translateY(14px);opacity:0}18%{opacity:.75}100%{transform:translateY(-42px);opacity:0}}
  @keyframes remplit{0%,12%{transform:scaleX(.2)}30%,70%{transform:scaleX(1)}88%,100%{transform:scaleX(.2)}}

/* ── Picto 01 · Audit & diagnostic ── */
  @keyframes flotte{0%,100%{transform:translate(0,0) rotate(var(--a,0deg))}
                    50%{transform:translate(var(--dx,0), var(--dy,-9px)) rotate(calc(var(--a,0deg) + var(--da,1.5deg)))}}
  @keyframes barre{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
  @keyframes balaie{
    0%   {transform:translate(-116px, 30px)}
    24%  {transform:translate(-38px, -34px)}
    50%  {transform:translate(52px, 16px)}
    76%  {transform:translate(120px, -26px)}
    100% {transform:translate(-116px, 30px)}
  }
  @keyframes respire{0%,100%{opacity:.14;transform:scale(1)}50%{opacity:.28;transform:scale(1.07)}}
  @keyframes reflet{0%,100%{transform:translate(-14px,10px);opacity:.35}50%{transform:translate(10px,-12px);opacity:.7}}
  @keyframes scanne{0%{transform:translateY(-44px);opacity:0}12%{opacity:.9}88%{opacity:.9}100%{transform:translateY(44px);opacity:0}}
  @keyframes trouve{0%,18%{stroke:#3c565e}
                    26%,42%{stroke:var(--orange)}
                    50%,100%{stroke:#3c565e}}
  @keyframes fond-trouve{0%,18%{fill:rgba(18,84,105,.3)}
                         26%,42%{fill:rgba(255,117,44,.14)}
                         50%,100%{fill:rgba(18,84,105,.3)}}
  @keyframes onde{0%,20%{r:6;opacity:0}
                  27%{opacity:.85}
                  46%,100%{r:46;opacity:0}}
  @keyframes alerte{0%,20%{opacity:0;transform:translateY(4px)}
                    28%,44%{opacity:1;transform:translateY(0)}
                    52%,100%{opacity:0;transform:translateY(4px)}}

/* ── Picto 02 · Positionnement & messages ── */
  @keyframes pulseAnneau{0%,100%{opacity:.2;transform:scale(.97)}50%{opacity:.45;transform:scale(1.03)}}
  @keyframes coeur{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.22);opacity:1}}
  @keyframes tourne{to{transform:rotate(360deg)}}

/* ── Picto 03 · Plan de communication ── */
  @keyframes avance{0%{transform:scaleX(0)}70%,100%{transform:scaleX(1)}}
  @keyframes allume{0%,14%{opacity:.25;transform:scale(.8)}24%,100%{opacity:1;transform:scale(1)}}
  @keyframes curseur{0%{transform:translateX(0)}70%,100%{transform:translateX(266px)}}
  @keyframes pousse{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}

/* ── Picto 04 · Pilotage & suivi ── */
  @keyframes corrige{0%{transform:rotate(-26deg)}18%{transform:rotate(14deg)}
                     38%{transform:rotate(-9deg)}58%{transform:rotate(5deg)}
                     78%{transform:rotate(-2deg)}100%{transform:rotate(-26deg)}}
  @keyframes arc1{to{transform:rotate(360deg)}}
  @keyframes arc2{to{transform:rotate(-360deg)}}
  @keyframes derape{0%,100%{transform:translate(0,0)}
                    30%{transform:translate(0,-24px)}
                    62%{transform:translate(0,6px)}}
  @keyframes clignote{0%,44%{opacity:.25}52%,66%{opacity:1}74%,100%{opacity:.25}}
@keyframes id-tache{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-6px,7px) scale(1.045)}}

/* Mise en page & PAO : une page qui se lit, un signet qui marque l'endroit */
@keyframes ed-lit{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes ed-respire{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes ed-signet{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* AIO finitions 2026-09-11 : cartes de fin de page (visuel + phrase). Classes propres, ne touche a rien d'existant. */
.related.ivory .related-links a .related-visual{display:block;width:calc(100% + 50px);margin:-25px -25px 20px;aspect-ratio:1.6;border-radius:11px 11px 0 0;background-image:var(--image,url(assets/expertises-reference.webp));background-size:var(--image-size,cover);background-position:var(--image-pos,center);background-repeat:no-repeat}
.related.ivory .related-links a .related-phrase{display:block;font-size:15px;line-height:1.45;color:#4b5a5e;margin-top:10px;font-weight:400}@media(max-width:680px){.related.ivory .related-links a .related-visual{aspect-ratio:1.9}}
/* AIO finitions 2026-09-11 (v3) — correctifs client sur studio-graphique.html : FAQ retiree (colonne .devis-info supprimee), le formulaire occupe seul une colonne centree en largeur de lecture, cases et ronds a cocher redessines dans la DA, question « supports » remplacee par une question de budget. Classes propres ; .interest-fieldset, .interest-option, .request-choice-group, .request-choice et .contact-form restent reutilises tels quels. */
.devis{padding:100px 5.3% 120px}
.devis-form-panel>p:not(.eyebrow){max-width:480px;margin-bottom:28px}
.devis-form-panel .eyebrow{color:#ffa56c}
.devis-form-panel .contact-form{margin-top:28px}
.contact-form .interest-option input,.contact-form .request-choice input{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin:0;flex-shrink:0;border:1.5px solid currentColor;background-color:transparent;background-repeat:no-repeat;background-position:center;background-size:62% 62%;cursor:pointer;transition:background-color .2s,border-color .2s;padding:0}
.contact-form .interest-option input{border-radius:6px}
.contact-form .request-choice input{border-radius:50%}
.contact-form .interest-option input:checked,.contact-form .request-choice input:checked{border-color:var(--ink);background-color:var(--ink)}
.contact-form .interest-option input:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.3l3.2 3.2L13 4.6' fill='none' stroke='%23f8f5ed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.contact-form .request-choice input:checked{background-image:radial-gradient(circle,#f8f5ed 36%,transparent 40%)}
.contact-form .interest-option:has(input:checked),.contact-form .request-choice label:has(input:checked){background:var(--orange);border-color:var(--orange);color:var(--ink)}
.contact-form .interest-option input:focus-visible,.contact-form .request-choice input:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* 2 · la pilule est le contrôle : la case native disparaît, mais l'input
       reste là pour le clavier et les lecteurs d'écran */
.contact-form .interest-option input,
.contact-form .request-choice-group input{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;appearance:none}
.contact-form .interest-option,
.contact-form .request-choice-group label{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:0;min-height:46px;padding:0 22px;border-radius:30px;font-size:14px;line-height:1.25;
  border:1px solid rgba(248,245,237,.3);background:rgba(248,245,237,.05);color:var(--ivory);
  cursor:pointer;transition:background .25s,border-color .25s,color .25s,transform .25s;
  text-align:center;width:auto}
.contact-form .interest-option:hover,
.contact-form .request-choice-group label:hover{
  border-color:var(--orange);transform:translateY(-2px)}
.contact-form .interest-option:has(input:checked),
.contact-form .request-choice-group label:has(input:checked){
  background:var(--orange);border-color:var(--orange);color:var(--ink);font-weight:700}
.contact-form .interest-option:has(input:focus-visible),
.contact-form .request-choice-group label:has(input:focus-visible){
  outline:2px solid var(--orange);outline-offset:3px}

/* 3 · les champs respirent et gardent une largeur de lecture */
/* Pas de grille ici : `.contact-fields` gère déjà ses deux colonnes. En
   superposer une seconde réduisait chaque champ au quart de la largeur. */
.devis .contact-form{display:flex;flex-direction:column;gap:26px;width:100%}
.devis .contact-form>*{width:100%;min-width:0}@media(max-width:820px){.devis .contact-form{grid-template-columns:1fr}}
.related a{text-decoration:none}
.related a .related-phrase{text-decoration:none}
/* Deux règles existantes gagnaient sur la mienne : `.related.ivory
   .related-links span` soulignait TOUS les span de la carte, et
   `.related.ivory .related-links a .related-phrase` imposait un gris fixe,
   illisible dès que la section passe sur fond bleu. On les surcharge au
   même niveau de spécificité. */
.related.ivory .related-links a span.related-phrase,
.related .related-links a span.related-phrase{
  color:inherit;opacity:.78;text-decoration:none;display:block}
/* L'état sélectionné, posé en dernier et sans ambiguïté : ma règle de repos
   écrasait l'état coché, et le texte ivoire sur orange donnait un contraste
   de 1 pour 1, illisible. L'anthracite donne 16,6. */
.devis .contact-form .interest-option:has(input:checked),
.devis .contact-form .request-choice-group label:has(input:checked),
.contact-form .interest-option:has(input:checked),
.contact-form .request-choice-group label:has(input:checked){
  background:var(--orange);border-color:var(--orange);color:var(--ink);font-weight:700}
/* Le libellé vit dans un <span> qui gardait sa propre couleur : colorer le
   label ne suffisait pas, le texte restait gris sur l'orange. On colore le
   contenu, au repos comme à l'état sélectionné. */
.contact-form .interest-option span,
.contact-form .request-choice-group label span{color:inherit}
.contact-form .interest-option:has(input:checked) span,
.contact-form .request-choice-group label:has(input:checked) span,
.devis .contact-form .interest-option:has(input:checked) span,
.devis .contact-form .request-choice-group label:has(input:checked) span{
  color:var(--ink)}

/* Restauration : ces règles ont été emportées par erreur avec le nettoyage
   des anciennes illustrations. La page /expertises s'en sert pour sa grille
   de cartes, et .domain-card .text-link::after est le calque qui rend la
   carte entière cliquable. */
.domain-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px 35px}/* Toute la carte renvoie vers son expertise : le lien couvre la carte,
   image comprise, au lieu de se limiter au libellé. */
.domain-card{scroll-margin-top:115px;min-width:0;position:relative;cursor:pointer}@media(max-width:650px){.hero-bottom p,.domain-copy>p:not(.eyebrow),.panel-copy p,.studio-heading p:not(.eyebrow){text-align:left}.domain-grid{grid-template-columns:1fr}}