:root{
--t-cuivre:url("/assets/texture-cuivre.svg");
--t-beton:url("/assets/texture-beton.svg");
--t-eau:url("/assets/texture-eau.svg");
--t-pierre:url("/assets/texture-pierre.svg")}


*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

body{margin:0;background:#0E0E0E;color:#F5F5F5;
font:400 17px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
Helvetica,Arial,sans-serif;
-webkit-font-smoothing:antialiased}

h1,h2,h3,.serif{font-family:"Iowan Old Style","Palatino Linotype",Palatino,
Georgia,"Times New Roman",serif;font-weight:400;line-height:1.15;
letter-spacing:-.015em}
h1{font-size:clamp(2.4rem,6vw,4.2rem);margin:0 0 .35em}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem);margin:0 0 .6em}
h3{font-size:1.28rem;margin:0 0 .5em}
p,li{max-width:62ch}
img{max-width:100%;height:auto;display:block}
/* Texte réservé aux lecteurs d'écran et aux moteurs : le logo porte
   l'identité visuelle, mais un lien doit garder un intitulé lisible. */
.hors-ecran{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
picture{display:block}
.illus img{width:100%;border:1px solid rgba(245,245,245,.14)}
.centre{text-align:center}
.centre p,.centre li{margin-left:auto;margin-right:auto}
a{color:#4A9EDB;text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{color:#6BB6E8}
:focus-visible{outline:2px solid #4A9EDB;outline-offset:3px}

.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.etroit{max-width:780px}

/* --- En-tête en surimpression sur le hero --- */
/* L'en-tête est en surimpression sur la photo : sans fond, le logo et la
   navigation tombaient à 1,19:1 sur les zones claires de l'image, très en
   dessous du seuil AA de 4,5:1. Un dégradé sombre derrière la bande garantit
   la lisibilité quelle que soit la photo, sans masquer l'image. */
.entete{position:absolute;top:0;left:0;right:0;z-index:20;padding:22px 0}
.entete::before{content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(180deg,rgba(8,8,8,.88) 0%,rgba(8,8,8,.62) 55%,
rgba(8,8,8,0) 100%);pointer-events:none}
.entete .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.marque{display:inline-flex;align-items:center;gap:13px;text-decoration:none;
color:#F5F5F5;text-align:left;min-height:44px}
.marque img{width:76px;height:76px;display:block;flex:none}
.marque b{font-family:"Iowan Old Style",Georgia,serif;font-weight:400;
font-size:1.16rem;letter-spacing:.02em;display:block;line-height:1.2}
.marque span{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
color:#A8A8A8;display:block;margin-top:2px;white-space:nowrap}

.nav-bureau ul{list-style:none;display:flex;gap:20px;margin:0;padding:0;
flex-wrap:nowrap}
.nav-bureau a{color:#F5F5F5;text-decoration:none;font-size:.86rem;
letter-spacing:.02em;padding:10px 0;display:inline-block;min-height:44px;
position:relative;white-space:nowrap}
.nav-bureau a::after{content:"";position:absolute;left:0;right:100%;bottom:6px;
height:1px;background:#4A9EDB;transition:right .28s ease}
.nav-bureau a:hover::after,.nav-bureau a[aria-current="page"]::after{right:0}

/* Menu mobile : <details>, fonctionnel sans JavaScript. */
.menu{display:none;position:relative}
/* Trois traits fins, sans cadre ni libellé : le pictogramme est compris
   sans texte, et l'en-tête reste dominé par le nom de l'entreprise.
   La zone cliquable fait 44 px malgré un dessin de 22 px, via le padding. */
.menu>summary{list-style:none;cursor:pointer;width:44px;height:44px;
display:flex;flex-direction:column;justify-content:center;align-items:flex-end;
gap:6px;font-size:0;-webkit-tap-highlight-color:transparent}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary::before,.menu>summary::after{content:"";display:block;
width:24px;height:1px;background:#F5F5F5;
transition:transform .28s ease,width .28s ease,opacity .2s ease}
.menu>summary .barre{display:block;width:16px;height:1px;background:#F5F5F5;
transition:opacity .2s ease,width .28s ease}
.menu>summary:hover .barre{width:24px}
/* À l'ouverture, les deux traits extérieurs forment une croix et celui du
   milieu disparaît : l'état ouvert se lit sans libellé. */
.menu[open]>summary::before{transform:translateY(3.5px) rotate(45deg);width:22px}
.menu[open]>summary::after{transform:translateY(-3.5px) rotate(-45deg);width:22px}
.menu[open]>summary .barre{opacity:0;width:0}
.menu nav{position:absolute;right:0;top:calc(100% + 14px);min-width:248px;
background:#141414;border:1px solid rgba(245,245,245,.12);padding:8px 0;
box-shadow:0 26px 70px rgba(0,0,0,.72)}
.menu nav ul{list-style:none;margin:0;padding:0}
.menu nav a{display:flex;align-items:center;padding:12px 26px;color:#C2C2C2;
text-decoration:none;font-size:.95rem;min-height:44px;
border-left:2px solid transparent;transition:border-color .2s,color .2s}
.menu nav a:hover,.menu nav a[aria-current="page"]{border-left-color:#4A9EDB;
color:#FFFFFF;background:rgba(74,158,219,.08)}

/* --- Hero --- */
.hero{position:relative;min-height:min(92vh,860px);display:flex;
align-items:flex-end;overflow:hidden;background:#0E0E0E}
.hero-fond{position:absolute;inset:0;background-size:cover;
background-position:center;opacity:.62}
.hero-photo{position:absolute;inset:0;display:block}
.hero-video{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;opacity:.9;background:#000}
/* Le mouvement est retiré si le système le demande : l'affiche suffit. */
@media (prefers-reduced-motion:reduce){.hero-video{display:none}}
.hero-photo img{width:100%;height:100%;object-fit:cover;
object-position:center center;opacity:.95}
/* Le voile protège la lisibilité du texte sans effacer la photo.
   Il est concentré derrière le bloc de texte, en bas, et reste léger en
   haut où il n'y a rien à lire. Un voile uniformément opaque rendait
   l'image indistincte d'un aplat noir. */
.hero-voile{position:absolute;inset:0;
background:linear-gradient(180deg,rgba(12,12,12,.5) 0%,rgba(12,12,12,.12) 22%,
rgba(12,12,12,.5) 48%,rgba(12,12,12,.78) 74%,rgba(12,12,12,.92) 100%)}
.hero{text-align:center}
.hero .wrap{position:relative;z-index:5;padding-top:170px;padding-bottom:82px}
.hero-texte{max-width:860px;margin:0 auto}
.surtitre{font-size:.79rem;letter-spacing:.24em;text-transform:uppercase;
color:#8CC4EA;margin:0 0 26px;display:flex;align-items:center;gap:15px;
justify-content:center}
/* Le surtitre passe souvent sur une zone claire de la photo : un fond
   translucide lui garantit sa lisibilité sans encadrer visuellement. */
/* Le texte du bandeau passe sur des photos aux luminosités variables.
   Une ombre portée dense le détache sans dessiner de rectangle, ce que
   faisait le fond opaque précédent. */
.hero .surtitre{text-shadow:0 1px 3px rgba(0,0,0,.95),0 2px 12px rgba(0,0,0,.8);
width:fit-content;margin-left:auto;margin-right:auto}
.hero h1{text-shadow:0 2px 5px rgba(0,0,0,.9),0 4px 26px rgba(0,0,0,.75)}
.hero-chapeau{text-shadow:0 1px 4px rgba(0,0,0,.9),0 2px 16px rgba(0,0,0,.7)}
.surtitre::before,.surtitre::after{content:"";width:46px;height:1px;
background:#4A9EDB;flex:none}
.hero h1{color:#F5F5F5}
.hero h1 em{font-style:italic;color:#8CC4EA}
.hero-chapeau{font-size:clamp(1.05rem,1.9vw,1.28rem);color:#D0D0D0;
max-width:56ch;margin:0 auto 38px}

.actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.btn{display:inline-flex;align-items:center;gap:11px;padding:16px 30px;
min-height:44px;text-decoration:none;font-size:.97rem;letter-spacing:.03em;
border:1px solid transparent;transition:background .22s,color .22s,border-color .22s}
.btn-plein{background:#4A9EDB;color:#08131C;font-weight:600}
.btn-plein:hover{background:#6BB6E8;color:#08131C}
.btn-ligne{border-color:rgba(245,245,245,.4);color:#F5F5F5}
.btn-ligne:hover{border-color:#4A9EDB;color:#4A9EDB;background:rgba(74,158,219,.1)}

/* --- Bandes de contenu --- */
.bande{padding:96px 0;border-top:1px solid rgba(245,245,245,.09)}
.bande.claire{background:#151515}
/* Section claire : le fond passe en ivoire, et tous les textes basculent
   sur leurs équivalents sombres. Sans ce basculement complet, on obtient
   du texte clair sur fond clair. */
.bande.jour{background:#F5F3F0;color:#14161A}
.bande.jour h2,.bande.jour h3{color:#14161A}
.bande.jour p,.bande.jour li{color:#4A4F57}
.bande.jour .surtitre{color:#1B5B87}
.bande.jour .surtitre::before,.bande.jour .surtitre::after{background:#9AA0A8}
.bande.jour a{color:#1B5B87}
.bande.jour a:hover{color:#0F4266}
.bande.jour ul.liste li{border-bottom-color:rgba(20,22,26,.12)}
.bande.jour .bande-titre p{color:#4A4F57}
.bande.jour table.legal th{color:#4A4F57}
.bande.jour table.legal th,.bande.jour table.legal td{
border-bottom-color:rgba(20,22,26,.12)}
.bande.jour .note{background:#EAE7E2;border-color:rgba(27,91,135,.35)}
.bande.jour .note p{color:#14161A}
.bande.jour .btn-ligne{border-color:rgba(20,22,26,.3);color:#14161A}
.bande.jour .btn-ligne:hover{border-color:#1B5B87;color:#1B5B87;
background:rgba(27,91,135,.07)}
.bande.jour dl.faq dt{color:#14161A;border-top-color:rgba(20,22,26,.12)}
.bande.jour dl.faq dd{color:#4A4F57}
.bande.jour .preuves{background:rgba(20,22,26,.12);
border-color:rgba(20,22,26,.12)}
.bande.jour .preuve{background:#F5F3F0}
.bande.jour .preuve b{color:#1B5B87}
.bande.jour .preuve span{color:#4A4F57}
.bande.jour figure.illus-article figcaption{color:#4A4F57}
.bande-titre{max-width:none;margin:0 auto 56px;text-align:center;
display:flex;flex-direction:column;align-items:center}
.bande-titre h2{max-width:24ch}
.bande-titre p{max-width:64ch}
.bande-titre .surtitre{margin-bottom:18px}
.bande-titre p{color:#A8A8A8;font-size:1.06rem;margin:.7em 0 0}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:76px;align-items:center;
text-align:center}
.duo-visuel{aspect-ratio:4/3;background-size:cover;background-position:center;
border:1px solid rgba(255,255,255,.3);background-color:#1C1C1C;
box-shadow:0 24px 70px rgba(0,0,0,.5)}

/* --- Cartes de service --- */
.cartes{display:grid;gap:26px;grid-template-columns:repeat(3,1fr)}
/* Quatre cartes se répartissent en 2×2 plutôt que 3 + 1 orpheline.
   :has() est largement supporté ; le repli auto-fit ci-dessous couvre
   les navigateurs qui l'ignorent encore. */
.cartes:has(> :nth-child(4)):not(:has(> :nth-child(5))){
grid-template-columns:repeat(2,1fr)}
@supports not selector(:has(*)){
  .cartes{grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
}
.carte{position:relative;display:flex;flex-direction:column;min-height:380px;
padding:34px;text-decoration:none;color:#F5F5F5;overflow:hidden;text-align:center;
align-items:center;
border:1px solid rgba(245,245,245,.13);background:#151515;isolation:isolate}
.carte-fond{position:absolute;inset:0;background-size:cover;
background-position:center;opacity:1;z-index:-2;transition:transform .5s ease}
/* Le dégradé ne masque plus l'image : il s'installe sous le texte, en bas,
   là où la lisibilité l'exige. Le haut de la photo reste net. */
.carte::before{content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(180deg,rgba(10,10,10,0) 0%,rgba(10,10,10,.15) 32%,
rgba(10,10,10,.78) 68%,rgba(10,10,10,.94) 100%)}
.carte:hover{border-color:rgba(74,158,219,.55)}
.carte:hover .carte-fond{transform:scale(1.05)}
.carte-num{font-size:.75rem;letter-spacing:.2em;color:#4A9EDB;margin-bottom:auto}
.carte h3{margin:26px 0 10px}
.carte p{color:#C2C2C2;font-size:.96rem;margin:0 0 18px;max-width:34ch}
.carte-lien{font-size:.88rem;letter-spacing:.09em;text-transform:uppercase;
color:#4A9EDB;display:inline-flex;align-items:center;gap:9px}
.carte:hover .carte-lien{color:#FFFFFF}

/* --- Chiffres de confiance --- */
.preuves{display:grid;gap:2px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
background:rgba(245,245,245,.1);border:1px solid rgba(245,245,245,.1)}
.preuve{background:#0E0E0E;padding:40px 30px;text-align:center}
.preuve b{display:block;font-family:"Iowan Old Style",Georgia,serif;
font-size:2.5rem;color:#4A9EDB;line-height:1;margin-bottom:12px;font-weight:400}
.preuve span{font-size:.87rem;color:#A8A8A8;letter-spacing:.05em}

ul.liste{list-style:none;padding:0;margin:0}
/* Les communes en grille : 32 entrées en colonne unique faisaient
   1900 px de haut. En quatre colonnes, la liste tient en un écran. */
/* Les quatre urgences les plus fréquentes, en grille : le visiteur
   reconnaît son problème sans lire un paragraphe. */
/* Carte de zone : SVG dessiné au build, aucune bibliothèque, aucun
   cookie tiers. Les couleurs suivent la palette du site. */
figure.carte-zone{margin:0 auto 40px;max-width:780px}
figure.carte-zone svg{width:100%;height:auto;display:block}
figure.carte-zone figcaption{margin-top:14px;font-size:.88rem;color:#A8A8A8;
text-align:center;max-width:58ch;margin-left:auto;margin-right:auto}
.carte-zone text{font:400 11px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",
Roboto,sans-serif;fill:#A8A8A8}
.carte-zone .c-rayon{fill:#8CC4EA;font-size:10.5px;letter-spacing:.1em;
text-anchor:middle}
.carte-zone .c-pres circle{fill:#8CC4EA}
.carte-zone .c-pres text{fill:#C2C2C2}
.carte-zone .c-loin circle{fill:#6E7268}
.carte-zone .c-siege circle{fill:#F5F5F5;stroke:#8CC4EA;stroke-width:2}
.carte-zone .c-siege text{fill:#F5F5F5;font-weight:600;font-size:12px}
.bande.jour figure.carte-zone figcaption{color:#4A4F57}
.bande.jour .carte-zone text{fill:#4A4F57}
.bande.jour .carte-zone .c-rayon{fill:#1B5B87}
.bande.jour .carte-zone .c-pres circle{fill:#1B5B87}
.bande.jour .carte-zone .c-pres text{fill:#14161A}
.bande.jour .carte-zone .c-loin circle{fill:#9AA0A8}
.bande.jour .carte-zone .c-siege circle{fill:#14161A;stroke:#1B5B87}
.bande.jour .carte-zone .c-siege text{fill:#14161A}

ul.urgences{list-style:none;padding:0;margin:0 auto;max-width:900px;
display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
ul.urgences li{border:1px solid rgba(245,245,245,.14);padding:22px 20px;
text-align:center;border-radius:2px}
ul.urgences b{display:block;font-family:var(--serif,Georgia,serif);
font-weight:400;font-size:1.16rem;margin-bottom:8px;color:#F5F5F5}
ul.urgences span{color:#A8A8A8;font-size:.92rem;line-height:1.5}
.bande.jour ul.urgences li{border-color:rgba(20,22,26,.16)}
.bande.jour ul.urgences b{color:#14161A}
.bande.jour ul.urgences span{color:#4A4F57}

ul.communes{list-style:none;padding:0;margin:0 auto 40px;
display:grid;gap:2px 26px;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
max-width:1000px}
ul.communes li{padding:11px 0;border-bottom:1px solid rgba(245,245,245,.09);
display:flex;justify-content:space-between;align-items:baseline;gap:12px;
font-size:.97rem}
ul.communes li span{color:#7E7E7E;font-size:.86rem;
font-variant-numeric:tabular-nums}
.bande.jour ul.communes li{border-bottom-color:rgba(20,22,26,.12)}
.bande.jour ul.communes li span{color:#6B7079}

ul.liste{max-width:520px;margin:0 auto}
ul.liste a{display:inline-flex;align-items:center;min-height:44px}
ul.liste li{padding:15px 0;position:relative;text-align:center;
border-bottom:1px solid rgba(74,158,219,.16)}

/* --- Avant / après : structure livrée, contenu en attente --- */
.avant-apres{display:grid;grid-template-columns:1fr 1fr;gap:3px;
background:rgba(255,255,255,.28);border:1px solid rgba(255,255,255,.28)}
.aa-volet{position:relative;aspect-ratio:4/3;background:#1C1C1C;
background-size:cover;background-position:center;
display:flex;align-items:flex-end;padding:18px}
.aa-volet b{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
background:#0E0E0E;color:#4A9EDB;padding:7px 14px;font-weight:600}

.note{border-top:1px solid rgba(74,158,219,.3);
border-bottom:1px solid rgba(74,158,219,.3);
background:#151515;padding:32px 34px;margin:40px auto;text-align:center;
max-width:640px}
.note p{margin:.45em 0}
.note p:first-child{margin-top:0}

/* Marqueur « À FOURNIR » : doit rester impossible à manquer en relecture. */
.a-fournir{display:inline-block;background:#242424;border:1px dashed #FFFFFF;
color:#F5F5F5;padding:12px 16px;font-size:.9rem;line-height:1.5}
.a-fournir strong{color:#FFFFFF;letter-spacing:.06em}
.a-fournir .fondement{display:block;font-size:.83rem;color:#B0B0B0;margin-top:5px}

dl.faq{margin:0}
/* Bande photo pleine largeur : casse la succession de blocs de texte et
   donne au regard un point de respiration. */
.bande-photo{position:relative;min-height:min(52vh,480px);display:flex;
align-items:center;justify-content:center;overflow:hidden;background:#0A0A0A}
.bande-photo img{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:center}
.bande-photo::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(10,10,10,.5) 0%,rgba(10,10,10,.32) 50%,
rgba(10,10,10,.6) 100%)}
.bande-photo .wrap{position:relative;z-index:2;text-align:center}
.bande-photo p{font-family:var(--serif,"Iowan Old Style",Georgia,serif);
font-size:clamp(1.5rem,3.6vw,2.4rem);line-height:1.3;color:#F5F5F5;
max-width:24ch;margin:0 auto;text-wrap:balance}
.bande-photo p em{font-style:italic;color:#8CC4EA}

/* Appel à l'action final : le numéro domine, tout le reste s'efface. */
.bande-cta{background:#0A0A0A;border-top:1px solid rgba(245,245,245,.1);
padding:86px 0;text-align:center}
.bande-cta .wrap{display:flex;flex-direction:column;align-items:center}
.cta-tel{font-family:var(--serif,Georgia,serif);
font-size:clamp(2.1rem,6vw,3.6rem);color:#F5F5F5;text-decoration:none;
letter-spacing:-.02em;line-height:1.15;margin:4px 0 20px;
/* Le soulignement est porté par le texte lui-même : il épouse les
   chiffres au lieu de dépasser comme le faisait une bordure de bloc. */
text-decoration:underline;text-decoration-color:rgba(140,196,234,.45);
text-decoration-thickness:2px;text-underline-offset:.16em;
white-space:nowrap}
.cta-tel:hover{color:#8CC4EA;text-decoration-color:#8CC4EA}
/* Trois informations pratiques en grille : un visiteur pressé les lit
   d'un coup d'œil, là où un paragraphe l'oblige à tout parcourir. */
.cta-infos{display:grid;gap:1px;
grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
background:rgba(245,245,245,.12);border:1px solid rgba(245,245,245,.12);
margin:8px auto 32px;max-width:720px;width:100%}
.cta-infos>div{background:#0A0A0A;padding:22px 20px;text-align:center}
.cta-infos dt{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
color:#8CC4EA;margin-bottom:9px}
.cta-infos dd{margin:0;color:#C2C2C2;font-size:.96rem;line-height:1.5}

.lien-suite{text-align:center;margin:38px auto 0;max-width:none}
.lien-suite a{font-size:.95rem;letter-spacing:.04em}

/* Les articles suivent le centrage du reste du site. La mesure de lecture
   reste contrainte : au-delà de ~65 caractères par ligne, l'œil perd le fil
   en revenant à la ligne. */
.article-corps{text-align:center}
.article-corps h2{text-align:center;max-width:26ch;margin-left:auto;
margin-right:auto}
.article-corps p{max-width:62ch;margin-left:auto;margin-right:auto;
text-align:center}
.article-corps ul.liste{margin-left:auto;margin-right:auto}

figure.illus-article{margin:38px 0;text-align:center}
figure.illus-article img{width:100%;border:1px solid rgba(245,245,245,.14)}
figure.illus-article figcaption{margin-top:12px;font-size:.88rem;
color:#A8A8A8;max-width:58ch;margin-left:auto;margin-right:auto}
dl.faq{text-align:center}
@media (min-width:900px){
  /* Deux colonnes : chaque question garde sa réponse sous elle grâce à
     break-inside, qui interdit la coupure au milieu d'une paire. */
  dl.faq{columns:2;column-gap:60px;text-align:center}
  dl.faq dt{break-after:avoid;margin-top:0;padding-top:0;border-top:0}
  dl.faq dd{break-inside:avoid;margin:.6em auto 36px;max-width:46ch;
  padding-bottom:2px}
  dl.faq dt:not(:first-child){margin-top:0}
}
dl.faq dt{font-family:"Iowan Old Style",Georgia,serif;font-size:1.2rem;
margin-top:34px;padding-top:26px;border-top:1px solid rgba(245,245,245,.09)}
dl.faq dt:first-child{border-top:0;padding-top:0;margin-top:0}
dl.faq dd{margin:.6em auto 0;color:#C2C2C2;max-width:62ch}

table.legal{border-collapse:collapse;width:100%;margin:1.4em 0;font-size:.96rem}
table.legal th,table.legal td{text-align:left;vertical-align:top;padding:15px 18px;
border-bottom:1px solid rgba(245,245,245,.11)}
table.legal a{display:inline-flex;align-items:center;min-height:44px}
table.legal th{width:33%;font-weight:600;color:#A8A8A8}

/* --- Barre d'action fixe, mobile --- */
.barre-fixe{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;
background:rgba(26,22,20,.97);border-top:1px solid rgba(255,255,255,.3);
backdrop-filter:blur(11px)}
.barre-fixe .wrap{display:flex;padding:0}
.barre-fixe a{flex:1;padding:14px 6px;text-align:center;text-decoration:none;
color:#F5F5F5;font-size:.72rem;letter-spacing:.05em;min-height:56px;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.barre-fixe a.majeur{background:#4A9EDB;color:#08131C;font-weight:600}
.barre-fixe svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6}

footer{border-top:1px solid rgba(245,245,245,.12);padding:76px 0 40px;
background:#0A0A0A}
.pied{display:grid;gap:46px;grid-template-columns:1.6fr 1fr 1fr 1fr;
margin-bottom:52px;text-align:center}
.pied-titre{font-size:.76rem;letter-spacing:.19em;text-transform:uppercase;
color:#4A9EDB;margin:0 0 20px;font-weight:600}
.pied ul{list-style:none;padding:0;margin:0}
/* Icônes des réseaux : 44 px de zone tactile pour un dessin de 20 px. */
ul.reseaux{display:flex;gap:6px;justify-content:center;margin-top:18px}
ul.reseaux li{margin:0}
ul.reseaux a{display:inline-flex;align-items:center;justify-content:center;
width:44px;height:44px;color:#A8A8A8;border:1px solid rgba(245,245,245,.14);
border-radius:2px;transition:color .2s,border-color .2s}
ul.reseaux a:hover{color:#8CC4EA;border-color:rgba(140,196,234,.5)}
ul.reseaux svg{width:19px;height:19px;fill:currentColor}
.pied>div{display:flex;flex-direction:column;align-items:center}
.pied li{margin-bottom:2px}
.pied a{color:#C2C2C2;text-decoration:none;font-size:.94rem;
display:inline-flex;align-items:center;min-height:44px;padding:2px 0}
.pied a:hover{color:#FFFFFF}
.pied-bas a{display:inline-block;padding:13px 4px;
/* La zone cliquable atteint 44 px par le padding, sans sortir le lien de
   la ligne de base comme le faisait inline-flex. */
line-height:1.3}
.pied-bas{border-top:1px solid rgba(245,245,245,.09);padding-top:14px;
font-size:.85rem;color:#7E7E7E;display:flex;flex-wrap:wrap;
gap:0 28px;justify-content:center;align-items:center;text-align:center}
.pied-bas span{display:inline-flex;align-items:center;flex-wrap:wrap;
justify-content:center;gap:0 6px}

@media (max-width:980px){
  .cartes,.cartes:has(> :nth-child(4)):not(:has(> :nth-child(5))){
  grid-template-columns:repeat(2,1fr)}
  .duo{grid-template-columns:1fr;gap:44px}
  .pied{grid-template-columns:1fr 1fr;gap:34px}
}
@media (max-width:1200px){
  .nav-bureau{display:none}
  .menu{display:block}
}
@media (max-width:620px){
  .cartes,.cartes:has(> :nth-child(4)):not(:has(> :nth-child(5))){
  grid-template-columns:1fr}
}
@media (max-width:560px){
  .pied{grid-template-columns:1fr;gap:34px}
  .marque span{display:none}
  .marque b{font-size:1rem}
  .marque img{width:58px;height:58px}
}
@media (max-width:760px){
  .wrap{padding:0 20px}
  .hero{min-height:auto}
  .hero .wrap{padding-top:132px;padding-bottom:56px}
  /* Sur mobile le cadre est plus haut que large : on remonte le point
     d'ancrage pour garder le sujet dans le champ. */
  .hero-photo img{object-position:center center}
  .bande{padding:66px 0}
  .barre-fixe{display:block}
  body{padding-bottom:56px}
  /* Deux colonnes maintenues : quatre blocs empilés font un pied
     interminable sur tablette. */
  .pied{grid-template-columns:1fr 1fr;gap:30px}
  .avant-apres{grid-template-columns:1fr}
}