/* ============================================================
   Pixel Adhesifs - feuille de style commune a toutes les pages
   Une seule edition ici vaut pour les 9 pages.
   Les @font-face restent dans chaque page : leurs chemins sont
   relatifs au fichier HTML, pas a cette feuille.
   ============================================================ */

:root{
  --marine:#1C315E;
  --marine-d:#152647;
  --bleu:#3778AD;
  --jaune:#EDD965;
  --verre:#F2F5F8;
  --gris:#5E6E85;
  --rule:rgba(28,49,94,.14);
  --display:"Nexa","Trebuchet MS",system-ui,sans-serif;
  --texte:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --pad:clamp(1.25rem,4vw,3.5rem);
  --max:1500px;
  --r:11px;
  --head-h:74px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 1rem)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#fff;color:var(--marine);font-family:var(--texte);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0}
p{margin:0}
:focus-visible{outline:3px solid var(--jaune);outline-offset:3px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.lede{max-width:54ch}
.sub{max-width:64ch}
/* ---------- bandeau de maquette (hors design) ---------- */
.tofill{background:rgba(237,217,101,.38);box-shadow:inset 0 -2px 0 var(--jaune);padding:0 .2rem;font-style:normal}
/* ---------- en-tête fixe ---------- */
.head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.93);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.head-in{max-width:var(--max);margin-inline:auto;padding:.75rem var(--pad);display:flex;align-items:center;gap:clamp(1rem,3vw,3rem);min-height:var(--head-h)}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;flex:0 0 auto}
.brand img{height:46px;width:auto}
.brand-txt{font-family:var(--display);font-weight:700;font-size:1.0625rem;letter-spacing:-.01em;line-height:1.15}
.brand-txt em{display:block;font-style:normal;font-weight:400;font-size:.75rem;color:var(--gris)}
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(.85rem,1.8vw,1.9rem);flex-wrap:wrap}
.nav a{color:var(--marine);text-decoration:none;font-size:.9375rem;font-weight:500;padding:.3rem 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover{border-bottom-color:var(--bleu)}
.nav a.on{border-bottom-color:var(--jaune);font-weight:600}
.btn{font-family:var(--display);font-weight:700;font-size:1rem;text-decoration:none;padding:.9rem 1.35rem;display:inline-block;border-radius:var(--r);cursor:pointer;border:2px solid transparent}
/* bouton d'en-tête : jaune, texte marine → survol : blanc, contour et texte marine */
.btn-head{font-size:.9375rem;padding:.6rem 1.6rem;white-space:nowrap;background:var(--jaune);color:var(--marine);border-color:var(--jaune);border-bottom-color:var(--jaune)!important}
.nav a.btn-head{padding:.3rem 1.7rem}
.btn-head:hover{background:#fff;color:var(--marine);border-color:var(--marine);border-bottom-color:var(--marine)!important}
/* bouton principal du héros : jaune, texte marine → survol : blanc, texte marine, contour blanc */
.btn-p{background:var(--jaune);color:var(--marine);border-color:var(--jaune)}
.btn-p:hover{background:#fff;color:var(--marine);border-color:#fff}
.btn-s{color:#fff;border-color:rgba(255,255,255,.45);background:none}
.btn-s:hover{border-color:var(--jaune);color:var(--jaune)}
/* ---------- héros ---------- */
.hero{background:var(--marine);color:#fff}
.hero-in{max-width:var(--max);margin-inline:auto;padding:clamp(2.75rem,5vw,4.5rem) var(--pad);display:grid;grid-template-columns:1fr;gap:clamp(2rem,3.5vw,3.5rem);align-items:center}
@media(min-width:1000px){.hero-in{grid-template-columns:1fr 1.1fr}}
.hero h1{font-size:clamp(2.2rem,4.1vw,3.5rem);line-height:1.05;letter-spacing:-.025em;max-width:24ch}
.hero .lede{margin-top:1.25rem;font-size:clamp(1.0625rem,1.3vw,1.1875rem);color:#cfdaea}
.cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.9rem}
/* diaporama du héros, paysage, défilement auto en boucle */
.show{position:relative;border:1px solid rgba(255,255,255,.26);border-radius:var(--r);overflow:hidden;background:rgba(255,255,255,.05)}
.show-vp{overflow:hidden}
.show-tr{display:flex;transition:transform .7s cubic-bezier(.3,.7,.2,1)}
@media (prefers-reduced-motion:reduce){.show-tr{transition:none}}
.show-sl{flex:0 0 100%;aspect-ratio:16/9;display:grid;place-items:center;text-align:center;padding:0;overflow:hidden}
.show-sl img{width:100%;height:100%;object-fit:cover;display:block}
.show-sl picture{display:contents}
.show-sl p{color:#cfdaea;font-size:.9375rem;max-width:34ch}
.show-dots{position:absolute;left:0;right:0;bottom:.85rem;display:flex;justify-content:center;gap:.45rem}
.show-dots button{width:30px;height:4px;padding:0;border:0;border-radius:2px;background:rgba(255,255,255,.35);cursor:pointer}
.show-dots button[aria-current="true"]{background:var(--jaune)}
/* ---------- sections ---------- */
.sec{padding:clamp(3.25rem,6vw,5.5rem) 0}
.sec-marine{background:var(--marine);color:#fff}
.sec-verre{background:var(--verre);border-block:1px solid var(--rule)}
.sec h2{font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.1;letter-spacing:-.02em;max-width:28ch}
.sec-marine h2{color:#fff}
.sec .sub{margin-top:.9rem;color:var(--gris)}
.sec-marine .sub{color:#cfdaea}
/* prestations */
.grid4{display:grid;grid-template-columns:1fr;gap:clamp(2rem,3.5vw,3rem) clamp(2rem,4vw,4.5rem);margin-top:clamp(2.25rem,3.5vw,3.25rem)}
@media(min-width:720px){.grid4{grid-template-columns:1fr 1fr}}
@media(min-width:1180px){.grid4{grid-template-columns:repeat(4,1fr)}}
.presta h3{font-size:1.25rem;margin-bottom:.55rem;letter-spacing:-.01em}
.presta h3 a{text-decoration:none}
.presta h3 a:hover{color:var(--bleu)}
.presta p{color:var(--gris)}
.tick{display:block;width:30px;height:4px;background:var(--jaune);margin-bottom:1rem}
/* sous-traitance */
.engage{list-style:none;margin:clamp(2rem,3.5vw,3rem) 0 0;padding:0;display:grid;grid-template-columns:1fr}
@media(min-width:860px){.engage{grid-template-columns:1fr 1fr;column-gap:clamp(2.5rem,5vw,5rem)}}
.engage li{padding:1.1rem 0;border-top:1px solid rgba(255,255,255,.2)}
.engage b{display:block;font-family:var(--display);font-weight:700;color:var(--jaune);font-size:.9375rem;margin-bottom:.3rem}
.engage span{color:#dfe6f0}
/* zone */
.deps{display:grid;grid-template-columns:1fr;gap:1px;margin-top:clamp(2rem,3.5vw,3rem);background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
@media(min-width:860px){.deps{grid-template-columns:repeat(3,1fr)}}
.dep{background:#fff;padding:clamp(1.4rem,2.5vw,2rem)}
.dep.main{background:var(--verre)}
.dep-num{font-family:var(--display);font-weight:700;font-size:2.4rem;line-height:1;letter-spacing:-.03em;color:var(--bleu)}
.dep.main .dep-num{color:var(--marine)}
.dep h3{font-size:1.0625rem;margin:.55rem 0 .6rem}
.dep p{color:var(--gris);font-size:.9375rem}
.note{margin-top:1.25rem;font-size:.9375rem;color:var(--gris)}
/* contact — centré */
.ct-head{text-align:center;max-width:62ch;margin-inline:auto}
.ct-head h2{max-width:none;margin-inline:auto}
.ct-head .sub{margin-inline:auto}
.form{display:grid;gap:1rem;max-width:760px;margin:clamp(2rem,3.5vw,3rem) auto 0}
.field{display:grid;gap:.35rem}
.field label{font-size:.875rem;font-weight:600}
.req{color:var(--bleu)}
.field input,.field select,.field textarea{font:inherit;font-size:1rem;color:var(--marine);padding:.75rem .85rem;border:1px solid var(--rule);background:#fff;border-radius:var(--r);width:100%}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--marine)}
.field textarea{min-height:8.5rem;resize:vertical}
.row{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:620px){.row{grid-template-columns:1fr 1fr}}
.drop{border:2px dashed var(--rule);border-radius:var(--r);background:#fff;padding:1.5rem 1.25rem;text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.drop:hover,.drop.over{border-color:var(--bleu);background:#fbfcfe}
.drop.over{border-style:solid}
.drop b{display:block;font-family:var(--display);font-weight:700;font-size:1rem;margin-bottom:.3rem}
.drop small{color:var(--gris);font-size:.8125rem}
.files{list-style:none;margin:.85rem 0 0;padding:0;display:grid;gap:.35rem;text-align:left}
.files li{font-size:.875rem;color:var(--gris);display:flex;gap:.6rem;justify-content:space-between;border-top:1px solid var(--rule);padding-top:.35rem}
.files li.bad{color:#9b2c2c}
.submit{font-family:var(--display);font-weight:700;font-size:1rem;background:var(--marine);color:#fff;border:2px solid var(--marine);padding:.9rem 1.6rem;cursor:pointer;justify-self:center;border-radius:var(--r)}
.submit:hover{background:var(--jaune);color:var(--marine);border-color:var(--jaune)}
.rgpd{font-size:.8125rem;color:var(--gris);text-align:center}
/* ---------- ajouts SEO repérables ---------- */
/* ---------- carte d'intervention ---------- */
.zone-grid{display:grid;gap:clamp(1.5rem,3vw,2.75rem);grid-template-columns:1fr;margin-top:2rem}
@media(min-width:960px){.zone-grid{grid-template-columns:minmax(280px,400px) 1fr;align-items:start}}
.carte{background:var(--verre);border:1px solid var(--rule);border-radius:var(--r);padding:1rem}
.carte svg{width:100%;height:auto;display:block}
.ctx path{fill:none;stroke:rgba(28,49,94,.18);stroke-width:1.6;vector-effect:non-scaling-stroke}
.dep-g{cursor:pointer}
.dep-g:focus{outline:none}
.dep-f{fill:#fff;stroke:var(--marine);stroke-width:2.4;vector-effect:non-scaling-stroke;transition:fill .2s}
.dep-halo{fill:none;stroke:var(--jaune);stroke-width:6;vector-effect:non-scaling-stroke;opacity:.18;animation:halo 2.8s ease-in-out infinite}
.dep-g:nth-of-type(2) .dep-halo{animation-delay:.45s}
.dep-g:nth-of-type(3) .dep-halo{animation-delay:.9s}
.dep-g:nth-of-type(4) .dep-halo{animation-delay:1.35s}
@keyframes halo{0%,100%{opacity:.14}50%{opacity:.95}}
.dep-num{font-family:var(--display);font-weight:700;font-size:44px;fill:var(--bleu);text-anchor:middle;dominant-baseline:middle;pointer-events:none;transition:fill .2s}
.dep-nom{font-family:var(--display);font-weight:400;font-size:24px;fill:var(--gris);text-anchor:middle;dominant-baseline:middle;pointer-events:none;opacity:0;transition:opacity .2s,fill .2s}
.carte svg:hover .dep-halo,.carte.fige .dep-halo{animation:none;opacity:0}
.dep-g:hover .dep-f,.dep-g:focus-visible .dep-f,.dep-g.on .dep-f{fill:var(--marine)}
.dep-g:hover .dep-halo,.dep-g:focus-visible .dep-halo,.dep-g.on .dep-halo{animation:none;opacity:1}
.dep-g:hover .dep-num,.dep-g:focus-visible .dep-num,.dep-g.on .dep-num{fill:var(--jaune)}
.dep-g:hover .dep-nom,.dep-g:focus-visible .dep-nom,.dep-g.on .dep-nom{opacity:1;fill:#fff}
.dep-g.survol .dep-f{fill:var(--marine)}
.dep-g.survol .dep-halo{animation:none;opacity:1}
.dep-g.survol .dep-num{fill:var(--jaune)}
.dep-g.survol .dep-nom{opacity:1;fill:#fff}
.dep{transition:background .2s,box-shadow .2s}
.zone-grid .deps{grid-template-columns:1fr!important;margin-top:0}
.dep.survol,.dep.on{background:#fff;box-shadow:inset 4px 0 0 var(--jaune)}
.dep.main.survol,.dep.main.on{background:var(--verre);box-shadow:inset 4px 0 0 var(--jaune)}
.ville circle{fill:var(--bleu)}
.ville text{font-family:var(--texte);font-size:17px;fill:var(--gris)}
@media(prefers-reduced-motion:reduce){.dep-halo{animation:none;opacity:.45}}
/* ---------- FAQ ---------- */
.lien-bl{margin-top:.75rem;font-size:.875rem;color:var(--gris);line-height:1.5}
.lien-bl a{color:var(--bleu);text-decoration:none;border-bottom:1px solid rgba(55,120,173,.4);font-weight:500}
.lien-bl a:hover{border-bottom-color:var(--bleu)}
.faq{margin-top:2.25rem;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;padding:.95rem 2.25rem .95rem 0;position:relative;font-family:var(--display);font-weight:700;font-size:1.0625rem;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.55rem;top:1.35rem;width:9px;height:9px;border-right:2px solid var(--bleu);border-bottom:2px solid var(--bleu);transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{color:var(--bleu)}
.faq-r{padding:0 2.25rem 1.1rem 0;color:var(--gris);max-width:72ch}
/* pied */
.foot{background:var(--marine-d);color:#b9c6d9;padding:clamp(2.5rem,4vw,3.25rem) 0;font-size:.9375rem}
.foot-in{display:grid;grid-template-columns:1fr;gap:2rem;justify-items:center;text-align:center}
@media(min-width:620px){.foot-in{grid-template-columns:1fr 1fr}}
.foot h3{color:#fff;font-size:.9375rem;margin-bottom:.7rem}
.foot a{color:#b9c6d9;text-decoration:none}
.foot a:hover{color:var(--jaune)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.foot-bas{background:#fff;border-top:1px solid var(--rule);padding:1.5rem var(--pad)}
.foot-bas-in{max-width:var(--max);margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:.7rem;text-align:center}
.foot-bas img{height:40px;width:auto}
.foot-bas a{color:var(--marine);font-size:.875rem;text-decoration:none;border-bottom:1px solid var(--rule)}
.foot-bas a:hover{border-bottom-color:var(--marine)}
.foot-ligne{background:var(--marine-d);border-top:1px solid rgba(255,255,255,.14);color:#93a4bd;font-size:.8125rem;text-align:center;padding:.9rem var(--pad);letter-spacing:.01em}
/* ======== zone : tuiles 2x2 calees sur la hauteur de la carte ======== */
.zone-grid{align-items:stretch}
.carte{display:flex;align-items:center}
.zone-grid .deps{height:100%;grid-template-columns:1fr 1fr!important}
.zone-grid .dep{display:flex;flex-direction:column;padding:clamp(.95rem,1.7vw,1.25rem) clamp(1rem,1.9vw,1.4rem)}
.zone-grid .dep-num{font-size:1.6rem}
.zone-grid .dep h3{margin:.2rem 0 .35rem;font-size:.9375rem}
.zone-grid .dep p{margin:0;font-size:.75rem;line-height:1.4}
@media(max-width:860px){.zone-grid .deps{grid-template-columns:1fr!important}.zone-grid .dep p{font-size:.8125rem}}
/* ======== tuiles : survol homogene ======== */
.films>div,.admin>div,.mat>div,.presta,.dep,.duo figure,.scope>div,.niveaux>div{
  transition:background-color .25s ease,box-shadow .25s ease,transform .25s cubic-bezier(.22,.7,.3,1)}
@media (hover:hover){
  /* boites bordees : leger soulevement */
  .admin>div:hover,.duo figure:hover,.niveaux>div:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(28,49,94,.11)}
  /* grilles a filet de 1px : pas de soulevement, on teinte et on accentue */
  .films>div:hover{background:var(--verre);box-shadow:inset 0 3px 0 var(--jaune)}
  .dep:hover{box-shadow:inset 4px 0 0 var(--jaune)}
  /* blocs sans bordure : accent lateral */
  .mat>div:hover,.presta:hover{box-shadow:inset -3px 0 0 var(--jaune)}
  .mat>div,.presta{padding-right:1.1rem}
  .scope>div:hover h3{border-bottom-color:var(--jaune)}
}
/* ======== apparition au defilement ======== */
body.anim [data-rev]{opacity:0;transform:translateX(-18px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.22,.7,.3,1)}
body.anim [data-rev].vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  body.anim [data-rev]{opacity:1!important;transform:none!important;transition:none!important}}
.zone-grid .dep.main{background:#fff}
@media (hover:hover){.zone-grid .dep.main:hover{background:#fff;box-shadow:inset 4px 0 0 var(--jaune)}}
/* ---- blocs perimetre en tuiles ---- */
.scope>div{background:#fff;border:1px solid var(--rule);border-radius:var(--r);padding:clamp(1.3rem,2.2vw,1.9rem)}
.sec-verre .scope>div{background:#fff}
.scope h3{margin-top:0}
@media (hover:hover){.scope>div:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(28,49,94,.11)}}
/* ---- survol identique sur les 4 tuiles de departement ---- */
@media (hover:hover){
  .zone-grid .dep:hover,.zone-grid .dep.main:hover,
  .zone-grid .dep.survol,.zone-grid .dep.main.survol{background:#fff;box-shadow:inset 4px 0 0 var(--jaune)}
}
/* ---- plus aucun contour jaune sur la carte ---- */
.dep-halo{display:none}
/* ---- zone d'intervention : tuiles compactes, survol bleu ---- */
/* le survol d'une tuile colore le département en bleu, sans contour jaune */
.dep-g.survol .dep-halo,.dep-g.on .dep-halo{animation:none;opacity:0}
/* ---- additions propres a la page sous-traitance ---- */
.fil{background:var(--verre);border-bottom:1px solid var(--rule);font-size:.875rem}
.fil ol{max-width:var(--max);margin-inline:auto;padding:.7rem var(--pad);list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;color:var(--gris)}
.fil li+li::before{content:"›";margin-right:.45rem;color:var(--rule)}
.fil a{color:var(--bleu)}
.hero-st{background:var(--marine);color:#fff}
.hero-st .hero-in{grid-template-columns:1fr;gap:1.5rem}
@media(min-width:1000px){.hero-st .hero-in{grid-template-columns:1.15fr .85fr;align-items:start}}
.hero-st h1{font-size:clamp(2rem,3.6vw,3.1rem);line-height:1.06;letter-spacing:-.025em;max-width:22ch;font-family:var(--display);font-weight:700}
.scope{display:grid;grid-template-columns:1fr;gap:clamp(1.75rem,3vw,3rem);margin-top:clamp(2rem,3vw,2.75rem)}
@media(min-width:860px){.scope{grid-template-columns:1fr 1fr}}
.scope h3{font-family:var(--display);font-size:1.0625rem;letter-spacing:.02em;text-transform:uppercase;padding-bottom:.7rem;border-bottom:2px solid var(--rule)}
.scope ul{list-style:none;margin-top:1.1rem;display:grid;gap:.7rem}
.scope li{padding-left:1.85rem;position:relative;color:var(--gris)}
.scope li::before{position:absolute;left:0;top:-.08em;font-size:1.1rem;line-height:1.5}
.scope .oui li::before{content:"✓";color:var(--bleu);font-weight:700}
.scope .non li::before{content:"";width:.72rem;height:.72rem;left:.15rem;top:.46rem;font-size:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 1.5l9 9m0-9l-9 9' stroke='%233778AD' stroke-width='1.9' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") no-repeat center/contain}
.etapes{counter-reset:e;list-style:none;display:grid;gap:1.4rem;margin-top:clamp(2rem,3vw,2.75rem)}
@media(min-width:900px){.etapes{grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,2.5vw,2.5rem)}}
.etapes li{counter-increment:e;padding-top:2.9rem;position:relative}
.etapes li::before{content:counter(e,decimal-leading-zero);position:absolute;top:0;left:0;font-family:var(--display);font-weight:700;font-size:1.5rem;color:var(--jaune);line-height:1}
.etapes li::after{content:"";position:absolute;top:2.1rem;left:0;width:2.1rem;height:2px;background:var(--rule)}
.etapes b{display:block;font-family:var(--display);font-size:1.0625rem;margin-bottom:.4rem}
.etapes span{color:var(--gris);font-size:.9375rem}
.sec-marine .etapes span{color:#cfdaea}
.sec-marine .etapes li::after{background:rgba(255,255,255,.2)}
.admin{display:grid;grid-template-columns:1fr;gap:1.6rem;margin-top:clamp(2rem,3vw,2.75rem)}
@media(min-width:760px){.admin{grid-template-columns:1fr 1fr}}
.admin>div{background:#fff;border:1px solid var(--rule);border-radius:var(--r);padding:clamp(1.3rem,2vw,1.75rem)}
.admin h3{font-family:var(--display);font-size:1.0625rem;margin-bottom:.55rem}
.admin p{color:var(--gris);font-size:.9375rem}
.rappel{margin-top:1.75rem;padding:1.1rem 1.3rem;border-left:3px solid var(--jaune);background:rgba(237,217,101,.1);font-size:.9375rem;color:var(--gris);border-radius:0 var(--r) var(--r) 0}
@media(min-width:760px){}
.fin{text-align:center;max-width:46ch;margin-inline:auto}
.fin .cta{justify-content:center}
/* ---- page releve de cotes ---- */
.plan-box{margin-top:clamp(2rem,3vw,2.75rem);background:#fff;border:1px solid var(--rule);border-radius:var(--r);padding:clamp(1rem,2.5vw,2rem)}
.plan{width:100%;height:auto;display:block}
.plan .mur rect,.plan .mur line{fill:none;stroke:var(--marine);stroke-width:3;stroke-linecap:square}
.plan .verre rect{fill:rgba(55,120,173,.09);stroke:none}
.plan .poignee rect{fill:var(--marine)}
.plan .sol line{stroke:var(--marine);stroke-width:2.4}
.plan .sol .hach{stroke-width:1.2;stroke:var(--gris)}
.plan .attache line{stroke:var(--gris);stroke-width:.8;stroke-dasharray:3 3}
.plan .cote line{stroke:var(--bleu);stroke-width:1.3}
.plan .cote .tick{stroke-width:1.6}
.plan .cote text{fill:var(--bleu);font-family:var(--texte);font-weight:600;font-size:15px;text-anchor:middle}
.plan .diag line{stroke:var(--bleu);stroke-width:1;stroke-dasharray:5 4;opacity:.7}
.plan .diag text{fill:var(--bleu);font-family:var(--texte);font-weight:600;font-size:13px;text-anchor:middle;opacity:.8}
.plan .note circle{fill:none;stroke:var(--jaune);stroke-width:2.5}
.plan .note line{stroke:var(--jaune);stroke-width:2}
.plan .note text{fill:var(--marine);font-family:var(--texte);font-weight:600;font-size:14px}
.plan-leg{margin-top:1rem;font-size:.875rem;color:var(--gris);text-align:center}
.niveaux{display:grid;grid-template-columns:1fr;gap:clamp(1.25rem,2.5vw,2rem);margin-top:clamp(2rem,3vw,2.75rem)}
@media(min-width:860px){.niveaux{grid-template-columns:1fr 1fr}}
.niveaux>div{background:#fff;border:1px solid var(--rule);border-radius:var(--r);padding:clamp(1.3rem,2.2vw,1.9rem)}
.niveaux .et{font-family:var(--display);font-weight:700;font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bleu)}
.niveaux h3{font-family:var(--display);font-size:1.1875rem;margin:.5rem 0 .6rem}
.niveaux p{color:var(--gris);font-size:.9375rem}
@media (hover:hover){.niveaux>div:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(28,49,94,.11)}}
.niveaux>div{transition:transform .25s cubic-bezier(.22,.7,.3,1),box-shadow .25s ease}

/* ======== regles propres a certaines pages ======== */
/* ---------- portrait a propos ---------- */
.portrait{margin:0;display:flex;flex-direction:column;align-items:center;gap:.9rem}
.portrait img{width:180px;height:180px;border-radius:50%;object-fit:cover;display:block;
  border:4px solid rgba(255,255,255,.16);box-shadow:0 14px 34px rgba(0,0,0,.28)}
.portrait figcaption{font-size:.875rem;color:#cfdaea;text-align:center;max-width:26ch;line-height:1.5}
.portrait figcaption b{display:block;font-family:var(--display);font-weight:700;color:#fff;
  font-size:1rem;margin-bottom:.15rem}
/* ---- pages legales ---- */
.legal{max-width:74ch}
.legal h1{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,3.2vw,2.7rem);line-height:1.08;letter-spacing:-.025em}
.legal h2{font-size:clamp(1.15rem,1.9vw,1.4rem);margin:clamp(2.25rem,3.5vw,3rem) 0 .85rem;padding-bottom:.5rem;border-bottom:2px solid var(--rule);max-width:none}
.legal p{color:var(--gris);margin-bottom:.85rem}
.legal p.sub{margin-top:.9rem}
.legal a{color:var(--bleu)}
.ident{margin:.4rem 0 1rem;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--rule);display:grid;gap:1px}
.ident>div{background:#fff;display:grid;grid-template-columns:1fr;gap:.15rem;padding:.7rem 1rem}
@media(min-width:620px){.ident>div{grid-template-columns:15rem 1fr;gap:1rem;align-items:baseline}}
.ident dt{font-family:var(--display);font-weight:700;font-size:.875rem;color:var(--marine)}
.ident dd{margin:0;color:var(--gris);font-size:.9375rem}
@media (hover:hover){.ident>div:hover{background:var(--verre)}}
.ident>div{transition:background-color .2s ease}
.legal p.tofill{display:block;padding:.9rem 1.1rem;border-radius:var(--r)}
.maj{margin-top:clamp(2.5rem,4vw,3.5rem);padding-top:1.2rem;border-top:1px solid var(--rule);font-size:.875rem}
.mat{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-top:2rem}
@media(min-width:760px){.mat{grid-template-columns:1fr 1fr 1fr}}
.mat h3{font-family:var(--display);font-size:1rem;margin-bottom:.5rem}
.mat p{color:var(--gris);font-size:.9375rem}
/* ---- page vitrine ---- */
.films{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;margin-top:clamp(2rem,3vw,2.75rem)}
@media(min-width:720px){.films{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.films{grid-template-columns:repeat(3,1fr)}}
.films>div{background:#fff;padding:clamp(1.3rem,2.2vw,1.9rem)}
.films h3{font-family:var(--display);font-size:1.0625rem;margin-bottom:.5rem}
.films p{color:var(--gris);font-size:.9375rem}
@media(min-width:860px){}
.sec-marine .sec-marine 

/* ======== TUILES — composant unique, identique sur tout le site ======== */
.films,.grid4,.niveaux,.scope,.tuiles{
  display:grid;grid-template-columns:1fr;gap:clamp(1rem,1.6vw,1.4rem);
  margin-top:clamp(2rem,3vw,2.75rem);background:none;border:0;overflow:visible}

/* ======== TUILES — composant unique, identique sur tout le site ======== */
.films,.grid4,.niveaux,.scope,.tuiles{
  display:grid;grid-template-columns:1fr;gap:clamp(1rem,1.6vw,1.4rem);
  margin-top:clamp(2rem,3vw,2.75rem);background:none;border:0;overflow:visible}
@media(min-width:640px){
  .films,.grid4,.niveaux,.scope,.tuiles{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){
  .films,.grid4,.niveaux,.tuiles{grid-template-columns:repeat(3,1fr)}
  .scope,.films.t2,.grid4.t2,.tuiles.t2{grid-template-columns:repeat(2,1fr)}
  .films.t3,.grid4.t3,.tuiles.t3{grid-template-columns:repeat(3,1fr)}
  .films.t4,.grid4.t4,.tuiles.t4{grid-template-columns:repeat(4,1fr)}}
/* la tuile, partout la meme */
.films>div,.grid4>article,.grid4>div,.niveaux>div,.scope>div,.tuiles>div,.etapes li,.engage li,.presta-bl{
  background:#fff;border:1px solid var(--rule);border-radius:var(--r);
  padding:clamp(1.2rem,2vw,1.7rem);margin:0;
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s cubic-bezier(.22,.7,.3,1)}
.films h3,.grid4 h3,.niveaux h3,.scope h3,.tuiles h3,.etapes b,.engage b,.presta-bl h3{
  display:block;margin:0;color:var(--marine);font-family:var(--display);font-weight:700;
  font-size:1.0625rem;letter-spacing:.02em;text-transform:uppercase;line-height:1.3;
  padding-bottom:.7rem;border-bottom:2px solid var(--rule)}
.films h3 a,.grid4 h3 a,.niveaux h3 a,.presta-bl h3 a{text-decoration:none;color:inherit}
.films>div>p,.grid4>article>p,.grid4>div>p,.niveaux p,.tuiles>div>p,.etapes span,.engage span,.presta-bl>p{
  display:block;margin-top:1rem;color:var(--gris);font-size:.9375rem}
.grid4 .tick,.presta-bl .tick{display:none}
.niveaux .et{display:block;margin-bottom:.5rem}
/* survol : contour jaune, leger soulevement, ombre portee */
@media (hover:hover){
  .films>div:hover,.grid4>article:hover,.grid4>div:hover,.niveaux>div:hover,.scope>div:hover,
  .tuiles>div:hover,.etapes li:hover,.engage li:hover,.presta-bl:hover{
    border-color:var(--jaune);transform:translateY(-3px);
    box-shadow:0 12px 28px rgba(28,49,94,.13)}}
/* toute tuile posee sur du marine : transparence */
.sec-marine .films>div,.sec-marine .grid4>article,.sec-marine .grid4>div,.sec-marine .niveaux>div,
.sec-marine .scope>div,.sec-marine .tuiles>div,.sec-marine .etapes li,.engage li{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22)}
.sec-marine .films h3,.sec-marine .grid4 h3,.sec-marine .niveaux h3,.sec-marine .scope h3,
.sec-marine .tuiles h3,.sec-marine .etapes b,.engage b{
  color:var(--jaune);border-bottom-color:rgba(255,255,255,.2)}
.engage b{font-size:.9375rem}
.sec-marine .films>div>p,.sec-marine .grid4>article>p,.sec-marine .grid4>div>p,
.sec-marine .niveaux p,.sec-marine .tuiles>div>p,.sec-marine .etapes span,
.sec-marine .scope li,.engage span{color:#dfe6f0}
.sec-marine .scope li::before{color:var(--jaune)}
@media (hover:hover){
  .sec-marine .films>div:hover,.sec-marine .grid4>article:hover,.sec-marine .grid4>div:hover,
  .sec-marine .niveaux>div:hover,.sec-marine .scope>div:hover,.sec-marine .tuiles>div:hover,
  .sec-marine .etapes li:hover,.engage li:hover{
    border-color:var(--jaune);box-shadow:0 14px 30px rgba(0,0,0,.3)}}
/* tuiles de heros et de bandeaux marine */
.engage{display:grid;grid-template-columns:1fr;gap:clamp(.9rem,1.4vw,1.15rem);
  margin:clamp(2rem,3.5vw,3rem) 0 0;padding:0;list-style:none}
@media(min-width:860px){
  .engage{grid-template-columns:repeat(2,1fr);column-gap:clamp(.9rem,1.4vw,1.15rem)}
  .engage.e3{grid-template-columns:1fr}}
/* ======== ETAPES — tuiles separees par un chevron jaune ======== */
.etapes{--g:clamp(1.7rem,2.6vw,2.4rem);counter-reset:none;list-style:none;
  display:grid;grid-template-columns:1fr;gap:var(--g);margin-top:clamp(2rem,3vw,2.75rem)}
@media(min-width:900px){
  .etapes{grid-template-columns:repeat(4,1fr)}
  .etapes.e2{grid-template-columns:repeat(2,1fr)}
  .etapes.e3{grid-template-columns:repeat(3,1fr)}}
.etapes li{position:relative;counter-increment:none}
.etapes li::before{content:none}
.etapes li::after{content:"";position:absolute;width:14px;height:24px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 22' fill='none' stroke='%23EDD965' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l10 10L1 21'/%3E%3C/svg%3E") center/contain no-repeat;pointer-events:none;
  right:auto;left:50%;top:auto;bottom:calc(-1 * var(--g) / 2 - 12px);
  transform:translateX(-50%) rotate(90deg)}
.etapes li:last-child::after{content:none}
.sec-marine .etapes li::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 22' fill='none' stroke='%23EDD965' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l10 10L1 21'/%3E%3C/svg%3E") center/contain no-repeat}
.sec-marine .etapes li:last-child::after{background:none}
@media(min-width:900px){
  .etapes li::after{left:auto;bottom:auto;right:calc(-1 * var(--g) / 2 - 7px);
    top:50%;transform:translateY(-50%)}
  .etapes.e2 li:nth-child(2n)::after,.etapes.e3 li:nth-child(3n)::after{content:none}}

/* ======== formulaire : pot de miel et message d'etat ======== */
.pot{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}
.form-msg{margin:1rem 0 0;padding:.85rem 1.1rem;border-radius:var(--r);font-size:.9375rem;
  border-left:3px solid var(--rule);background:var(--verre);color:var(--gris)}
.form-msg.ok{border-left-color:var(--bleu);background:rgba(55,120,173,.08);color:var(--marine)}
.form-msg.bad{border-left-color:var(--jaune);background:rgba(237,217,101,.14);color:var(--marine)}
.submit[disabled]{opacity:.6;cursor:progress}

/* champ en defaut dans le formulaire */
.form .field.err input,.form .field.err select,.form .field.err textarea{
  border-color:var(--jaune);box-shadow:0 0 0 3px rgba(237,217,101,.28)}
.form .field.err label{color:var(--marine);font-weight:600}

/* ======== tuile BeeLive Studio : meme composant, pleine largeur sous la grille ======== */
.presta-bl{margin-top:clamp(1rem,1.6vw,1.4rem)}
/* ======== tuiles cliquables en entier ======== */
.presta,.presta-bl{position:relative}
.presta h3 a::after,.presta-bl h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.presta,.presta-bl{cursor:pointer}
.presta:has(a:focus-visible),.presta-bl:has(a:focus-visible){outline:2px solid var(--bleu);outline-offset:3px}
.presta h3 a:focus-visible,.presta-bl h3 a:focus-visible{outline:none}