/* Feuille de style partagée Bricolo Factory / Dynamo Square, d'après les mini chartes graphiques.
   Générée par _source/build.py : les valeurs __XXX__ sont remplacées par les couleurs de chaque marque.
   Principe du site actuel : un cadre de filets fins (#89A2B3), des grilles découpées par des traits,
   angles droits, titres en Oswald, texte en Poppins. Thème clair uniquement, comme le site actuel. */
:root{
  --navy:#051E2E; --trait:#89A2B3; --blanc:#ffffff;
  --accent:#2D1FD0; --accent-texte:#ffffff; --titre:#2D1FD0;
  --pale:#F1F3FD; --second:#A2BCEF;
  --autre:#FAAB09; --autre-texte:#051E2E;
  --texte:#051E2E; --texte-2:#3d5260;
  --oswald:"Oswald","Arial Narrow",Impact,sans-serif;
  --poppins:"Poppins","Segoe UI",Helvetica,Arial,sans-serif;
  --gouttiere:clamp(20px,3vw,40px);
  --cadre:1440px;
  --marge:clamp(0px,calc(9vw - 30px),130px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:400 17px/1.65 var(--poppins);color:var(--texte);background:var(--blanc)}
img{max-width:100%;height:auto}
a{color:var(--titre)}
a:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:#fff;padding:8px;z-index:10}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Le cadre : en-tête, contenu et pied de page alignés entre deux filets verticaux */
header.site,main,footer.site{width:calc(100% - 2 * var(--marge));max-width:var(--cadre);margin:0 auto;border-inline:1px solid var(--trait)}
@media (max-width:640px){:root{--marge:0px}}
main>section{border-bottom:1px solid var(--trait)}
.wrap{padding-inline:var(--gouttiere)}
section{padding-block:clamp(36px,3.5vw,48px)}

/* En-tête */
header.site{border-bottom:1px solid var(--trait);background:var(--blanc);position:sticky;top:0;z-index:5}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;min-height:96px;flex-wrap:wrap;padding-block:14px}
.logo{display:block;line-height:0}
.logo img{height:46px;width:auto}
nav.principal ul{list-style:none;display:flex;align-items:center;gap:4px clamp(12px,1.3vw,18px);margin:0;padding:0;flex-wrap:wrap}
nav.principal a{display:block;padding:6px 0;text-decoration:none;color:var(--navy);font:500 .92rem/1.2 var(--poppins);text-transform:uppercase;letter-spacing:0;border-bottom:2px solid transparent}
nav.principal a:hover,nav.principal a[aria-current]{color:var(--titre);border-bottom-color:var(--accent)}
nav.principal a.autre{border:1px solid var(--autre);background:var(--autre);color:var(--autre-texte);padding:6px 12px;font-size:.74rem;line-height:1.2;letter-spacing:.07em;text-align:center}
nav.principal a.autre:hover{filter:brightness(.92)}
/* Transmission : petit cartouche posé au-dessus du bouton vers l'autre site */
nav.principal li.boutons{display:flex;flex-direction:column;align-items:stretch;gap:6px}
nav.principal a.cartouche{border:1px solid #FF6423;padding:6px 12px;font-size:.74rem;line-height:1.2;letter-spacing:.07em;text-align:center;color:var(--navy)}
nav.principal a.cartouche:hover{background:#FF6423;color:var(--navy);border-color:#FF6423}
/* Points de couleur entre les rubriques, comme sur le site Double View */
nav.principal li{display:flex;align-items:center}
nav.principal li+li:not(.contact):not(.boutons):not(:has(>a.autre))::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);margin-right:clamp(12px,1.3vw,18px)}
/* Contact : picto + texte à la couleur du logo, détaché du menu par un filet vertical */
nav.principal li.contact{border-left:1px solid var(--trait);padding-left:clamp(16px,1.8vw,26px);margin-left:clamp(4px,.7vw,10px)}
nav.principal li.contact a{display:flex;align-items:center;gap:7px;color:var(--navy)}
nav.principal li.contact svg{color:var(--accent)}
body.ds nav.principal li.contact svg{color:#FAAB09}
body.ht nav.principal li.contact svg{color:#FF6423}
@media (max-width:860px){nav.principal li.contact{border-left:0;padding-left:0;margin-left:0} nav.principal li+li::before{display:none!important}}
@media (max-width:860px){header.site{position:static} nav.principal ul{gap:4px 20px} nav.principal a{font-size:.9rem}}

/* Titres */
h1,h2{font-family:var(--oswald);font-weight:700;line-height:1.08;letter-spacing:-.005em;text-wrap:balance}
h1{font-size:clamp(2.1rem,4.4vw,3.6rem);margin:0 0 24px}
h2{font-size:clamp(1.55rem,2.4vw,2.1rem);margin:0 0 28px;color:var(--navy)}
h3{font:700 1.3rem/1.25 var(--poppins);margin:0 0 12px;color:var(--navy)}
.eyebrow{font:600 .78rem/1.4 var(--poppins);text-transform:uppercase;letter-spacing:.14em;color:var(--titre);margin:0 0 18px}
.lead{color:var(--texte-2);max-width:68ch;font-size:1.08rem}
mark{background:var(--accent);color:var(--accent-texte);padding:0 .14em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* Hero d'accueil : fond navy, grand monogramme en filigrane, mot surligné */
.hero.accueil{position:relative;overflow:hidden;background:var(--navy);color:var(--blanc);padding-block:clamp(40px,5vw,72px)}
.hero.accueil .filigrane{position:absolute;right:4%;bottom:-6%;width:min(38vw,520px);height:auto;opacity:.13;pointer-events:none}
.hero.accueil .wrap{position:relative}
.hero.accueil h1{color:var(--blanc);max-width:15ch;line-height:1.22}
.hero.accueil .eyebrow{color:var(--second)}
.hero.accueil .chapo{font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:58ch;margin:0 0 36px;color:#e6edf3}
.actions{display:flex;flex-wrap:wrap;gap:14px}
.actions.egales{display:inline-grid;grid-auto-columns:1fr;grid-auto-flow:column;gap:14px}
.actions.egales .bouton{text-align:center;align-self:stretch;justify-self:stretch;white-space:nowrap;padding-inline:clamp(18px,2vw,30px)}
@media (max-width:600px){.actions.egales{grid-auto-flow:row;display:grid}}
.plan{margin-top:24px;height:380px;border:1px solid var(--trait);background:#EEF1F4 linear-gradient(135deg,rgba(5,30,46,.04) 25%,transparent 25%,transparent 50%,rgba(5,30,46,.04) 50%,rgba(5,30,46,.04) 75%,transparent 75%) 0 0/28px 28px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}
.plan .bouton{align-self:center}
.plan p{margin:0;font-size:.85rem;color:var(--texte-2,#5a6b78)}
.plan.ouvert{display:block;background:none}
.plan iframe{width:100%;height:100%;border:0;display:block}
@media (max-width:600px){.plan{height:300px}}
.fenetre-pdf{width:min(820px,94vw);height:90vh;padding:0;border:0;border-radius:6px;overflow:hidden;box-shadow:0 20px 60px rgba(5,30,46,.35)}
.fenetre-pdf::backdrop{background:rgba(5,30,46,.6)}
.fenetre-pdf[open]{display:flex;flex-direction:column}
.fenetre-pdf .barre{display:flex;align-items:center;gap:16px;padding:10px 14px 10px 20px;background:var(--navy);color:#fff;font-weight:600}
.fenetre-pdf .barre span{flex:1}
.fenetre-pdf .ouvrir{color:#fff;font-size:.9rem;font-weight:500}
.fenetre-pdf .fermer{background:none;border:0;color:#fff;font-size:2rem;line-height:1;cursor:pointer;padding:0 6px}
.fenetre-pdf iframe{flex:1;width:100%;border:0;background:#f3f4f6}

/* Hero des pages intérieures : panneau titre pâle | texte, séparés par un trait */
.hero.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);padding:0}
.hero.split .panneau{background:var(--pale);padding:clamp(26px,3vw,44px) var(--gouttiere);border-right:1px solid var(--trait)}
.hero.split .panneau h1{color:var(--titre);font-size:clamp(1.7rem,2.6vw,2.4rem);line-height:1.15;margin:0}
/* Le texte de droite démarre à la hauteur du titre de gauche (padding du panneau + hauteur de l'eyebrow et sa marge) */
.hero.split .texte{padding:calc(clamp(26px,3vw,44px) + 1.092rem + 18px) clamp(16px,5vw,80px) clamp(26px,3vw,44px);display:flex;flex-direction:column;justify-content:flex-start;gap:20px}
.hero.split .chapo{font-size:1.15rem;margin:0;max-width:56ch}
@media (max-width:760px){.hero.split{grid-template-columns:1fr}.hero.split .panneau{border-right:0;border-bottom:1px solid var(--trait)}}

/* Boutons : angles droits */
.bouton{display:inline-block;background:var(--accent);color:var(--accent-texte);padding:15px 30px;text-decoration:none;font:500 1.05rem/1.2 var(--poppins);border:1px solid var(--accent);align-self:flex-start}
.bouton:hover{filter:brightness(1.08)}
.bouton.secondaire{background:var(--blanc);color:var(--titre);border-color:var(--titre)}
h2.ht{color:#FF6423}
.tete-transmission{display:flex;align-items:center;gap:18px;margin:0 0 14px}
.tete-transmission h2{margin:0}
.picto-transmission{width:64px;height:64px;flex:none;color:var(--accent)}
body.ds .picto-transmission{color:var(--navy)}
@media (max-width:600px){.picto-transmission{width:48px;height:48px}}
.bouton.ht{background:#FF6423;border-color:#FF6423;color:var(--navy)}
.bouton.ht:hover{filter:brightness(.92)}
.hero.accueil .bouton{background:var(--blanc);color:var(--titre);border-color:var(--blanc)}
body.ds .hero.accueil .bouton{background:var(--accent);color:var(--navy);border-color:var(--accent)}
.hero.accueil .bouton.clair,body.ds .hero.accueil .bouton.clair{background:transparent;color:var(--blanc);border-color:rgba(255,255,255,.6)}

/* Grilles découpées par des traits, qui vont d'un bord à l'autre du cadre */
.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:1px;background:var(--trait);
  border-block:1px solid var(--trait);margin-inline:calc(-1 * var(--gouttiere));margin-block:8px}
.carte{background:var(--blanc);padding:28px clamp(20px,3vw,48px);min-width:0}
.carte p{margin:0;color:var(--texte-2)}
.carte address{font-style:normal;color:var(--texte-2)}
.picto{width:40px;height:40px;color:var(--titre);display:block;margin-bottom:14px}
body.ds .picto{color:#c98500}
section:has(> .wrap > .grille:last-child){padding-bottom:0}
section:has(> .wrap > .grille:last-child) .grille{border-bottom:0;margin-bottom:0}

/* Chiffres clés */
.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:1px;background:var(--trait);border-block:1px solid var(--trait);margin-inline:calc(-1 * var(--gouttiere))}
.chiffres>div{background:var(--pale);padding:36px 24px;text-align:center;color:var(--texte-2)}
.chiffres strong{display:block;font:700 clamp(2.4rem,4vw,3.4rem)/1.1 var(--oswald);color:var(--titre)}
section.alt{background:var(--blanc)}
section.alt:has(.chiffres){padding-bottom:0}
section.alt:has(.chiffres) .chiffres{border-bottom:0}

/* Encadré « En bref », pensé pour être cité par les moteurs IA */
.resume{background:var(--pale);border-left:4px solid var(--accent);padding:22px 26px;margin:0 0 48px}
.resume p{margin:0}

/* Logos clients */
.logos{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.logos li{border:1px solid var(--trait);padding:8px 16px;font-size:.95rem}

/* FAQ */
.faq details{border-bottom:1px solid var(--trait);padding:20px 0}
.faq details:first-of-type{border-top:1px solid var(--trait)}
.faq summary{font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:500 1.5rem/1 var(--oswald);color:var(--titre)}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--texte-2);margin:14px 0 0;max-width:75ch}

/* Bandeau vers le site miroir, aux couleurs de l'autre marque */
.pont{padding-block:34px;background:var(--autre);color:var(--autre-texte)}
.pont .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px 32px;flex-wrap:wrap}
.pont p{margin:0;font-size:1.05rem}
.pont strong{font:700 1.4rem/1.2 var(--oswald);margin-right:6px}
.bouton-autre{display:inline-block;background:var(--autre-texte);color:var(--autre);padding:14px 26px;text-decoration:none;font-weight:600}

/* Pied de page navy en colonnes séparées par des filets */
footer.site{background:var(--navy);color:var(--blanc);border-color:var(--navy)}
footer.site a{color:var(--blanc);text-decoration:none}
footer.site a:hover{text-decoration:underline}
.colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.colonnes>div{padding:44px clamp(20px,3vw,48px) 40px;font-size:.92rem;border-right:1px solid rgba(255,255,255,.28);min-width:0}
.colonnes>div:first-child{padding-left:var(--gouttiere)}
.colonnes>div:last-child{border-right:0}
.colonnes h2{font:600 1.1rem/1.2 var(--poppins);color:var(--blanc);margin:0 0 16px}
.colonnes h2.petit{font-size:1rem;margin-top:22px}
.colonnes ul{list-style:none;margin:0;padding:0;line-height:1.7}
.colonnes p,.colonnes address{font-style:normal;margin:0;line-height:1.6;overflow-wrap:break-word}
.logo-pied{height:34px;width:auto;margin-bottom:16px}
.copyright{border-top:1px solid rgba(255,255,255,.4);padding:22px var(--gouttiere);font-size:.85rem}

/* ---------------------------------------------------------------- GEO : traduction des cartes GEO */
/* Deux colonnes : message à gauche, conversation type à droite */
.duo{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
@media (max-width:900px){.duo{grid-template-columns:1fr}}
.hero.accueil h1{max-width:22ch;font-size:clamp(2rem,3.7vw,3.2rem)}

/* La conversation avec l'assistant IA */
.demo{margin:0;background:#0b2a3e;border:1px solid rgba(255,255,255,.18);padding:26px;display:grid;gap:14px;color:var(--blanc)}
.demo figcaption{font:600 .74rem/1.3 var(--poppins);text-transform:uppercase;letter-spacing:.16em;color:var(--second);text-align:center}
.bulle{padding:16px 18px;font-size:.98rem;line-height:1.55}
.bulle span{display:block;font:700 .7rem/1.3 var(--poppins);text-transform:uppercase;letter-spacing:.12em;margin-bottom:6px;opacity:.75}
.bulle.question{background:#3a4f5f;margin-left:14%}
.bulle.reponse{background:var(--blanc);color:var(--navy);margin-right:6%}
.bulle.reponse mark{padding:0 .3em}
.demo .moteurs{margin:0;text-align:center;font-size:.78rem;color:#b9c6d0}
.demo.clair{background:var(--navy)}

/* Les quatre leviers : grille découpée par des traits */
.leviers{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1px;background:var(--trait);
  border-block:1px solid var(--trait);margin:8px calc(-1 * var(--gouttiere)) 0}
.leviers>li{background:var(--blanc);padding:40px clamp(20px,3vw,44px);min-width:0}
.leviers .tete{display:flex;gap:16px;align-items:flex-start;margin-bottom:22px}
.leviers .tete p{margin:0;color:var(--texte-2);font-size:.95rem}
.leviers h3{margin:2px 0 4px;color:var(--titre)}
.num{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;background:var(--accent);color:var(--accent-texte);font:700 1.4rem/1 var(--oswald)}
.leviers ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.leviers ul li{background:var(--pale);padding:12px 16px;font-size:.95rem;line-height:1.5;border-left:3px solid var(--second)}
.leviers b{font-weight:600;color:var(--navy)}
section:has(> .wrap > .leviers:last-child){padding-bottom:0}
section:has(> .wrap > .leviers:last-child) .leviers{border-bottom:0}

/* Comment on avance ensemble : trois étapes et un appel */
.methode ol{list-style:none;padding:0;margin:0 0 32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:24px 40px}
.methode ol li{display:flex;gap:16px;align-items:flex-start}
.methode ol li h3{margin:4px 0 6px}
.methode ol li p{margin:0;color:var(--texte-2)}
.methode .appel{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--trait);padding-top:28px}
.methode .appel p{margin:0;font:700 clamp(1.4rem,2.4vw,1.9rem)/1.2 var(--oswald)}


/* Triptyque d'accueil : trois portes d'entrée de même poids */
section.portes{padding-block:0}
.triptyque{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--trait);border-block:1px solid var(--trait);margin-inline:calc(-1 * var(--gouttiere))}
.porte{background:var(--blanc);padding:clamp(28px,3.5vw,48px) clamp(20px,3vw,40px);display:flex;flex-direction:column;gap:16px}
.porte:nth-child(2){background:var(--pale)}
.porte h2{margin:0;font-size:clamp(1.4rem,2.2vw,1.9rem)}
.porte ul{margin:0;padding:0;list-style:none;flex:1}
.porte li{padding:10px 0;border-bottom:1px solid var(--trait)}
.porte li:last-child{border-bottom:0}
.porte .bouton{align-self:flex-start}
@media (max-width:860px){.triptyque{grid-template-columns:1fr}}

/* Constellation : produit au centre, points de contact, médias (tableau sur mobile) */
.schema{margin:8px auto 0;max-width:1040px}
.constellation{display:block;width:100%;height:auto;font-family:var(--poppins)}
.constellation .lien-media{stroke:#d5dde3;stroke-width:1.5}
.constellation .lien-centre{stroke:var(--accent);stroke-width:2}
.constellation .centre{fill:var(--accent)}
.constellation .centre-1{fill:var(--accent-texte);font:700 23px var(--oswald)}
.constellation .centre-2{fill:var(--accent-texte);font-size:18px}
.constellation .point{fill:var(--blanc);stroke:var(--accent);stroke-width:3}
.constellation .nom-point{fill:var(--texte);font-size:18px;font-weight:600;paint-order:stroke;stroke:#fff;stroke-width:7px;stroke-linejoin:round}
.constellation .media{fill:var(--second)}
.constellation .nb{fill:var(--navy);font:700 22px var(--oswald)}
.constellation .nom-media{fill:var(--titre);font:700 24px var(--oswald);letter-spacing:.02em}
.constellation .ex{fill:var(--texte-2);font-size:17px}
.matrice{display:none;width:100%;border-collapse:collapse;font-size:.9rem}
.matrice caption{text-align:left;font-weight:600;margin-bottom:12px}
.matrice th,.matrice td{border:1px solid var(--trait);padding:8px 6px;text-align:center}
.matrice tbody th{text-align:left;font-weight:600}
.matrice thead th{font:700 .8rem var(--oswald);text-transform:uppercase;color:var(--titre)}
.matrice td{color:var(--accent);font-size:1.1rem}
body.ds .matrice td{color:var(--navy)}
@media (max-width:760px){.constellation{display:none}.matrice{display:table}}
/* Bandeau d'accueil clair avec photo à droite (quand une photo est choisie) */
.hero.accueil.photo{background:var(--blanc);color:var(--navy)}
.hero.accueil.photo h1{color:var(--navy)}
.hero.accueil.photo .chapo{color:var(--texte-2)}
.hero.accueil.photo .eyebrow{color:var(--accent)}
body.ds .hero.accueil.photo .eyebrow{color:#B87A00}
.hero.accueil.photo .bouton{background:var(--accent);color:var(--blanc);border-color:var(--accent)}
body.ds .hero.accueil.photo .bouton{color:var(--navy)}
.hero.accueil.photo .bouton.clair,body.ds .hero.accueil.photo .bouton.clair{background:transparent;color:var(--navy);border-color:var(--navy)}
.hero.accueil .photo-fond{position:absolute;top:0;right:0;width:50%;height:100%;object-fit:cover;border-left:1px solid var(--trait)}
.hero.accueil .photo-fond.miroir{transform:scaleX(-1)}
@media (min-width:901px){.hero.accueil.photo .duo{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}
.hero.accueil.photo .demo{position:relative;z-index:1;align-self:end;justify-self:start;max-width:400px;padding:20px;gap:10px;font-size:.92em}
@media (max-width:900px){
 .hero.accueil.photo{padding-top:0}
 .hero.accueil .photo-fond{position:static;display:block;width:100%;max-width:none;height:260px;margin:0 0 32px;border-left:0;border-bottom:1px solid var(--trait)}
 .hero.accueil.photo .demo{transform:none;max-width:none}
}
/* Photos dans les cases vides de la grille des leviers */
.leviers.avec-photos{grid-template-columns:repeat(3,minmax(0,1fr))}
.leviers>li.photo{padding:0;position:relative;min-height:300px}
.leviers>li.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.leviers.avec-photos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.leviers.avec-photos{grid-template-columns:1fr}.leviers>li.photo{display:none}}
@media (min-width:901px){.hero.accueil.photo .duo>div:first-child{padding-right:clamp(8px,1.5vw,24px)}}
/* Bandeau photo : le bas de l'encadré IA s'aligne sur le bas des boutons */
@media (min-width:901px){.hero.accueil.photo .duo{align-items:end}}
/* Boutons du bandeau d'accueil de même largeur, côte à côte ou empilés */
.hero.accueil .actions{display:inline-grid;grid-auto-columns:1fr;grid-auto-flow:column;gap:14px}
.hero.accueil .actions .bouton{text-align:center;align-self:stretch;white-space:nowrap;padding-inline:clamp(18px,2vw,30px)}
@media (max-width:1380px){.hero.accueil .actions{grid-auto-flow:row}}
.wrap>.resume:last-child{margin-bottom:0}

/* Titres des leviers sur deux lignes, typo un peu réduite */
.leviers .tete h3{font-size:1.18rem}
.leviers .ligne{display:block}
@media (min-width:1100px){.leviers .ligne{white-space:nowrap}}
/* Pages GEO par cible : questions posées aux IA et listes de points */
.questions,.points{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:68ch}
.questions li{background:var(--pale);padding:14px 18px;border-left:3px solid var(--accent);font-weight:500}
.points li{padding:10px 0 10px 28px;border-bottom:1px solid var(--trait);position:relative}
.points li:last-child{border-bottom:0}
.points li::before{content:"";position:absolute;left:0;top:19px;width:12px;height:12px;background:var(--accent)}
.points.ht li::before{background:#FF6423}
.hero.split .resume{margin:0}

/* Grilles de cartes : 3 colonnes sur ordinateur, 2 ou 3 sur tablette ; une photo libre comble les cases grises */
@media (min-width:901px){.grille.avec-photo{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:641px) and (max-width:900px){.grille.avec-photo{grid-template-columns:repeat(2,minmax(0,1fr))}.grille.n0{grid-template-columns:repeat(3,minmax(0,1fr))}}
.case-photo{position:relative;min-height:220px;display:none;background:var(--pale)}
.case-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (min-width:901px){.case-photo.d1{display:block}.case-photo.d2{display:block;grid-column:span 2}}
@media (min-width:641px) and (max-width:900px){.case-photo.t1{display:block}}
.chiffres{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:700px){.chiffres{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:901px){.grille.n0{grid-template-columns:repeat(3,minmax(0,1fr))}}
.carte .lien-cas{display:inline-block;margin-top:14px;font-weight:600;color:var(--accent);text-decoration:none;border-bottom:2px solid currentColor}
.carte .lien-cas:hover{color:var(--titre)}
body.ds .carte .lien-cas{color:var(--navy);border-bottom-color:#FAAB09}
body.ds .carte .lien-cas:hover{color:var(--navy);background:#FFF1D2}
/* Pages réalisation : texte à gauche, vidéo ou image à droite */
.etude{display:grid;gap:40px;align-items:start}
@media (min-width:901px){.etude{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}}
.etude h2{margin-top:0}
.etude h2+p,.etude h2+ul{margin-bottom:28px}
.media{margin:0;border:1px solid var(--trait);background:var(--pale)}
.media video,.media img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#051E2E}
.media figcaption{padding:10px 14px;font-size:.85rem;color:var(--texte-2)}
.media .voir-video{display:inline-block;margin-right:10px;padding:6px 12px;background:var(--accent);color:var(--accent-texte,#fff);font-weight:600;text-decoration:none}
body.ds .media .voir-video{color:#051E2E}
/* Réalisations : vignette cliquable qui lance la vidéo, photos du projet, chiffres clés */
.medias{display:flex;flex-wrap:wrap;gap:16px;align-content:start}
.medias>.media{flex:1 1 100%}
.medias>.media.galerie{flex:0 1 auto;border:0;background:none}
.media.galerie img{aspect-ratio:auto;width:auto;max-width:100%;max-height:420px;object-fit:contain;background:none}
.media .vignette{position:relative;display:block}
.media .vignette img{transition:filter .2s}
.media .vignette:hover img,.media .vignette:focus-visible img{filter:brightness(.8)}
.media .lecture{position:absolute;inset:50% auto auto 50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:var(--accent);box-shadow:0 4px 18px rgba(0,0,0,.35)}
.media .lecture::after{content:"";position:absolute;left:30px;top:22px;border-style:solid;border-width:16px 0 16px 26px;border-color:transparent transparent transparent var(--accent-texte,#fff)}
body.ds .media .lecture::after{border-left-color:#051E2E}
.chiffres.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:700px){.chiffres.n3{grid-template-columns:repeat(3,minmax(0,1fr))}.chiffres.n3>div{padding:24px 8px}}
.hero+section.alt:has(.chiffres){padding-top:0}.hero+section.alt:has(.chiffres) .chiffres{border-top:0}
/* Page Clients : photo à la place du texte d'introduction */
.hero.split .texte:has(.hero-photo){padding:0;display:block}
.hero-photo{margin:0;height:100%;min-height:260px}
.hero-photo img{display:block;width:100%;height:100%;object-fit:cover}
/* La hauteur du bandeau suit le texte de gauche : la photo remplit la colonne sans l'agrandir */
.hero.split .texte:has(.hero-photo){position:relative;min-height:240px}
.hero.split .hero-photo{position:absolute;inset:0;min-height:0}
body.bf .hero-photo img{object-position:center 22%}
/* Logos des clients sur les cartes et en tête des pages réalisation */
.carte .logo-client{display:block;height:56px;width:auto;max-width:160px;object-fit:contain;object-position:left center;margin-bottom:18px}
.logo-client.grand{display:block;height:72px;width:auto;max-width:200px;object-fit:contain;object-position:left center;margin-bottom:22px}
.carte .logo-client.vide{height:56px}
.carte .logo-client.haut{height:84px;margin-top:-14px;margin-bottom:4px}.logo-client.grand.haut{height:100px}
/* Bloc « 3 marques, 3 expertises » */
.marques .carte.marque{display:block;text-decoration:none;color:inherit}
.marques .carte.marque img{height:44px;width:auto;max-width:100%;margin-bottom:18px}
.marques .carte.marque:hover{border-color:var(--accent)}
/* Nom du client masqué quand son logo est affiché (gardé pour les lecteurs d'écran et les moteurs) */
.masque{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Nuage de logos : tous visibles, chacun flotte doucement sur place ; immobile si l'utilisateur limite les animations */
.nuage{list-style:none;margin:0 auto;padding:8px 0;max-width:1000px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 20px}
.nuage li{display:flex;align-items:center;justify-content:center;height:calc(50px*var(--k,1));animation:flotte var(--d,6s) ease-in-out var(--r,0s) infinite alternate}
.nuage li img{max-height:calc(38px*var(--k,1));max-width:calc(115px*var(--k,1));width:auto;height:auto;object-fit:contain;animation:respire var(--p,6s) ease-in-out var(--q,0s) infinite alternate;transition:transform .2s}
.nuage li img[src$=".svg"]{height:calc(30px*var(--k,1))}
.nuage li:hover img{animation-play-state:paused;transform:scale(1.3)}
.nuage li.nom{font:700 calc(1.05rem*var(--k,1))/1.1 var(--oswald);text-transform:uppercase;letter-spacing:.03em;color:var(--navy);animation:flotte var(--d,6s) ease-in-out var(--r,0s) infinite alternate,respire var(--p,6s) ease-in-out var(--q,0s) infinite alternate}
.nuage li.nom:hover{color:var(--accent)}
@keyframes respire{0%{transform:scale(.78)}50%{transform:scale(1)}100%{transform:scale(1.28)}}
@keyframes flotte{0%{transform:translate(0,0)}33%{transform:translate(4px,-7px)}66%{transform:translate(-5px,3px)}100%{transform:translate(3px,6px)}}
@media (prefers-reduced-motion:reduce){.nuage li,.nuage li img{animation:none}}
/* Bloc Transmission (page Savoir-faire) : intro, 3 étapes numérotées, exemple M2E */
.transmission .eyebrow{color:var(--accent)}
body.ds .transmission .eyebrow{color:var(--navy)}
body.ht .transmission .eyebrow{color:#C2541A}
.transmission .lead{max-width:62ch}
.transmission .etapes{list-style:none;padding:0;margin:32px 0;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--trait)}
.transmission .etapes li{padding:24px 26px;border-left:1px solid var(--trait)}
.transmission .etapes li:first-child{border-left:0}
.transmission .etapes span{display:block;font:700 2rem/1 var(--oswald);color:var(--accent);margin-bottom:12px}
body.ht .transmission .etapes span{color:#FF6423}
.transmission .etapes h3{margin:0 0 6px}
.transmission .etapes p{margin:0}
.transmission .exemple{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--trait);background:var(--pale)}
body.ht .transmission .exemple{background:#FFF4EE}
.transmission .exemple img{width:100%;height:100%;min-height:280px;object-fit:cover;display:block}
.transmission .exemple .texte{padding:30px 34px;display:flex;flex-direction:column;justify-content:center;gap:4px}
.transmission .mini-chiffres{display:flex;gap:36px;margin:6px 0 10px}
.transmission .mini-chiffres strong{display:block;font:700 2.6rem/1 var(--oswald);color:var(--navy)}
.transmission .actions{display:grid;gap:12px;margin-top:14px;max-width:290px}
.transmission .actions .bouton{text-align:center}
@media (max-width:760px){.transmission .etapes,.transmission .exemple{grid-template-columns:1fr}.transmission .etapes li{border-left:0;border-top:1px solid var(--trait)}.transmission .etapes li:first-child{border-top:0}.transmission .exemple img{min-height:220px}}
/* Bloc Influence : réutilise les étapes numérotées du bloc Transmission, en 4 colonnes et aux couleurs du site */
.influence .lead{max-width:62ch}
.tete-influence{display:flex;align-items:center;gap:24px}
.tete-influence h2{margin-bottom:0}
.picto-influence{position:relative;flex:none;width:104px;height:104px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(5,30,46,.14)}
.picto-influence .coeur{position:absolute;top:10px;right:6px;width:34px;height:34px;border-radius:50%;background:#fff;color:#E5484D;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(5,30,46,.18);animation:bat 2.4s ease-in-out infinite}
body.ds .picto-influence{color:var(--navy)}
@keyframes bat{0%,100%{transform:scale(1)}15%{transform:scale(1.18)}30%{transform:scale(1)}}
@media (max-width:600px){.tete-influence{gap:16px}.picto-influence{width:72px;height:72px}.picto-influence>svg{width:44px;height:44px}.picto-influence .coeur{width:26px;height:26px;top:4px;right:0}}
@media (prefers-reduced-motion:reduce){.picto-influence .coeur{animation:none}}
.influence .etapes{list-style:none;padding:0;margin:32px 0 0;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--trait);background:var(--blanc)}
.influence .etapes li{padding:24px 24px;border-left:1px solid var(--trait)}
.influence .etapes li:first-child{border-left:0}
.influence .etapes span{display:block;font:700 2rem/1 var(--oswald);color:var(--accent);margin-bottom:12px}
.influence .etapes h3{margin:0 0 6px}
.influence .etapes p{margin:0}
@media (max-width:960px){.influence .etapes{grid-template-columns:1fr 1fr}.influence .etapes li:nth-child(3){border-left:0}.influence .etapes li:nth-child(n+3){border-top:1px solid var(--trait)}}
@media (max-width:600px){.influence .etapes{grid-template-columns:1fr}.influence .etapes li{border-left:0}.influence .etapes li+li{border-top:1px solid var(--trait)}}

/* Retouches faites directement sur l'aperçu le 2026-10-21, reprises dans la source */
/* Parallaxe : fond fixe au scroll */
.hero.split.parallaxe{background-size:cover;background-position:center;background-attachment:fixed;position:relative}
.hero.split.parallaxe .panneau{background:rgba(241,243,253,.92)}
body.ds .hero.split.parallaxe .panneau{background:rgba(255,247,227,.92)}
.hero.split.parallaxe .texte{background:rgba(255,255,255,.92)}
@supports (-webkit-overflow-scrolling:touch){.hero.split.parallaxe{background-attachment:scroll}}
/* Grille : cartes à gauche, photo à droite */
@media (min-width:901px){.grille.n1.avec-photo{grid-template-columns:1fr 1fr}
.grille.n1.avec-photo .case-photo.d2{grid-column:2;grid-row:1/span 4}}
/* Texte lead pleine largeur */
.lead.pleine{max-width:none}
/* Bloc transmission sur fond pâle, filet de couleur en haut */
.transmission.fond{background:var(--pale);border-top:4px solid var(--accent);padding-block:clamp(36px,3.5vw,48px)}
.transmission.fond .exemple{background:#fff}

/* Menu déroulant « Expertise », ouvert au survol ou au clavier (2026-10-21) */
nav.principal li.deroulant{position:relative}
nav.principal li.deroulant>a::after{content:"";display:inline-block;width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);margin-left:8px}
nav.principal .sous-menu{position:absolute;top:100%;left:-18px;z-index:20;display:none;flex-direction:column;align-items:stretch;gap:0;min-width:250px;margin:12px 0 0;padding:0;background:var(--blanc);border:1px solid var(--trait);border-top:3px solid var(--accent);box-shadow:0 12px 28px rgba(5,30,46,.12);flex-wrap:nowrap}
nav.principal .sous-menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
body.ds nav.principal .sous-menu{border-top-color:#FAAB09}
nav.principal li.deroulant:hover>.sous-menu,nav.principal li.deroulant:focus-within>.sous-menu{display:flex}
nav.principal .sous-menu li{display:block}
nav.principal .sous-menu li::before{display:none!important}
nav.principal .sous-menu a{display:flex;align-items:center;gap:14px;padding:12px 20px;border-bottom:0;white-space:nowrap}
nav.principal .sous-menu li+li a{border-top:1px solid var(--trait)}
nav.principal .sous-menu a:hover,nav.principal .sous-menu a[aria-current]{background:var(--pale);border-bottom:0}
nav.principal .sous-menu .picto{width:26px;height:26px;margin:0;flex:none;color:var(--accent)}
body.ds nav.principal .sous-menu .picto{color:#FAAB09}
@media (max-width:860px){nav.principal li.deroulant>a::after{display:none} nav.principal li.deroulant:hover>.sous-menu,nav.principal li.deroulant:focus-within>.sous-menu{display:none}}

/* Page Contenu : rangées alternées, bande Audio, frise de méthode (2026-10-21) */
.formats .format{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--trait);margin-inline:calc(-1 * var(--gouttiere))}
.formats h2+.format{margin-top:0}
.formats .format figure{margin:0;position:relative;min-height:clamp(200px,19vw,270px);overflow:hidden}
.formats{padding-bottom:0}.bande-audio+.formats{padding-top:0}.bande-audio+.formats .format{border-top:0}
.formats .format figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.formats .format .texte{padding:clamp(18px,2.4vw,32px) clamp(24px,3.5vw,48px);display:flex;flex-direction:column;justify-content:center}
.formats .format.inverse figure{order:2}
.formats .numero,.bande-audio .numero{font:700 2.2rem/1 var(--oswald);color:transparent;-webkit-text-stroke:1.2px var(--accent);margin:0}
.formats .texte>p:not(.numero){margin:0}
.formats .tete{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.formats .tete .picto{width:30px;height:30px;margin:0}
.formats .tete h3{margin:0;font-size:1.35rem}
.formats .puces{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.formats .puces li{border:1px solid var(--trait);padding:3px 10px;font-size:.8rem;background:var(--blanc)}
.bande-audio{background:var(--accent);color:#fff}
.bande-audio .wrap{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,56px);align-items:center;padding-block:clamp(24px,3vw,36px)}
.bande-audio .picto-rond{width:84px;height:84px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center}
.bande-audio .picto-rond .picto{width:42px;height:42px;margin:0;color:var(--accent)}
.bande-audio h3{color:#fff;font-size:1.6rem;margin:0 0 8px}
.bande-audio .numero{-webkit-text-stroke-color:#fff}
.bande-audio .grand{font-size:1.2rem;max-width:60ch;margin:0}
body.ds .bande-audio{background:#FAAB09;color:var(--navy)} body.ds .bande-audio h3{color:var(--navy)} body.ds .bande-audio .numero{-webkit-text-stroke-color:var(--navy)}
.frise{background:var(--navy);color:#fff}
.frise h2,.frise h3{color:#fff}
.frise .eyebrow{color:#A2BCEF}
body.ds .frise .eyebrow{color:#FAAB09}
.frise ol{list-style:none;padding:0;margin:40px 0 8px;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;position:relative}
.frise ol::before{content:"";position:absolute;top:32px;left:32px;right:32px;height:2px;background:rgba(255,255,255,.35)}
.frise li{position:relative}
.frise li span{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:var(--accent);color:#fff;font:700 1.8rem/1 var(--oswald);margin-bottom:20px;position:relative}
body.ds .frise li span{background:#FAAB09;color:var(--navy)}
.frise li p{color:rgba(255,255,255,.85);margin:6px 0 0}
@media (max-width:760px){.formats .format{grid-template-columns:1fr}.formats .format.inverse figure{order:0}.formats .format figure{min-height:220px}.bande-audio .wrap{grid-template-columns:1fr}.frise ol{grid-template-columns:1fr}.frise ol::before{display:none}}

/* Retouche faite sur l'aperçu le 2026-10-21 : filet entre les cartes empilées à côté d'une photo */
.grille.n1.avec-photo .carte+.carte{border-top:1px solid var(--trait)}

/* Bandeau photo pour annoncer une grande section (Les quatre leviers, 2026-10-21) */
.bandeau-titre{position:relative;background-size:cover;background-position:center;background-attachment:fixed;color:#fff;padding-block:clamp(28px,3vw,40px)}
.bandeau-titre::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,30,46,.88) 0%,rgba(5,30,46,.6) 55%,rgba(5,30,46,.25) 100%)}
.bandeau-titre .wrap{position:relative}
.bandeau-titre h2{color:#fff;font-size:clamp(1.9rem,3.4vw,2.6rem);margin:0 0 8px}
.bandeau-titre .eyebrow{color:#A2BCEF}
body.ds .bandeau-titre .eyebrow{color:#FAAB09}
.bandeau-titre p:last-child{max-width:70ch;font-size:1.05rem;margin:0;color:rgba(255,255,255,.9)}
section.apres-bandeau{padding-top:0}
@supports (-webkit-touch-callout:none){.bandeau-titre{background-attachment:scroll}}
.bande-audio h3 .numero{display:inline;font-size:1.8rem;margin-right:10px;vertical-align:-2px}
/* Audio : rangée claire dans « Nos formats », sans photo (hiérarchie demandée par Olivier, 2026-10-21) */
.formats .format.audio{grid-template-columns:auto 1fr;align-items:center;background:var(--pale);padding-left:clamp(24px,3.5vw,48px)}
.formats .format.audio .picto-rond{width:84px;height:84px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center}
.formats .format.audio .picto-rond .picto{width:42px;height:42px;margin:0;color:#fff}
body.ds .formats .format.audio .picto-rond{background:#FAAB09} body.ds .formats .format.audio .picto-rond .picto{color:var(--navy)}
.formats .format.audio+.format{border-top:1px solid var(--trait)}
.formats .wrap{padding-bottom:0}
.frise h2{font-size:clamp(1.6rem,2.6vw,2rem)}
/* Titres de section marqués d'un trait de couleur (page Contenu, 2026-10-21) */
h2.titre-marque{display:flex;align-items:center;gap:14px;font-size:clamp(1.7rem,2.8vw,2.2rem)}
h2.titre-marque::before{content:"";flex:none;width:10px;height:1.1em;background:var(--accent)}
body.ds h2.titre-marque::before{background:#FAAB09}
.frise h2.titre-marque{color:#fff}
.frise h2.titre-marque::before{background:#A2BCEF}
body.ds .frise h2.titre-marque::before{background:#FAAB09}
/* Bloc d'appel à l'action, séparé du bandeau B2B/B2C */
.appel-action{background:var(--accent);color:#fff;padding-block:0}
.appel-action h2{font-size:clamp(1.5rem,2.4vw,1.9rem)}
.appel-action .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;padding-block:clamp(20px,2.2vw,28px)}
.appel-action h2{color:#fff;margin:0 0 6px}
.appel-action p{margin:0;color:rgba(255,255,255,.9);max-width:60ch}
.appel-action .actions{margin:0}
.appel-action .bouton{background:#fff;color:var(--accent);border-color:#fff}
.appel-action .bouton.clair{background:transparent;color:#fff;border-color:#fff}
body.ds .appel-action{background:var(--navy)}
body.ds .appel-action .bouton{background:#FAAB09;color:var(--navy);border-color:#FAAB09}
body.ds .appel-action .bouton.clair{background:transparent;color:#fff;border-color:#fff}
/* Influence : photo en fond derrière les quatre étapes (2026-10-21) */
.influence.avec-fond{position:relative;background-size:cover;background-position:center;background-attachment:fixed;padding-block:clamp(40px,5vw,72px)}
.influence.avec-fond::before{content:"";position:absolute;inset:0;background:rgba(5,30,46,.45)}
.influence.avec-fond .wrap{position:relative}
.influence.avec-fond .etapes{margin:0;background:transparent;border:0;gap:12px}
.influence.avec-fond .etapes li{background:rgba(255,255,255,.93);border:0!important;box-shadow:0 10px 30px rgba(5,30,46,.25)}
@supports (-webkit-touch-callout:none){.influence.avec-fond{background-attachment:scroll}}
/* Tous les titres de section marqués d'un trait de couleur (demande d'Olivier, 2026-10-21) */
main section:not(.hero):not(.bandeau-titre):not(.appel-action):not(.pont) > .wrap > h2:first-child,
main section:not(.hero):not(.bandeau-titre):not(.appel-action):not(.pont) > .wrap > .methode > h2:first-child{display:flex;align-items:center;gap:14px}
main section:not(.hero):not(.bandeau-titre):not(.appel-action):not(.pont) > .wrap > h2:first-child::before,
main section:not(.hero):not(.bandeau-titre):not(.appel-action):not(.pont) > .wrap > .methode > h2:first-child::before{content:"";flex:none;width:10px;height:1.1em;background:var(--accent)}
body.ds main section > .wrap > h2:first-child::before,body.ds main section > .wrap > .methode > h2:first-child::before{background:#FAAB09}
body.ht main section > .wrap > h2:first-child::before,body.ht main section > .wrap > .methode > h2:first-child::before{background:#FF6423}
.frise > .wrap > h2:first-child::before{background:#A2BCEF!important}
body.ds .frise > .wrap > h2:first-child::before{background:#FAAB09!important}
/* Cartes empilées à côté d'une photo : picto à gauche, plus compactes */
.grille.n1.avec-photo .carte{display:grid;grid-template-columns:auto 1fr;column-gap:18px;align-items:start;padding-block:20px}
.grille.n1.avec-photo .carte .picto{grid-row:span 2;margin:2px 0 0;width:34px;height:34px}
.grille.n1.avec-photo .carte h3{margin:0 0 4px}
.grille.n1.avec-photo .carte p{margin:0}

/* Étiquette du nom d'expertise en tête des pages GEO, Contenu, Influence, Transmission */
.etiquette-expertise{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 22px}
.etiquette-expertise>.picto,.etiquette-expertise>span:not(.sous){background:var(--accent);color:var(--accent-texte)}
.etiquette-expertise>.picto{width:54px;height:54px;padding:12px;margin:0;box-sizing:border-box;flex:none}
.etiquette-expertise>span:not(.sous){font:700 clamp(1.6rem,2.6vw,2.1rem)/54px var(--oswald);text-transform:uppercase;letter-spacing:.06em;padding:0 18px;margin-left:-14px}
.etiquette-expertise .sous{flex-basis:100%;font:600 .78rem/1.4 var(--poppins);text-transform:uppercase;letter-spacing:.14em;color:var(--titre)}
body.ds .etiquette-expertise>.picto,body.ds .etiquette-expertise>span:not(.sous){background:#FAAB09;color:#051E2E}

/* Accordéon : titre à gauche, plis à droite, un seul ouvert à la fois (comme le site actuel) */
.accordeon-bloc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,5vw,80px);align-items:start}
.accordeon-bloc .gauche h2{display:flex;gap:14px;align-items:stretch;margin-top:0}
.accordeon-bloc .gauche h2::before{content:"";flex:none;width:10px;min-height:1.1em;background:var(--accent)}
body.ds .accordeon-bloc .gauche h2::before{background:#FAAB09}
.accordeon-bloc .gauche p{max-width:52ch;color:var(--texte-doux,inherit)}
.lien-souligne{display:inline-block;margin-top:14px;color:var(--titre);font-weight:600;text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:3px}
body.ds .lien-souligne{border-bottom-color:#FAAB09}
.plis details{border-bottom:1px solid var(--trait)}
.plis summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;font:600 1.1rem/1.3 var(--poppins);color:#051E2E}
.plis summary::-webkit-details-marker{display:none}
.plis summary::after{content:"+";font:400 1.7rem/1 var(--poppins);color:#051E2E;flex:none}
.plis details[open] summary{color:var(--accent)}
body.ds .plis details[open] summary{color:#051E2E}
body.ds .plis details[open]{border-bottom-color:#FAAB09}
.plis details[open] summary::after{content:"−"}
.plis details p{margin:0 0 18px;max-width:none}
@media (max-width:860px){.accordeon-bloc{grid-template-columns:1fr}}

/* Page GEO : fonds alternés pour éviter blanc sur blanc (charte : bleu secondaire #A2BCEF / jaune #FFCF50, navy #051E2E) */
section.teinte{background:#E8EEFB;border-block:1px solid var(--trait)}
body.ds section.teinte{background:#FFF1CC}
section.teinte .carte{background:#fff}
section.sombre{background:#051E2E;color:#fff}
section.sombre h2,section.sombre h3,section.sombre .appel p{color:#fff}
section.sombre .methode ol li p{color:rgba(255,255,255,.78)}
section.sombre .methode ol{gap:0;margin-bottom:28px}
section.sombre .methode ol li{flex-direction:column;gap:14px;padding:4px clamp(18px,2.4vw,32px) 4px;border-left:1px solid rgba(255,255,255,.22)}
section.sombre .methode ol li:first-child{border-left:0;padding-left:0}
section.sombre .methode .num{width:auto;height:auto;background:none;color:#A2BCEF;font:700 clamp(2.6rem,4vw,3.4rem)/1 var(--oswald)}
body.ds section.sombre .methode .num{color:#FAAB09}
section.sombre .methode h3{font-size:1.3rem}
main section.sombre > .wrap > .methode > h2:first-child::before{background:#A2BCEF!important}
body.ds main section.sombre > .wrap > .methode > h2:first-child::before{background:#FAAB09!important}
section.sombre .methode .appel{border-top-color:rgba(255,255,255,.22)}
section.sombre .bouton{background:#A2BCEF;color:#051E2E;border-color:#A2BCEF}
body.ds section.sombre .bouton{background:#FAAB09;border-color:#FAAB09}
@media (max-width:700px){section.sombre .methode ol li{border-left:0;padding:0 0 18px}}

/* Transmission : « Notre constat » sur photo, voile navy pour garder le texte lisible */
section.constat-photo{position:relative;background-size:cover;background-position:center;color:#fff}
section.constat-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,30,46,.92) 0%,rgba(5,30,46,.82) 55%,rgba(5,30,46,.55) 100%)}
section.constat-photo .wrap{position:relative}
section.constat-photo h2{color:#fff}
section.constat-photo .lead{color:rgba(255,255,255,.92);max-width:62ch}
section.constat-photo .picto-transmission{color:#A2BCEF}
body.ds section.constat-photo .picto-transmission{color:#FAAB09}

/* Phrase mise en avant comme une parole (Transmission) */
.citation{margin:28px 0 0;padding:4px 0 4px 22px;border-left:4px solid var(--accent)}
.citation p{margin:0;max-width:44ch;font:700 clamp(1.35rem,2.2vw,1.75rem)/1.3 var(--oswald);color:var(--accent)}
body.ds .citation{border-left-color:#FAAB09}
body.ds .citation p{color:var(--navy)}

/* Accueil BF : points de contact digitaux sur la photo du héros */
.hero.accueil .points-contact{position:absolute;top:0;right:0;width:50%;height:100%;z-index:1;pointer-events:none}
.points-contact::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,30,46,.15),rgba(5,30,46,.45))}
.points-contact .liens{position:absolute;inset:0;width:100%;height:100%}
.points-contact .liens line{stroke:#fff;stroke-width:1.5;stroke-dasharray:4 5;vector-effect:non-scaling-stroke;opacity:.85}
.points-contact .centre{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#2D1FD0;color:#fff;font:700 1.25rem/1 var(--oswald);text-transform:uppercase;letter-spacing:.04em;padding:16px 22px;box-shadow:0 0 0 8px rgba(45,31,208,.25)}
.points-contact .pc{position:absolute;display:inline-flex;align-items:center;gap:8px;background:#fff;color:#051E2E;font:600 .82rem/1 var(--poppins);padding:9px 12px 9px 10px;border-left:3px solid #2D1FD0;white-space:nowrap;box-shadow:0 6px 18px rgba(5,30,46,.18)}
.points-contact .pc svg{width:18px;height:18px;fill:none;stroke:#2D1FD0;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){.hero.accueil .points-contact{display:none}}

/* Méthode sur fond navy : trois niveaux de lecture (titre séparé par un filet, étapes, question d'appel en encadré couleur) */
section.sombre .methode>h2{padding-bottom:26px;margin-bottom:34px;border-bottom:1px solid rgba(255,255,255,.22)}
section.sombre .methode .appel{border-top:0;padding:22px clamp(20px,2.6vw,32px);margin-top:8px;background:#2D1FD0}
section.sombre .methode .appel p{font:600 clamp(1.02rem,1.4vw,1.2rem)/1.4 var(--poppins);color:#fff}
section.sombre .methode .appel .bouton{background:#fff;color:#2D1FD0;border-color:#fff}
body.ds section.sombre .methode .appel{background:#FAAB09}
body.ds section.sombre .methode .appel p{color:#051E2E}
body.ds section.sombre .methode .appel .bouton{background:#051E2E;color:#fff;border-color:#051E2E}

/* Pas de filet blanc entre un bandeau photo et la grille qui suit */
section.apres-bandeau .wrap>:first-child{margin-top:0;border-top:0}
/* Question d'appel de la méthode : encadré couleur partout, pour la distinguer du titre de section */
.methode .appel{border-top:0;padding:22px clamp(20px,2.6vw,32px);margin-top:8px;background:var(--accent)}
.methode .appel p{font:600 clamp(1.02rem,1.4vw,1.2rem)/1.4 var(--poppins);color:#fff}
.methode .appel .bouton{background:#fff;color:var(--accent);border-color:#fff}
body.ds .methode .appel{background:#FAAB09}
body.ds .methode .appel p{color:#051E2E}
body.ds .methode .appel .bouton{background:#051E2E;color:#fff;border-color:#051E2E}
body.ht .methode .appel{background:#FF6423}
body.ht .methode .appel p{color:#051E2E}
body.ht .methode .appel .bouton{background:#051E2E;color:#fff;border-color:#051E2E}

/* Titre d'un bandeau photo = titre de section ordinaire (même taille, même trait de couleur) */
.bandeau-titre h2{font-size:clamp(1.55rem,2.4vw,2.1rem);display:flex;align-items:center;gap:14px;margin:0 0 10px}
.bandeau-titre h2::before{content:"";flex:none;width:10px;height:1.1em;background:#A2BCEF;align-self:center}
body.ds .bandeau-titre h2::before{background:#FAAB09}

/* Contenu : Audio dans la grille image / texte, avec une tuile graphique à la place de la photo */
.formats .format figure.tuile-audio{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:var(--accent);color:#fff}
.tuile-audio .micro{width:96px;height:96px;border-radius:50%;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center}
.tuile-audio .micro .picto{width:48px;height:48px;margin:0;color:#fff}
.tuile-audio .onde{width:min(60%,260px);height:auto;fill:rgba(255,255,255,.55)}
body.ds .formats .format figure.tuile-audio{background:#FAAB09;color:#051E2E}
body.ds .tuile-audio .micro{background:rgba(5,30,46,.1)}
body.ds .tuile-audio .micro .picto{color:#051E2E}
body.ds .tuile-audio .onde{fill:rgba(5,30,46,.45)}

/* Transmission : les 4 formats sur une seule ligne compacte, sans grande photo */
.formats-ligne{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.formats-ligne li{background:#fff;border-top:3px solid var(--accent);padding:20px 20px 18px}
body.ds .formats-ligne li{border-top-color:#FAAB09}
.formats-ligne .picto{width:30px;height:30px;margin:0 0 10px}
.formats-ligne h3{margin:0 0 6px;font-size:1.1rem}
.formats-ligne p{margin:0;font-size:.92rem;color:var(--texte-2)}
@media (max-width:860px){.formats-ligne{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.formats-ligne{grid-template-columns:1fr}}

/* Influence : étapes compactes (numéro et titre sur la même ligne, texte resserré) */
.influence .etapes li{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;align-content:start;padding:18px 20px}
.influence .etapes span{margin:0;font-size:1.7rem}
.influence .etapes h3{margin:0;font-size:1.1rem}
.influence .etapes p{grid-column:1 / -1;margin-top:10px;font-size:.86rem;line-height:1.5}
.influence.avec-fond{padding-block:clamp(28px,3vw,44px)}

/* Carte GEO affichée en image dans la fenêtre (Chrome bloque les PDF intégrés) */
.fenetre-pdf .page-carte{flex:1;overflow:auto;background:#f3f4f6;padding:16px}
.fenetre-pdf .page-carte img{display:block;width:100%;height:auto;margin:0 auto;box-shadow:0 4px 18px rgba(5,30,46,.15)}

/* Accueil : héros moins haut (demande d'Olivier, 2026-10-21) */
.hero.accueil.photo{padding-block:clamp(26px,3vw,44px)}
.hero.accueil.photo .eyebrow{margin-bottom:12px}
.hero.accueil.photo h1{font-size:clamp(1.9rem,3.1vw,2.7rem);margin-bottom:16px}
.hero.accueil.photo .chapo{font-size:clamp(.98rem,1.25vw,1.1rem);margin-bottom:24px;line-height:1.6}

/* Transmission : citation sur photo en fond (défile derrière, voile navy) */
section.citation-photo{position:relative;background-size:cover;background-position:center;background-attachment:fixed;padding-block:clamp(36px,4vw,56px)}
section.citation-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,30,46,.9),rgba(5,30,46,.6))}
section.citation-photo .wrap{position:relative}
section.citation-photo .citation{margin:0;border-left-color:#A2BCEF}
section.citation-photo .citation p{color:#fff;max-width:none}
body.ds section.citation-photo .citation{border-left-color:#FAAB09}
body.ds section.citation-photo .citation p{color:#fff}
@supports (-webkit-touch-callout:none){section.citation-photo{background-attachment:scroll}}

/* Transmission : canaux de diffusion en tuiles à picto sur fond navy */
.canaux{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:12px}
.canaux li{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:18px 16px;border:1px solid rgba(255,255,255,.22);color:#fff;font:600 .92rem/1.3 var(--poppins)}
.canaux svg{width:30px;height:30px;fill:none;stroke:#A2BCEF;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
body.ds .canaux svg{stroke:#FAAB09}

/* Page GEO : fond papier millimétré derrière « Être la réponse » pour ancrer la conversation IA */
main section:has(> .wrap.duo > .demo.clair){
  background-color:#fff;
  background-image:
    linear-gradient(rgba(45,31,208,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(45,31,208,.10) 1px,transparent 1px),
    linear-gradient(rgba(45,31,208,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(45,31,208,.045) 1px,transparent 1px);
  background-size:40px 40px,40px 40px,8px 8px,8px 8px}
body.ds main section:has(> .wrap.duo > .demo.clair){
  background-image:
    linear-gradient(rgba(5,30,46,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(5,30,46,.10) 1px,transparent 1px),
    linear-gradient(rgba(5,30,46,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(5,30,46,.04) 1px,transparent 1px)}
main section:has(> .wrap.duo > .demo.clair) .resume{background:#fff;box-shadow:0 6px 20px rgba(5,30,46,.06)}
main section:has(> .wrap.duo > .demo.clair) .demo{box-shadow:12px 12px 0 rgba(45,31,208,.18)}
body.ds main section:has(> .wrap.duo > .demo.clair) .demo{box-shadow:12px 12px 0 rgba(250,171,9,.45)}

/* 2026-10-21 : quatre leviers sur une seule rangée, plus compacts */
.leviers{grid-template-columns:repeat(4,minmax(0,1fr))}
.leviers>li{padding:26px clamp(14px,1.6vw,24px)}
.leviers .tete{gap:12px;margin-bottom:14px}
.leviers .tete h3{font-size:1.02rem}
.leviers .tete p{font-size:.84rem;line-height:1.45}
.leviers .num{width:40px;height:40px;font-size:1.25rem;flex:none}
.leviers ul{gap:7px}
.leviers ul li{padding:8px 11px;font-size:.84rem;line-height:1.42}
@media (min-width:1100px){.leviers .ligne{white-space:normal}}
@media (max-width:1000px){.leviers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.leviers{grid-template-columns:1fr}}

/* Lien « Faire un audit GEO » des accordéons devenu un vrai bouton */
.accordeon-bloc .gauche .bouton{margin-top:18px}

/* En-têtes d'expertise : texte de droite toujours centré verticalement (même logique partout) */
.hero.split .texte:not(:has(.hero-photo)){padding:clamp(26px,3vw,44px) clamp(16px,5vw,80px);justify-content:center}

/* Grille Contenu plus compacte */
.formats .format figure{min-height:clamp(160px,14vw,210px)}
.formats .format .texte{padding:clamp(14px,1.8vw,24px) clamp(20px,3vw,40px)}
.formats .numero{font-size:1.7rem}
.formats .tete{margin-bottom:4px;gap:10px}
.formats .tete .picto{width:24px;height:24px}
.formats .tete h3{font-size:1.15rem}
.formats .texte>p:not(.numero){font-size:.92rem;line-height:1.5}
.formats .puces{margin-top:8px;gap:6px}
.formats .puces li{padding:2px 8px;font-size:.76rem}
.formats .format figure.tuile-audio{gap:14px}
.formats .tuile-audio .micro{width:68px;height:68px}.formats .tuile-audio .micro .picto{width:34px;height:34px}.formats .tuile-audio .onde{width:min(55%,220px)}

/* Citation sans barre à gauche : la barre est réservée aux titres (Olivier, 2026-10-21) */
.citation,section.citation-photo .citation{border-left:0!important;padding-left:0}

/* Agence « Nos engagements » : photo en fond qui glisse (parallaxe), voile navy, tuiles blanches */
section.engagements-photo{position:relative;background-size:cover;background-position:center;background-attachment:fixed}
section.engagements-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,30,46,.88),rgba(5,30,46,.62))}
section.engagements-photo .wrap{position:relative}
section.engagements-photo h2{color:#fff}
section.engagements-photo h2::before{background:#A2BCEF!important}
body.ds section.engagements-photo h2::before{background:#FAAB09!important}
@supports (-webkit-touch-callout:none){section.engagements-photo{background-attachment:scroll}}

/* Accueil : triptyque plus compact, numéro et titre sur une ligne (2026-10-21) */
.porte{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr auto;column-gap:14px;row-gap:10px;align-items:center;padding:clamp(20px,2.4vw,32px) clamp(18px,2.4vw,32px)}
.porte .num{width:40px;height:40px;font-size:1.25rem}
.porte h2{font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.15}
.porte h2 br{display:none}
.porte ul,.porte .bouton{grid-column:1/-1}
.porte ul{align-self:start}
.porte li{padding:6px 0;font-size:.92rem;line-height:1.4}
.porte .bouton{padding:10px 20px;font-size:.95rem;margin-top:6px}

/* Bricolo Factory : barre des titres sur fond sombre ou photo en gris bleu #89A2B3 (charte, Olivier 2026-10-21) */
body:not(.ds):not(.ht) section.sombre h2::before,
body:not(.ds):not(.ht) .frise h2.titre-marque::before,
body:not(.ds):not(.ht) .bandeau-titre h2::before,
body:not(.ds):not(.ht) section.engagements-photo h2::before,
body:not(.ds):not(.ht) section.constat-photo h2::before{background:#89A2B3!important}
/* Même gris bleu sur Dynamo Square (Olivier, 2026-10-21), titres sur fond sombre ou photo, et pictos des canaux */
body.ds main section.sombre h2::before,
body.ds .frise h2.titre-marque::before,
body.ds .bandeau-titre h2::before,
body.ds section.engagements-photo h2::before,
body.ds section.constat-photo h2::before{background:#89A2B3!important}
body .canaux svg{stroke:#89A2B3!important;color:#89A2B3!important}

/* Bandeau d'appel : texte sur une ligne, sans césure (Olivier, 2026-10-21) */
.appel-action p{max-width:none;hyphens:none;-webkit-hyphens:none}
.appel-action .wrap>div:first-child{flex:1 1 auto;min-width:0}

/* Coordonnées : deux cartes (e-mail protégé et adresse) sur toute la largeur, sans case vide (2026-10-25) */
@media (min-width:641px){.grille.n0.coordonnees{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Plan : image fixe du quartier derrière le bouton, Google Maps seulement au clic (2026-10-25) */
.plan[style*="-plan-quartier"]{background-size:cover;background-position:72% center;background-repeat:no-repeat;position:relative}
.plan[style*="-plan-quartier"] p{background:rgba(255,255,255,.9);padding:4px 10px}
.plan.ouvert{background-image:none!important}
@media (max-width:600px){.plan[style*="-plan-quartier"]{background-position:90% center;justify-content:flex-end;padding-bottom:18px}}

/* Les associés (Agence) : titre sur fond teinté à gauche, deux portraits sur fond de marque (2026-10-25) */
section.associes{display:grid;grid-template-columns:1fr 1fr 1fr;padding:0;border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}
section.associes>*{padding:clamp(28px,4vw,56px) clamp(20px,3vw,44px)}
section.associes .gauche{background:var(--pale);display:flex;flex-direction:column;justify-content:center}
section.associes .gauche h2{margin:6px 0 16px}
section.associes .gauche p:last-child{margin:0}
section.associes .associe{border-left:1px solid var(--trait);display:flex;flex-direction:column}
section.associes .associe img{width:100%;max-width:300px;height:auto;aspect-ratio:396/565;object-fit:cover;display:block;margin-bottom:22px}
section.associes .associe h3{font-family:var(--oswald);font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1.1;margin:0;color:var(--titre)}
section.associes .associe .role{margin:6px 0 14px;font-weight:600;color:var(--texte-2);font-size:.9rem;text-transform:uppercase;letter-spacing:.06em}
section.associes .associe p{margin:0 0 18px}
section.associes .lien-fleche{margin-top:auto;align-self:flex-start;font-weight:600;color:var(--titre);text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:3px}
@media (max-width:900px){section.associes{grid-template-columns:1fr 1fr}section.associes .gauche{grid-column:1/-1}section.associes .associe:first-of-type{border-left:0}}
@media (max-width:600px){section.associes{grid-template-columns:1fr}section.associes .associe{border-left:0;border-top:1px solid var(--trait)}}

/* Fenêtre « Écrire à Olivier Doriath » (e-mail protégé, 2026-10-26) */
.fenetre-mail{width:min(620px,94vw);padding:0;border:0;border-top:6px solid var(--accent);box-shadow:0 20px 60px rgba(5,30,46,.35)}
.fenetre-mail::backdrop{background:rgba(5,30,46,.55)}
.fenetre-mail .fm{position:relative;padding:clamp(22px,4vw,40px);display:grid;gap:14px}
.fenetre-mail h2{margin:0 40px 6px 0;font-family:var(--oswald);color:var(--titre);font-size:clamp(1.5rem,3vw,2rem);line-height:1.1}
.fenetre-mail h2::before{display:none}
.fenetre-mail .fermer{position:absolute;top:14px;right:16px;background:none;border:0;font-size:2rem;line-height:1;cursor:pointer;color:var(--navy)}
.fenetre-mail .fm-ligne{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fenetre-mail input,.fenetre-mail textarea{font:inherit;padding:12px 14px;border:1px solid #cfd8df;border-radius:0;width:100%;box-sizing:border-box;resize:vertical}
.fenetre-mail input:focus,.fenetre-mail textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
.fenetre-mail .bouton{justify-self:start;border:0;cursor:pointer;text-transform:uppercase;letter-spacing:.06em}
.fenetre-mail .fm-autres{margin:6px 0 0;padding-top:16px;border-top:1px solid #e1e6ea;display:flex;flex-wrap:wrap;align-items:center;gap:10px;color:var(--texte-2);font-size:.92rem}
.fenetre-mail .fm-autres a{background:var(--pale);color:var(--titre);font-weight:600;text-decoration:none;padding:8px 16px;border-radius:999px}
@media (max-width:560px){.fenetre-mail .fm-ligne{grid-template-columns:1fr}}

/* Agence « Notre studio » : encart compact avec photo unique (repris de l'aperçu, 2026-10-26) */
section.studio-encart{background:var(--fond-2);padding-block:clamp(20px,3vw,36px)}
section.studio-encart h2{margin-bottom:8px}
.studio-contenu{display:grid;gap:clamp(16px,2vw,28px);grid-template-columns:1fr 1fr;align-items:center;margin-top:8px}
.studio-texte p{margin:0 0 6px;font-size:.88rem;line-height:1.5}
.studio-texte .lead{font-size:.95rem;font-weight:600;color:var(--texte);max-width:none}
.studio-galerie{position:relative}
.studio-galerie img{width:100%;height:auto;display:block;object-fit:cover;border-radius:6px;aspect-ratio:16/9;max-height:260px}
@media(max-width:700px){.studio-contenu{grid-template-columns:1fr}.studio-galerie img{max-height:200px}}
/* Accueil DS : points de contact aux couleurs Dynamo Square (repris de l'aperçu, 2026-10-26 ; texte bleu nuit sur jaune pour la lisibilité) */
body.ds .points-contact .centre{background:#faab09;color:#051E2E;box-shadow:0 0 0 8px rgba(250,171,9,.25)}
body.ds .points-contact .pc{border-left-color:#faab09}
body.ds .points-contact .pc svg{stroke:#faab09}

/* Page Contact : coordonnées compactes à gauche, plan dessiné cliquable vers Google Maps à droite (2026-10-26) */
.coord-plan{display:grid;grid-template-columns:minmax(280px,1fr) 1.9fr;gap:0;border:1px solid var(--trait);margin-top:8px;background:#fff}
.coord{list-style:none;margin:0;padding:8px 0;display:flex;flex-direction:column;border-right:1px solid var(--trait)}
.coord>li{display:flex;gap:14px;align-items:flex-start;padding:14px 22px}
.coord>li+li{border-top:1px solid #e3e8ec}
.coord .ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--pale)}
.coord .ic .picto{width:22px;height:22px;color:var(--titre)}
.coord h3{margin:0 0 2px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--texte-2,#5a6b78)}
.coord p,.coord address{margin:0;font-style:normal;font-size:.95rem;line-height:1.45}
.coord address+p{margin-top:2px;font-size:.88rem}
.coord .metros ul{list-style:none;margin:0;padding:0;display:grid;gap:2px;font-size:.92rem}
.coord .metros span:not(.m){color:var(--texte-2,#5a6b78)}
.coord .m{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#051E2E;color:#fff;font-weight:700;font-size:.8rem}
.plan-acces{display:block;position:relative;overflow:hidden;min-height:320px;text-decoration:none}
.plan-acces img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .4s ease}
.plan-acces:hover img{transform:scale(1.015)}
.plan-acces .ouvrir-gm{position:absolute;left:16px;top:16px;background:var(--navy,#051E2E);color:#fff;font-weight:600;font-size:.88rem;padding:10px 16px;border-radius:999px;box-shadow:0 6px 18px rgba(5,30,46,.25)}
.plan-acces:hover .ouvrir-gm,.plan-acces:focus-visible .ouvrir-gm{background:var(--accent);color:var(--accent-texte,#fff)}
.plan-acces:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
@media (max-width:860px){.coord-plan{grid-template-columns:1fr}.coord{border-right:0;border-bottom:1px solid var(--trait)}.plan-acces{min-height:0;aspect-ratio:1000/640}.plan-acces .ouvrir-gm{left:10px;top:10px;font-size:.8rem;padding:8px 12px}}

/* Formulaire « Écrire à » : champ piège invisible et message de confirmation (2026-10-27) */
.fenetre-mail .fm-piege{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fenetre-mail .fm-info{margin:0;font-weight:600;color:var(--c,inherit)}
.fenetre-mail .fm-info:empty{display:none}