:root{--bg:#F9F8F6;--tx:#111;--bd:#E5E2DC;--btn:#1A1A1A;--r:4px;--mut:#5d5a54}
*{box-sizing:border-box;box-shadow:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.6 Inter,Geist,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow-x:hidden}
img{max-width:100%}a{color:inherit}
h1,h2,h3{font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:1.05;margin:0 0 .5em}
h1{font-size:clamp(2.4rem,8vw,5.5rem);font-weight:900}h2{font-size:clamp(1.5rem,4vw,2.4rem);font-weight:300;letter-spacing:.04em}h3{font-size:1.1rem;font-weight:700}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px;position:relative;z-index:1}.narrow{max-width:720px}
.lead{font-size:1.15rem;color:var(--mut);max-width:60ch}.meta{font-size:.8rem;color:var(--mut);text-transform:uppercase;letter-spacing:.06em;margin:0 0 .6em}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:#fff;padding:8px;z-index:99}
:focus-visible{outline:2px solid var(--tx);outline-offset:2px}
/* header */
header{position:fixed;inset:0 0 auto 0;z-index:50;background:rgba(249,248,246,.8);backdrop-filter:blur(12px);border-bottom:1px solid var(--bd);transition:transform .35s ease}
header.hide{transform:translateY(-100%)}header.small .bar{height:56px}
.bar{display:flex;align-items:center;justify-content:space-between;height:72px;transition:height .3s}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;letter-spacing:.08em}.brand img{border-radius:var(--r);display:block}
nav{display:flex;gap:6px}nav a{padding:8px 12px;text-decoration:none;font-size:.9rem;border-radius:var(--r);transition:background .2s}
.burger{display:none;background:none;border:1px solid var(--bd);border-radius:var(--r);width:44px;height:44px;cursor:pointer;flex-direction:column;justify-content:center;gap:6px;padding:0 11px}
.burger span{height:2px;background:var(--tx);transition:transform .25s}
.burger[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}.burger[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}
/* sections */
main{padding-top:72px}.hero,.phead{position:relative;overflow:hidden}.hero{padding:clamp(48px,10vw,120px) 0 60px}.phead{padding:60px 0 20px}
.sec{padding:60px 0}.alt{background:#fff;border-block:1px solid var(--bd)}
.sechead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}.cta-center{text-align:center;margin-top:40px}
.visuals{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;margin-top:40px}
.ph{min-height:220px;border:1px solid var(--bd);border-radius:var(--r);display:flex;align-items:flex-end;padding:16px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.p1{background:rgba(224,122,95,.25)}.p2{background:rgba(61,90,128,.25)}.p3{background:rgba(129,178,154,.25)}
/* composants */
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--btn);color:#fff;padding:12px 20px;font:500 14px inherit;font-family:inherit;border:1px solid var(--btn);border-radius:var(--r);cursor:pointer;text-decoration:none;transition:background .2s}
.btn:hover{background:#333}.btn.ghost{background:transparent;color:var(--tx);border-color:var(--tx)}.btn.ghost:hover{background:#ecebe6}
.btn:disabled{opacity:.35;cursor:not-allowed}
.card{background:#fff;border:1px solid var(--bd);border-radius:var(--r);padding:24px}
.link{font-size:.9rem;font-weight:500;text-decoration:underline;text-underline-offset:4px}
.bubbles{position:absolute;inset:0;z-index:0;pointer-events:none}.b{position:absolute;border-radius:50%;filter:blur(50px)}
.bo{background:rgba(224,122,95,.25)}.bg{background:rgba(129,178,154,.25)}.bb{background:rgba(61,90,128,.25)}.by{background:rgba(242,204,143,.25)}
.b1{width:340px;height:340px;top:-80px;right:5%}.b2{width:260px;height:260px;top:40%;left:-60px}.b3{width:300px;height:300px;bottom:-100px;right:25%}.b4{width:200px;height:200px;top:10%;left:40%}
.steps{padding-left:20px}.steps li{margin-bottom:12px}
.tree .level{margin-bottom:56px}.row{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}.row .person{flex:1 1 180px;max-width:220px;text-align:center}
.tree .level+.level{border-top:1px solid var(--bd);padding-top:40px;position:relative}
.av{width:64px;height:64px;margin:0 auto 12px;border-radius:50%;background:rgba(61,90,128,.25);display:grid;place-items:center;font-weight:800;font-size:1.4rem}
.prose h2{font-size:1.2rem;font-weight:700;margin-top:2em}
/* formulaires */
.form{display:grid;gap:14px}.form label{display:grid;gap:6px;font-size:.9rem;font-weight:500}
.form input,.form select,.form textarea{font:inherit;padding:10px 12px;border:1px solid var(--bd);border-radius:var(--r);background:var(--bg);width:100%}
.form textarea{resize:vertical}.hp{position:absolute!important;left:-9999px}
.form .check{display:flex;gap:10px;align-items:flex-start}.form .check input{width:auto;margin-top:5px}
.count{margin:0;font-size:.8rem;color:var(--mut);text-align:right}.count.max{color:#b3402a;font-weight:600}.status{margin:0;font-size:.9rem}
/* chatbot */
.chat-fab{position:fixed;right:20px;bottom:20px;z-index:40;background:#fff;border:1px solid var(--tx);border-radius:18px 18px 4px 18px;padding:12px 18px;font:500 14px inherit;cursor:pointer}
.chat{position:fixed;right:20px;bottom:80px;z-index:45;width:min(380px,calc(100vw - 40px));background:#fff;border:1px solid var(--tx);border-radius:var(--r);overflow:hidden;animation:pop .3s ease}
.chat[hidden]{display:none}.chat-top{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--btn);color:#fff}
.chat-x{background:none;border:0;color:#fff;font-size:24px;cursor:pointer}.chat-body{padding:16px;max-height:60vh;overflow:auto}
.bot{background:var(--bg);border:1px solid var(--bd);padding:12px;border-radius:14px 14px 14px 2px;margin:0 0 12px;font-size:.9rem}
.chat iframe,.chatframe{width:100%;height:340px;border:1px solid var(--bd);border-radius:var(--r)}
details summary{cursor:pointer;font-weight:600;margin-bottom:12px}
/* footer */
footer{border-top:1px solid var(--bd);margin-top:40px;padding-top:48px;background:#fff}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px}.fgrid h3{font-size:.9rem;letter-spacing:.08em}
.soc{display:flex;gap:12px}.soc a{width:40px;height:40px;border:1px solid var(--bd);border-radius:var(--r);display:grid;place-items:center}
.soc svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--bd);margin-top:32px;padding-block:20px;font-size:.8rem;color:var(--mut)}.legal a{margin-right:14px}
/* loader */
#loader{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center;transition:opacity .5s,visibility .5s}
#loader.done{opacity:0;visibility:hidden}#loader b{font-size:1.6rem;letter-spacing:.12em;grid-area:1/1}
.orbit{grid-area:1/1;width:150px;height:150px;position:relative;animation:spin 3s linear infinite}
.orbit i{position:absolute;width:14px;height:14px;background:var(--btn);left:calc(50% - 7px);top:0;transform-origin:7px 75px; border-radius:50%;}
.orbit i:nth-child(2){transform:rotate(90deg);background:#E07A5F; border-radius:50%;}.orbit i:nth-child(3){transform:rotate(180deg);background:#81B29A; border-radius:50%;}.orbit i:nth-child(4){transform:rotate(270deg);background:#3D5A80; border-radius:50%;}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes pop{from{opacity:0;transform:translateY(10px)}}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s,transform .6s}.reveal.in{opacity:1;transform:none}
@media(max-width:820px){.burger{display:flex}nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--bg);border-bottom:1px solid var(--bd);padding:8px 20px 16px;display:none}
nav.open{display:flex}.visuals,.fgrid{grid-template-columns:1fr}.ph{min-height:120px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

#loader{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center;transition:opacity .5s,visibility .5s}
#loader.done{opacity:0;visibility:hidden}
#loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
#loader b{
  font-size: 1.8rem;
  letter-spacing: .12em;
  animation: pulse-logo 1.5s ease-in-out infinite;
}
.loader-orbit {
  width: 90px;
  height: 90px;
  border: 2px solid var(--bd);
  border-radius: 50%;
  position: relative;
  animation: pulse-ring 1.5s ease-in-out infinite;
}
.loader-orbit::after {
  content: '';
  position: absolute;
  inset: -6px;
  border: 2px solid transparent;
  border-top-color: var(--btn);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes pulse-logo {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.08); opacity: 1; }
}
@keyframes pulse-ring {
  0%, 100% { transform: scale(0.95); opacity: 0.4; }
  50% { transform: scale(1.05); opacity: 0.9; }
}

footer{
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 40px;
  padding-top: 48px;
  background: #111113; /* Le noir de l'asso */
  color: #F9F8F6;
}
footer h3 {
  color: #fff;
}
footer .soc a{
  border-color: rgba(255,255,255,0.2);
  color: #fff;
}
footer .soc a:hover {
  background: rgba(255,255,255,0.1);
}
footer .legal{
  border-top: 1px solid rgba(255,255,255,0.1);
  color: rgba(249,248,246,0.6);
}
footer .legal a {
  color: #fff;
}

/* --- SECTIONS ET LIGNES DE SÉPARATION --- */
.sec {
  padding: 60px 0;
  position: relative;
  border-bottom: 1px solid var(--bd); /* Ligne de séparation propre de 1px */
}

/* --- Ronds / Bulles d'ambiance visibles (Max 5 par section) --- */
.bubbles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.b {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.45; /* Rendu bien visible mais diffus */
}
.bo{background:rgba(224,122,95,.35)}
.bg{background:rgba(129,178,154,.35)}
.bb{background:rgba(61,90,128,.35)}
.by{background:rgba(242,204,143,.35)}

.hero, .phead,
section.sec {
  border-bottom: 1px solid var(--bd) !important;
  position: relative !important;
}

/* ========================================================================== */
/* CIBLAGE DES SECTIONS SEC ET ALT : CERCLAGE NET, CHAUD & ALÉATOIRE         */
/* ========================================================================== */

/* ========================================================================== */
/* FIX 4 CERCLES NETS PAR SECTION (GAUCHE, DROITE, CENTRE-DROIT, CENTRE-GAUCHE) */
/* ========================================================================== */

/* Isolation et z-index */
/* ========================================================================== */
/* VARIATIONS EN CSS PUR : POSITIONS & COULEURS PAR SÉRIES (PAIRE / IMPAIRE)  */
/* ========================================================================== */

/* Isolation et z-index */
section.sec {
  position: relative !important;
  overflow: hidden !important;
}

section.sec > .wrap {
  position: relative !important;
  z-index: 2 !important;
}

/* Base commune des 4 cercles */
section.sec::before,
section.sec::after,
section.sec > .wrap::before,
section.sec > .wrap::after {
  content: "" !important;
  position: absolute !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  filter: none !important;
  opacity: 0.4 !important;
}

section.sec::before,
section.sec::after {
  z-index: 1 !important;
}

section.sec > .wrap::before,
section.sec > .wrap::after {
  z-index: -1 !important;
}

/* ========================================================================== */
/* VARIATION A : SECTIONS IMPAIRES (1, 3, 5...)                              */
/* ========================================================================== */

/* Cercle 1 : Moyen - Haut Droite (Orange) */
section.sec:nth-of-type(odd)::before {
  width: 110px !important;
  height: 110px !important;
  top: 8% !important;
  right: -15px !important;
  border: 2px solid #E07A5F !important;
  background: rgba(224, 122, 95, 0.12) !important;
}

/* Cercle 2 : Petit - Bas Gauche (Bleu) */
section.sec:nth-of-type(odd)::after {
  width: 75px !important;
  height: 75px !important;
  bottom: 12% !important;
  left: 3% !important;
  border: 2px solid #3D5A80 !important;
  background: rgba(61, 90, 128, 0.12) !important;
}

/* Cercle 3 : Moyen - Milieu Centre-Droit (Vert) */
section.sec:nth-of-type(odd) > .wrap::before {
  width: 130px !important;
  height: 130px !important;
  top: 42% !important;
  right: 22% !important;
  border: 2px solid #81B29A !important;
  background: rgba(129, 178, 154, 0.12) !important;
}

/* Cercle 4 : Très Petit - Haut Centre-Gauche (Jaune) */
section.sec:nth-of-type(odd) > .wrap::after {
  width: 45px !important;
  height: 45px !important;
  top: 18% !important;
  left: 18% !important;
  border: 2px solid #F2CC8F !important;
  background: rgba(242, 204, 143, 0.15) !important;
}

/* ========================================================================== */
/* VARIATION B : SECTIONS PAIRES (2, 4, 6...)                                 */
/* ========================================================================== */

/* Cercle 1 : Petit - Milieu Gauche (Vert) */
section.sec:nth-of-type(even)::before {
  width: 80px !important;
  height: 80px !important;
  top: 30% !important;
  left: -10px !important;
  border: 2px solid #81B29A !important;
  background: rgba(129, 178, 154, 0.12) !important;
}

/* Cercle 2 : Moyen - Bas Droite (Jaune) */
section.sec:nth-of-type(even)::after {
  width: 120px !important;
  height: 120px !important;
  bottom: 5% !important;
  right: 8% !important;
  border: 2px solid #F2CC8F !important;
  background: rgba(242, 204, 143, 0.15) !important;
}

/* Cercle 3 : Très Petit - Haut Centre-Droit (Bleu) */
section.sec:nth-of-type(even) > .wrap::before {
  width: 50px !important;
  height: 50px !important;
  top: 10% !important;
  right: 32% !important;
  border: 2px solid #3D5A80 !important;
  background: rgba(61, 90, 128, 0.12) !important;
}

/* Cercle 4 : Moyen - Bas Centre-Gauche (Orange) */
section.sec:nth-of-type(even) > .wrap::after {
  width: 105px !important;
  height: 105px !important;
  bottom: 25% !important;
  left: 20% !important;
  border: 2px solid #E07A5F !important;
  background: rgba(224, 122, 95, 0.12) !important;
}

/* ========================================================================== */
/* 1. EFFET SOULIGNEMENT MARQUEUR / FEUTRE (NON DROIT & DYNAMIQUE)            */
/* ========================================================================== */

.marker {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

/* Trait de feutre généré avec un dégradé légèrement incliné (-1.5deg) */
.marker::after {
  content: "";
  position: absolute;
  left: -2%;
  bottom: 20px;
  width: 104%;
  height: 14px; /* Épaisseur du feutre */
  z-index: -1;
  border-radius: 4px 8px 3px 6px; /* Bords irréguliers style feutre */
  transform: rotate(-1.5deg) scaleX(0); /* Cache le trait au départ */
  transform-origin: left center;
  animation: strokeMarker 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards 0.3s;
  opacity: 0.85;
}

/* Variantes de couleur feutre/surligneur */
.marker.m-orange::after {
  background: rgba(180, 157, 91, 0.74); /* Coup de feutre orange */
}

.marker.m-green::after {
  background: rgba(129, 178, 154, 0.4); /* Coup de feutre vert avec pente inversée */
  transform: rotate(1.2deg) scaleX(0);
}

@keyframes strokeMarker {
  to {
    transform: rotate(-1.5deg) scaleX(1);
  }
}

/* Réglage spécifique pour la seconde ligne (Saint-Lô) */
.marker.m-green::after {
  animation-name: strokeMarkerAlt;
}

@keyframes strokeMarkerAlt {
  to {
    transform: rotate(1.2deg) scaleX(1);
  }
}


/* ========================================================================== */
/* 2. BRAISES FUMÉES GRISES AVEC FLOU ET REFLET                              */
/* ========================================================================== */
.marker {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  isolation: isolate; /* garde le trait derrière le texte, sans le perdre derrière le fond */
}

.marker::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -3%;
  width: 106%;
  bottom: .0em;
  height: .99em; /* épaisseur du feutre */
  filter: url(#rough);
  clip-path: inset(0 100% 0 0); /* trait caché au départ */
  animation: strokeMarker .9s cubic-bezier(.25, 1, .5, 1) .4s forwards;
}

/* Rayures du feutre : fines bandes un peu plus claires/foncées */
.marker.m-orange::after {
  transform: rotate(-1.2deg);
  background: repeating-linear-gradient(178deg,
    rgba(37, 189, 17, 0.767) 0 3px, rgba(131, 255, 48, 0.747) 3px 4px, rgba(224, 147, 95, 0.0) 4px 7px);
}
.marker.m-green::after {
  transform: rotate(1deg);
  background: repeating-linear-gradient(182deg,
    rgba(129,178,154,.70) 0 3px, rgba(129,178,154,.42) 3px 4px, rgba(129,178,154,.62) 4px 7px);
  animation-delay: .8s; /* le 2e trait part après le 1er */
}

@keyframes strokeMarker {
  to { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  .marker::after { animation: none; clip-path: none; }
}

.embers{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.embers i{
  position:absolute;bottom:60px;
  width:var(--s);height:var(--s);border-radius:50%;
  filter:blur(var(--b));
  opacity:0;will-change:transform,opacity;
  animation:ember linear infinite;
  z-index: 0;
}
@keyframes ember{
  0%   {transform:translate(0,0) scale(.6);opacity:0}
  12%  {opacity:var(--o)}
  35%  {transform:translate(calc(var(--x)*.35 + var(--sw)),calc(var(--rise)*-.35)) scale(1)}
  70%  {transform:translate(calc(var(--x)*.7 - var(--sw)),calc(var(--rise)*-.7)) scale(1.15);opacity:calc(var(--o)*.7)}
  100% {transform:translate(var(--x),calc(var(--rise)*-1)) scale(1.4);opacity:0}
}

.hero{
  isolation:isolate;      /* le hero devient sa propre couche : rien ne peut en sortir */
  z-index:0;
  clip-path:inset(0);     /* coupe tout ce qui dépasse, flou compris */
}
section.sec{z-index:1}  

/* AJOUTS ET MODIFICATIONS */
.season{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.flake{position:absolute;top:-12px;width:var(--s);height:var(--s);border-radius:50%;background:#fff;border:1px solid rgba(140,170,210,.6);animation:fall linear infinite,tw 2.5s ease-in-out infinite alternate}
.bat{position:absolute;left:-80px;width:var(--s);font-size:var(--s);line-height:1;animation:fly linear infinite}
@keyframes fall{to{transform:translate(var(--sw),108vh)}}
@keyframes tw{from{opacity:.35}to{opacity:1}}
@keyframes fly{25%{transform:translate(25vw,-24px)}50%{transform:translate(50vw,20px)}75%{transform:translate(75vw,-16px)}to{transform:translate(var(--dx),0)}}
.gallery,.appareils{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.appareils{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.gallery img,.appareils img{display:block;width:100%;object-fit:cover;border:1px solid var(--bd);border-radius:var(--r);background:#fff}
.gallery img{aspect-ratio:4/3}.appareils img{aspect-ratio:1}
figcaption{margin-top:8px;font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em}

.cal{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.mois{background:#fff;border:1px solid var(--bd);border-radius:var(--r);padding:16px}
.mois h3{text-align:center}
.jours{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;font-size:.85rem}
.jours b{font-size:.7rem;color:var(--mut)}.jours span{padding:6px 0;border-radius:var(--r)}
.jours .passe{color:#bbb}
.pris{background:rgba(224,122,95,.35);font-weight:700}
.legende{grid-column:1/-1;margin:0;font-size:.8rem}
.legende i{display:inline-block;width:12px;height:12px;vertical-align:middle;border-radius:2px}

.flake-img {
  position: absolute;
  top: -40px;
  width: var(--s);
  height: auto;
  animation: fall linear infinite, tw 2.5s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes batOrbit {
  0% {
    transform: translate(-50%, -50%) rotate(var(--sa)) translateX(var(--rx)) translateY(var(--ry)) rotate(calc(-1 * var(--sa)));
  }
  100% {
    transform: translate(-50%, -50%) rotate(calc(var(--sa) + 360deg)) translateX(var(--rx)) translateY(var(--ry)) rotate(calc(-1 * (var(--sa) + 360deg)));
  }
}

/* HERO BANNER */
.hero-banner{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(380px,56vw,460px);
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:clamp(32px,6vw,72px) clamp(20px,5vw,56px);
  border-radius:0;            
  color:#fff;
}
.hero-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 40%; 
  z-index:-2;border-radius:0;
}
.hero-banner::before{         
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(0,0,0,.65) 0%,rgba(0,0,0,.35) 100%);
}
.hero-banner h1{color:#fff;margin-bottom:.4em}
.hero-banner .lead{color:rgba(255,255,255,.9)}
.hero-banner .cta{margin-bottom:0}
.hero-banner .btn{background:#fff;color:#111;border-color:#fff}
.hero-banner .btn:hover{background:#ecebe6}
.hero-banner .btn.ghost{background:transparent;color:#fff;border-color:#fff}
.hero-banner .btn.ghost:hover{background:rgba(255,255,255,.15)}
@media(max-width:820px){
  .hero-bg{object-position:60% center}    
  .hero-banner::before{background:rgba(0,0,0,.55)}
}

/* VISUELS ACCUEIL (images) */
.ph{position:relative;margin:0;padding:0;overflow:hidden}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .6s ease}
.ph:hover img{transform:scale(1.04)}
.ph figcaption{position:absolute;left:0;bottom:0;margin:0;padding:8px 14px;color:#fff;font-size:.85rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
/* contour + étiquette dans la couleur de chaque carte (les fonds pastel restent en dessous) */
.p1{border:2px solid #E07A5F}.p1 figcaption{background:#E07A5F}
.p2{border:2px solid #3D5A80}.p2 figcaption{background:#3D5A80}
.p3{border:2px solid #81B29A}.p3 figcaption{background:#81B29A}

/* CARTES ACTUALITÉS AVEC AFFICHE */
.card.news{padding:0;display:flex;flex-direction:column;overflow:hidden}
.news-img{display:block;aspect-ratio:210/297;background:#ecebe6;border-bottom:1px solid var(--bd);overflow:hidden}
.news-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.news-img:hover img{transform:scale(1.03)}
.news-body{display:flex;flex-direction:column;flex:1;padding:24px}
.news-body .link{margin-top:auto;padding-top:12px;align-self:flex-start}

/* --- FOOTER : icônes sociales (logos de marque, formes pleines) --- */
footer .soc{display:flex;gap:12px;margin:0}
footer .soc a{
  width:44px;height:44px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r);
  color:rgba(255,255,255,.85);
  background:transparent;
  transition:color .2s,background .2s,border-color .2s,transform .2s;
}
footer .soc svg{
  width:20px;height:20px;
  fill:currentColor;   /* écrase le fill:none de .soc svg */
  stroke:none;         /* écrase le trait de .soc svg */
}
footer .soc a:hover,
footer .soc a:focus-visible{color:#fff;transform:translateY(-2px)}
footer .soc a.s-ig:hover,footer .soc a.s-ig:focus-visible{background:#E4405F;border-color:#E4405F}
footer .soc a.s-dc:hover,footer .soc a.s-dc:focus-visible{background:#5865F2;border-color:#5865F2}
footer .soc a.s-x:hover,footer .soc a.s-x:focus-visible{background:#fff;border-color:#fff;color:#111}
footer .soc a:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(prefers-reduced-motion:reduce){footer .soc a{transition:none}footer .soc a:hover{transform:none}}