@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/archivo-600.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/archivo-700.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-500.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-600.woff2) format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/sora-700.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dmsans-400.woff2) format('woff2')}

/* ============================================================
   Le bureau de Frédérique — charte graphique v1.0
   Couleurs, typographies et proportions normatives.
   ============================================================ */
:root{
  /* Pastels — jamais en couleur de texte */
  --cyan:#97F0FF;
  --abricot:#FFD08C;
  --jaune:#FFFDAA;
  /* Appuis */
  --bleu-bureau:#0B6E7F;
  --bleu-nuit:#005766;
  --ambre:#995A00;
  /* Neutres */
  --encre:#12181C;
  --ardoise:#3C4A52;
  --gris-doux:#5E6C74;
  --filet:#E4EAEC;
  --blanc-chaud:#FBFAF6;
  --blanc:#FFFFFF;

  --titre:'Archivo','Arial',sans-serif;
  --texte:'Inter','Segoe UI','Arial',sans-serif;

  --sym:url("img/illustration.png");
  --surface:#FFFFFF;       /* fond des cartes */
  --sur-claire:#FFFFFF;    /* boutons sur fond sombre */
  --voile:rgba(255,255,255,.94);
  --r:4px;                 /* boutons, filets, petits éléments */
  --r-md:12px;             /* cartes */
  --r-lg:18px;             /* grands conteneurs */
  --ombre:0 20px 50px -34px rgba(18,24,28,.42);
  --ombre-douce:0 10px 30px -24px rgba(18,24,28,.30);
  --page:1120px;
}

/* ------------------------------------------------------------------
   MODE SOMBRE — extension de la charte.
   Les trois pastels restent des aplats. Le Bleu Bureau étant illisible
   sur fond Encre, la couleur d'action devient le Cyan Lumière, qui
   respecte l'intention de la règle : un contraste toujours suffisant.
   ------------------------------------------------------------------ */
html[data-theme="dark"]{
  --sym:url("img/illustration-sombre.png");
  --blanc:#12181C;
  --blanc-chaud:#171F24;
  --surface:#181F24;
  --voile:rgba(18,24,28,.92);
  --encre:#F3F7F8;
  --ardoise:#C4D1D6;
  --gris-doux:#94A5AC;
  --filet:#2B363B;
  --bleu-bureau:#97F0FF;
  --bleu-nuit:#00404D;
  --ambre:#FFD08C;
}
html[data-theme="dark"] .btn{background:var(--cyan);color:#12181C;border-color:var(--cyan)}
html[data-theme="dark"] .btn:hover,html[data-theme="dark"] .btn:focus-visible{background:#FFFFFF;border-color:#FFFFFF;color:#12181C}
html[data-theme="dark"] .badge{background:var(--cyan);color:#12181C}
html[data-theme="dark"] .pastille svg{stroke:#12181C}
html[data-theme="dark"] .apropos .encadre[style]{background:rgba(151,240,255,.10) !important;border:1px solid rgba(151,240,255,.30) !important}
html[data-theme="dark"] .apropos .encadre[style] .liste li::before{background:var(--cyan)}
html[data-theme="dark"] .sec-nuit{background:#04333D}
html[data-theme="dark"] .surtitre{color:var(--cyan)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--blanc);color:var(--ardoise);
  font-family:var(--texte);font-weight:400;font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--bleu-bureau)}

/* ---------- Grille ---------- */
.wrap{width:100%;max-width:var(--page);margin:0 auto;padding:0 24px}
section{padding:88px 0}
.sec-chaud{background:var(--blanc-chaud)}
.sec-nuit{background:var(--bleu-nuit)}

/* ---------- Typographie ---------- */
h1,h2,h3{font-family:var(--titre);color:var(--encre);margin:0}
.display{font-weight:700;font-size:48px;font-size:clamp(36px,5.2vw,56px);line-height:1.05;letter-spacing:-.02em}
h2{font-weight:700;font-size:34px;font-size:clamp(28px,3.6vw,40px);line-height:1.10;letter-spacing:-.01em}
h3{font-weight:600;font-size:22px;line-height:1.30}
.surtitre{
  font-family:var(--texte);font-weight:600;font-size:12px;line-height:1.4;
  letter-spacing:.08em;text-transform:uppercase;color:var(--bleu-bureau);margin:0 0 18px
}
.chapo{font-size:19px;font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:var(--ardoise);margin:20px 0 0;max-width:60ch}
p{margin:16px 0 0;max-width:68ch}
.reduit{font-size:15px;line-height:1.60}
.legende{font-size:13px;font-weight:500;line-height:1.45;color:var(--gris-doux)}
strong{color:var(--encre);font-weight:600}

/* ---------- Boutons et liens ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:13px 24px;border-radius:var(--r);
  background:var(--bleu-bureau);color:#fff;text-decoration:none;
  font-family:var(--texte);font-weight:600;font-size:16px;line-height:1.2;
  border:1px solid var(--bleu-bureau);
  transition:background .18s ease,border-color .18s ease;
}
.btn:hover,.btn:focus-visible{background:var(--bleu-nuit);border-color:var(--bleu-nuit)}
.btn-clair{background:var(--sur-claire);color:#005766;border-color:var(--sur-claire)}
.btn-clair:hover,.btn-clair:focus-visible{background:var(--cyan);border-color:var(--cyan);color:var(--encre)}
.lien{
  display:inline-block;min-height:44px;padding:12px 0;
  color:var(--bleu-bureau);font-weight:600;font-size:16px;
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;
}
.lien:hover{color:var(--bleu-nuit)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:32px}
:focus-visible{outline:2px solid var(--bleu-bureau);outline-offset:3px}

/* ---------- En-tête ---------- */
.topbar{
  position:sticky;top:0;z-index:50;background:var(--voile);
  backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid var(--filet)
}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px}
.lockup{display:flex;align-items:center;gap:12px;text-decoration:none}
.lockup .sym{width:62px;height:44px;background:var(--sym) center/contain no-repeat;flex:none}
.wm{display:flex;flex-direction:column;line-height:1}
.wm-top{font-family:'DM Sans','Arial',sans-serif;font-weight:400;font-size:11px;color:var(--encre);letter-spacing:.01em}
.wm-main{font-family:'Sora','Arial',sans-serif;font-weight:700;font-size:17px;color:var(--encre);letter-spacing:.03em}
.nav{display:flex;align-items:center;gap:30px}
.nav a{
  font-size:15px;font-weight:500;color:var(--ardoise);text-decoration:none;
  padding:6px 0;border-bottom:1px solid transparent
}
.nav a:hover{color:var(--encre);border-bottom-color:var(--cyan)}
.nav a.nav-contact{color:var(--bleu-bureau);font-weight:600;text-decoration:underline;text-underline-offset:4px;border:0}


/* ---------- Hero ---------- */
.hero{padding:76px 0 72px}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:end}
.hero-illu .sym{width:100%;max-width:560px;height:0;padding-top:70.7%;margin-left:auto;background:var(--sym) center/contain no-repeat}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .hero-illu{order:-1}
  .hero-illu .sym{margin:0;max-width:420px}
}

/* ---------- Blocs ---------- */
.tete{max-width:62ch}
.tete p{margin-top:18px}
.grid{display:grid;gap:24px;margin-top:48px}
.g3{grid-template-columns:repeat(3,1fr)}
@media (max-width:960px){.g3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}

.carte{background:var(--surface);border:1px solid var(--filet);border-radius:var(--r);padding:32px 28px}
.sec-chaud .carte{background:var(--surface)}
.carte h3{margin-bottom:6px}
.liste{list-style:none;margin:20px 0 0;padding:0}
.liste li{position:relative;padding-left:20px;margin-top:11px;font-size:15px;line-height:1.6}
.liste li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;
  background:var(--bleu-bureau)
}

/* Pastille pastel derrière un pictogramme : un cercle, une couleur */
.pastille{
  width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  margin-bottom:20px
}
.p-cyan{background:var(--cyan)}
.p-jaune{background:var(--jaune)}
.p-abricot{background:var(--abricot)}
.pastille svg{width:24px;height:24px;stroke:var(--encre);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* Citations clients */
.dits{display:grid;gap:0;margin-top:44px;border-top:1px solid var(--filet)}
.dit{padding:26px 0;border-bottom:1px solid var(--filet);display:grid;grid-template-columns:1fr auto;gap:12px 32px;align-items:baseline}
.dit q{font-family:var(--titre);font-weight:600;font-size:20px;font-size:clamp(17px,1.8vw,21px);line-height:1.4;color:var(--encre);quotes:"«\00a0" "\00a0»"}
.dit span{font-size:14px;font-weight:600;color:var(--bleu-bureau);white-space:nowrap}
@media (max-width:640px){.dit{grid-template-columns:1fr}}

/* Méthode */
.etape{border-top:2px solid var(--encre);padding-top:22px}
.etape .num{font-family:var(--titre);font-weight:700;font-size:14px;color:var(--bleu-bureau);letter-spacing:.06em;display:block;margin-bottom:10px}
.etape p{margin-top:10px;font-size:15px;line-height:1.6}

/* Forfaits */
.offre{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--filet);border-radius:var(--r);padding:32px 28px}
.offre.mise-en-avant{border:2px solid var(--bleu-bureau);box-shadow:0 1px 0 var(--filet)}
.badge{
  display:inline-block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:var(--bleu-bureau);padding:5px 10px;border-radius:var(--r);margin-bottom:16px
}
.badge-vide{display:inline-block;height:27px;margin-bottom:16px}
.offre .niveau{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-doux)}
.offre h3{font-size:26px;font-weight:700;margin:6px 0 14px}
.prix{font-family:var(--titre);font-weight:700;font-size:34px;line-height:1;color:var(--encre)}
.prix span{font-family:var(--texte);font-size:15px;font-weight:500;color:var(--gris-doux)}
.volume{font-size:14px;color:var(--gris-doux);margin-top:8px;padding-bottom:18px;border-bottom:1px solid var(--filet)}
.offre .liste{margin-top:18px}


/* Trois marches d'entrée */
.marches{list-style:none;counter-reset:marche;margin:0;padding:0}
.marches li{counter-increment:marche;position:relative;padding:0 0 26px 52px;border-left:1px solid var(--filet);margin-left:14px}
.marches li:last-child{border-left-color:transparent;padding-bottom:0}
.marches li::before{
  content:counter(marche);position:absolute;left:-15px;top:0;
  width:30px;height:30px;border-radius:50%;background:var(--cyan);color:#12181C;
  font-family:var(--titre);font-weight:700;font-size:14px;
  display:flex;align-items:center;justify-content:center
}
.marches h3{font-size:18px;line-height:1.35;margin-bottom:8px}
.marches p{margin:0}
@media (max-width:480px){.marches li{padding-left:34px;margin-left:12px}}

/* Tarifs ponctuels */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:48px;align-items:start}
@media (max-width:860px){.duo{grid-template-columns:1fr}}

.entree{border:2px solid var(--bleu-bureau);border-radius:var(--r);padding:32px 28px;background:var(--surface)}
.entree .prix{margin-top:8px}

/* À propos */
.apropos{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
@media (max-width:900px){.apropos{grid-template-columns:1fr;gap:36px}}
.citation{
  border-left:3px solid var(--cyan);padding:6px 0 6px 24px;margin-top:32px
}
.citation p{font-family:var(--titre);font-weight:600;font-size:22px;font-size:clamp(19px,2.2vw,24px);line-height:1.35;color:var(--encre);margin:0}
.signe{margin-top:14px;font-size:14px;font-weight:600;color:var(--gris-doux)}

/* Avis */
.avis-vide{border:1px dashed var(--filet);border-radius:var(--r);padding:32px 28px;background:var(--surface);margin-top:36px;max-width:70ch}

/* Zone d'intervention */
.zones{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:44px}
@media (max-width:700px){.zones{grid-template-columns:1fr}}
.zones h3{font-size:16px;padding-bottom:12px;border-bottom:2px solid var(--encre)}
.villes{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.villes li{font-size:14px;color:var(--ardoise);background:var(--blanc-chaud);border:1px solid var(--filet);border-radius:var(--r);padding:5px 10px}

/* ---------- Bandeau : le déroulé en trois gestes ---------- */
.bande{
  position:relative;background:var(--blanc-chaud);padding:72px 0;
  border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)
}
.bande-tete{max-width:34ch}
.bande-titre{
  font-family:var(--titre);font-weight:700;color:var(--encre);margin:14px 0 0;
  font-size:28px;font-size:clamp(24px,3vw,34px);line-height:1.15;letter-spacing:-.015em
}
.flux{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin:48px 0 0;padding:0}
.flux li{position:relative;padding-top:26px;border-top:2px solid var(--encre)}
.flux-num{
  position:absolute;top:-19px;left:0;display:grid;place-items:center;
  width:36px;height:36px;border-radius:50%;background:var(--cyan);color:#12181C;
  font-family:var(--titre);font-weight:700;font-size:15px
}
.flux li:nth-child(2) .flux-num{background:var(--jaune)}
.flux li:nth-child(3) .flux-num{background:var(--abricot)}
.flux h3{font-size:19px;line-height:1.3;margin:18px 0 0}
.flux p{margin-top:10px;font-size:15px;line-height:1.6;color:var(--ardoise);max-width:34ch}
@media (max-width:860px){
  .flux{grid-template-columns:1fr;gap:26px}
  .flux li{padding-top:24px}
  .flux p{max-width:none}
}
@media (max-width:700px){.bande{padding:52px 0}.flux{margin-top:38px}}

/* ---------- Conditions, en quatre cartes ---------- */
.conditions{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px}
.conditions > div{
  position:relative;background:var(--blanc-chaud);border:1px solid var(--filet);
  border-radius:var(--r);padding:26px 22px 24px
}
.conditions > div::before{
  content:"";position:absolute;top:26px;right:22px;width:12px;height:12px;border-radius:50%;
  background:var(--cyan)
}
.conditions > div:nth-child(2)::before{background:var(--jaune)}
.conditions > div:nth-child(3)::before{background:var(--abricot)}
.conditions > div:nth-child(4)::before{background:var(--cyan)}
.conditions b{
  display:block;font-family:var(--titre);font-weight:700;font-size:28px;line-height:1;
  color:var(--encre);margin-bottom:12px
}
.conditions p{margin:0;font-size:15px;line-height:1.5;color:var(--ardoise);max-width:26ch}
@media (max-width:860px){.conditions{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.conditions{grid-template-columns:1fr;gap:12px}.conditions > div{padding:20px 18px}}

/* ---------- Motifs décoratifs ---------- */
.deco-contour{position:absolute;right:-70px;bottom:-70px;width:240px;height:240px;pointer-events:none}
.sec-nuit{position:relative}
.sec-nuit .wrap{position:relative;z-index:1}
.portrait-a-venir{position:relative}
.deco-points{position:absolute;top:-26px;right:6px;width:74px;height:74px;pointer-events:none;opacity:.85}
@media (max-width:900px){.deco-points{display:none}}
@media (max-width:700px){.deco-contour{right:-110px;bottom:-110px;width:190px;height:190px}}

/* ---------- Liste de principes, sans encadré ---------- */
.points{list-style:none;margin:0;padding:0}
.points li{
  position:relative;padding:0 0 22px 30px;margin-bottom:22px;
  border-bottom:1px solid var(--filet);
  font-family:var(--titre);font-weight:600;font-size:17px;line-height:1.45;color:var(--encre)
}
.points li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.points li::before{
  content:"";position:absolute;left:0;top:.35em;width:14px;height:14px;border-radius:50%;
  background:var(--cyan)
}
.points li:nth-child(2)::before{background:var(--jaune)}
.points li:nth-child(3)::before{background:var(--abricot)}

/* ---------- Carte d'appel sur fond profond ---------- */
.carte-nuit{background:var(--bleu-nuit);border-radius:var(--r);padding:34px 32px;color:#D9E8EB}
.carte-nuit h3{color:#fff;font-size:21px;line-height:1.3}
.carte-nuit p{color:#D9E8EB;margin-top:14px;font-size:16px;line-height:1.6}
.carte-nuit .btn{width:100%}
html[data-theme="dark"] .carte-nuit{background:#04333D;border:1px solid rgba(151,240,255,.18)}
@media (max-width:700px){.carte-nuit{padding:26px 22px}}

/* Contact */
.sec-nuit h2,.sec-nuit h3{color:#fff}
.sec-nuit p{color:#D9E8EB}
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
@media (max-width:900px){.contact{grid-template-columns:1fr;gap:36px}}
.mailto{
  display:inline-flex;align-items:center;gap:10px;margin-top:8px;
  font-family:var(--titre);font-weight:600;font-size:23px;font-size:clamp(19px,2.2vw,26px);
  color:#fff;text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--cyan);
  word-break:break-word
}
.mailto:hover{text-decoration-color:#fff}

/* Pied de page */
footer{background:var(--surface);padding:56px 0 40px;border-top:1px solid var(--filet)}
@media (max-width:820px){.foot{grid-template-columns:1fr;gap:28px}}

/* Apparition douce */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.js .reveal.vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
}
@media print{.topbar{position:static}.js .reveal{opacity:1;transform:none}}

/* ==================================================================
   COUCHE MODERNE — mouvements, états et nouveaux composants.
   Tout est désactivé si le système demande moins d'animations.
   ================================================================== */

/* Ancrage sous l'en-tête collant */
section{scroll-margin-top:96px}

/* ---------- En-tête ---------- */
.topbar{transition:box-shadow .3s ease,background .3s ease}
.topbar.compact{box-shadow:0 10px 30px -26px rgba(18,24,28,.75)}
.topbar-in{transition:min-height .3s ease}
.topbar.compact .topbar-in{min-height:62px}
.nav a:not(.nav-contact){position:relative;border-bottom:0}
.nav a:not(.nav-contact)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--cyan);
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease
}
.nav a:not(.nav-contact):hover::after,.nav a:not(.nav-contact):focus-visible::after{transform:scaleX(1)}

/* ---------- Menu mobile ---------- */
.burger{
  display:none;align-items:center;justify-content:center;flex:none;
  width:44px;height:44px;padding:0;border:1px solid var(--filet);border-radius:var(--r);
  background:transparent;color:var(--encre);cursor:pointer;transition:border-color .2s ease
}
.burger:hover{border-color:var(--bleu-bureau)}
.burger svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round}
.burger svg path{transition:transform .25s ease,opacity .2s ease;transform-origin:center}
.topbar.menu-ouvert .burger .trait-haut{transform:translateY(5px) rotate(45deg)}
.topbar.menu-ouvert .burger .trait-milieu{opacity:0}
.topbar.menu-ouvert .burger .trait-bas{transform:translateY(-5px) rotate(-45deg)}

@media (max-width:860px){
  .burger{display:inline-flex}
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:4px 24px 18px;background:var(--surface);
    border-bottom:1px solid var(--filet);
    box-shadow:0 18px 30px -26px rgba(18,24,28,.6)
  }
  .topbar.menu-ouvert .nav{display:flex}
  .nav a{padding:15px 0;font-size:17px;border-bottom:1px solid var(--filet)}
  .nav a:last-child{border-bottom:0}
  .nav a:not(.nav-contact)::after{display:none}
  .nav a.nav-contact{text-decoration:none;color:var(--bleu-bureau)}
  .outils{gap:10px}
}
html[data-theme="dark"] .topbar.menu-ouvert .nav{box-shadow:0 18px 30px -22px rgba(0,0,0,.9)}

/* ---------- Bascule clair / sombre ---------- */
.outils{display:flex;align-items:center;gap:18px}
.bascule{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:40px;height:40px;padding:0;border:1px solid var(--filet);border-radius:var(--r);
  background:transparent;color:var(--encre);cursor:pointer;
  transition:border-color .2s ease,background .2s ease,transform .2s ease
}
.bascule:hover{border-color:var(--bleu-bureau)}
.bascule:active{transform:scale(.94)}
.bascule svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.bascule .lune{display:none}
html[data-theme="dark"] .bascule .soleil{display:none}
html[data-theme="dark"] .bascule .lune{display:block}

/* ---------- Boutons ---------- */
.btn{
  box-shadow:0 1px 2px rgba(18,24,28,.05);
  transition:background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .25s ease
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 26px -16px rgba(11,110,127,.65)}
.btn:active{transform:translateY(0);box-shadow:0 1px 2px rgba(18,24,28,.05)}
.btn .fleche{display:inline-block;transition:transform .22s ease}
.btn:hover .fleche{transform:translateX(4px)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
html[data-theme="dark"] .btn:hover{box-shadow:0 14px 26px -16px rgba(151,240,255,.45)}
.lien{transition:color .2s ease,text-decoration-thickness .2s ease,text-underline-offset .2s ease}
.lien:hover{text-decoration-thickness:2px;text-underline-offset:6px}

/* ---------- Cartes ---------- */

/* ---------- Apparitions échelonnées ---------- */
.js .reveal{transition-duration:.55s}
.js .grid .reveal:nth-child(2),.js .zones .reveal:nth-child(2),.js .dits .reveal:nth-child(2){transition-delay:.07s}
.js .grid .reveal:nth-child(3),.js .dits .reveal:nth-child(3){transition-delay:.14s}
.js .grid .reveal:nth-child(4){transition-delay:.21s}

/* ---------- Carrousel d'avis ---------- */
.avis-defile{overflow:hidden;margin-top:40px}
.avis-piste{display:flex;width:max-content;animation:defile 70s linear infinite}
.avis-defile:hover .avis-piste,.avis-defile:focus-within .avis-piste{animation-play-state:paused}
.avis-piste .carte{flex:none;width:min(360px,82vw);margin-right:24px;white-space:normal}
.avis-piste .carte q{font-family:var(--titre);font-weight:600;font-size:17px;line-height:1.45;color:var(--encre);quotes:"«\00a0" "\00a0»"}
.avis-piste .carte .legende{margin-top:16px}

/* ---------- États de formulaire (charte : seules couleurs hors palette) ---------- */
.etat.ok,.etat.ko{padding:9px 12px;border-radius:var(--r)}
.etat.ok{color:#1E6E3C;background:#E7F6EC}
.etat.ko{color:#A03A26;background:#FBEAE7}
html[data-theme="dark"] .etat.ok{color:#9BE3B4;background:rgba(30,110,60,.20)}
html[data-theme="dark"] .etat.ko{color:#F3A796;background:rgba(160,58,38,.22)}

/* ---------- Moins d'animations si demandé ---------- */
@media (prefers-reduced-motion:reduce){
  .piste,.avis-piste{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .btn:hover{transform:none}
  .nav a::after{transition:none}
}

/* ==================================================================
   PETITS ÉCRANS — corrections d'affichage.
   Testé de 320 px (iPhone SE) à 430 px (iPhone Pro Max).
   ================================================================== */
body{overflow-wrap:break-word}

@media (max-width:860px){
  /* le panneau de menu ne doit jamais dépasser l'écran */
  .topbar.menu-ouvert .nav{max-height:calc(100vh - 80px);overflow-y:auto}
}

@media (max-width:700px){
  section{padding:60px 0}
  .hero{padding:44px 0 52px}
  .legal{padding:44px 0 64px}
  .tete p,.chapo{max-width:none}
  .carte,.offre,.entree,.demande-carte{padding:24px 20px}
  .prix{font-size:30px}
  .compteur{font-size:32px}
  .dits{margin-top:32px}
  .dit{padding:20px 0}
  .grid{margin-top:32px}
  .regles,.duo,.zones{margin-top:32px}
}

@media (max-width:480px){
  .wrap{padding:0 18px}
  /* les tableaux respirent au lieu de forcer la ligne */
  .tab th,.tab td{font-size:14px;padding:11px 0}
  .tab td:last-child{white-space:normal;padding-left:12px}
  .villes li{font-size:13px;padding:4px 9px}
    .citation{padding-left:18px}
  /* un bouton pleine largeur se touche mieux */
  .actions .btn{width:100%}
  .actions{gap:4px 16px}
  .lockup .wm-main{font-size:16px}
  .infos li{padding:14px 0}
}

/* ---------- Page légale ---------- */
.legal{padding:64px 0 88px}
.legal .tete{max-width:64ch}
.legal article{max-width:72ch;margin-top:48px}
.legal h1{font-family:var(--titre);color:var(--encre);margin:0}
.legal h2{font-weight:600;font-size:26px;font-size:clamp(22px,2.8vw,30px);line-height:1.20;margin:56px 0 0;padding-top:26px;border-top:1px solid var(--filet)}
.legal h3{font-size:19px;margin:28px 0 0}
.legal p{margin-top:14px}
.legal .liste li{font-size:16px}
.legal dl{margin:18px 0 0}
.legal dt{font-family:var(--titre);font-weight:600;font-size:14px;color:var(--encre);margin-top:18px}
.legal dd{margin:4px 0 0;font-size:16px;line-height:1.6}
.acompleter{background:var(--jaune);color:var(--encre);font-weight:600;padding:1px 6px;border-radius:var(--r);white-space:nowrap}
.avert{background:var(--blanc-chaud);border:1px solid var(--filet);border-left:3px solid var(--abricot);border-radius:var(--r);padding:22px 24px;margin-top:32px}
.avert p{margin-top:0;font-size:15px;line-height:1.6}
.retour{display:inline-block;margin-top:8px;font-size:15px;font-weight:600;color:var(--bleu-bureau);text-decoration:underline;text-underline-offset:4px}
@media print{.acompleter{background:transparent;text-decoration:underline}}


/* ==================================================================
   DIRECTION ARTISTIQUE — conteneurs, en-tête flottant, cartes.
   Écart assumé à la charte : rayons de 12 et 18 px sur les blocs,
   le rayon de 4 px restant la règle pour les boutons et les filets.
   ================================================================== */

/* ---------- En-tête flottant ---------- */
.topbar{top:0;padding:14px 0;background:transparent;border-bottom:0;backdrop-filter:none}
.topbar-in{
  background:var(--surface);border:1px solid var(--filet);border-radius:var(--r-lg);
  box-shadow:var(--ombre-douce);padding-left:20px;padding-right:14px;min-height:70px;
  position:relative;transition:box-shadow .3s ease,min-height .3s ease
}
.topbar.compact .topbar-in{min-height:62px;box-shadow:var(--ombre)}
.topbar.compact{box-shadow:none}
.nav a.nav-contact{
  padding:11px 20px;border-radius:var(--r);background:var(--bleu-bureau);color:#fff;
  text-decoration:none;font-weight:600;transition:background .2s ease,transform .2s ease
}
.nav a.nav-contact:hover{background:var(--bleu-nuit);color:#fff;transform:translateY(-1px)}
html[data-theme="dark"] .nav a.nav-contact{background:var(--cyan);color:#12181C}
html[data-theme="dark"] .nav a.nav-contact:hover{background:#fff}
@media (max-width:860px){
  .topbar-in{padding-left:16px;padding-right:10px}
  .topbar.menu-ouvert .nav{
    top:calc(100% + 10px);left:0;right:0;border:1px solid var(--filet);
    border-radius:var(--r-lg);box-shadow:var(--ombre);padding:8px 22px 18px
  }
  .nav a.nav-contact{background:transparent;color:var(--bleu-bureau);padding:15px 0;text-decoration:underline}
  html[data-theme="dark"] .nav a.nav-contact{background:transparent;color:var(--cyan)}
}

/* ---------- Grands conteneurs ---------- */
.encart{
  position:relative;overflow:hidden;background:var(--blanc-chaud);
  border-radius:var(--r-lg);padding:64px 56px
}
.hero-encart{padding:64px 56px 0}
.hero-encart .hero-grid{position:relative;z-index:2}
@media (max-width:900px){.encart{padding:40px 26px}.deco-hero{width:260px;right:-90px;bottom:-90px}}
@media (max-width:480px){.encart{padding:32px 20px;border-radius:var(--r-md)}}

/* ---------- Cartes ---------- */
.carte,.offre,.entree,.carte-nuit,.conditions > div,.avis-piste .carte{border-radius:var(--r-md)}
.carte{border:0;box-shadow:var(--ombre-douce)}
.carte-cyan{background:rgba(151,240,255,.16)}
.carte-jaune{background:rgba(255,253,170,.28)}
.carte-abricot{background:rgba(255,208,140,.20)}
html[data-theme="dark"] .carte-cyan{background:rgba(151,240,255,.07)}
html[data-theme="dark"] .carte-jaune{background:rgba(255,253,170,.06)}
html[data-theme="dark"] .carte-abricot{background:rgba(255,208,140,.07)}
.offre{box-shadow:var(--ombre-douce)}
.offre.mise-en-avant{box-shadow:var(--ombre)}

/* ---------- Listes à coches ---------- */
.liste.coches li{padding-left:28px}
.liste.coches li::before{
  content:"\2713";background:none;width:auto;height:auto;top:0;left:0;border-radius:0;
  color:var(--bleu-bureau);font-weight:700;font-size:15px;line-height:1.6
}

/* ---------- Bouton en contour ---------- */
.btn-contour{
  display:flex;align-items:center;justify-content:center;margin-top:26px;
  min-height:48px;padding:13px 22px;border-radius:var(--r);
  border:1px solid var(--bleu-bureau);background:transparent;color:var(--bleu-bureau);
  font-family:var(--texte);font-weight:600;font-size:16px;text-decoration:none;
  transition:background .2s ease,color .2s ease
}
.btn-contour:hover{background:var(--bleu-bureau);color:#fff}
html[data-theme="dark"] .btn-contour{border-color:var(--cyan);color:var(--cyan)}
html[data-theme="dark"] .btn-contour:hover{background:var(--cyan);color:#12181C}
.offre .liste{flex:1}
.offre .btn{margin-top:26px;width:100%}

/* ---------- Marches numérotées ---------- */
.marches-rondes li{padding-left:78px;border-left:0;margin-left:0}
.marches-rondes li::before{
  left:0;top:-4px;width:54px;height:54px;font-size:19px;
  content:"0" counter(marche);background:var(--cyan);color:#12181C
}
.marches-rondes li:nth-child(2)::before{background:var(--jaune)}
.marches-rondes li:nth-child(3)::before{background:var(--abricot)}
.marches-rondes li{padding-bottom:32px}
@media (max-width:480px){
  .marches-rondes li{padding-left:62px}
  .marches-rondes li::before{width:46px;height:46px;font-size:17px}
}

/* ---------- Formulaire ---------- */


/* ==================================================================
   PIED DE PAGE, VERRE ET ANIMATIONS
   ================================================================== */

/* ---------- Pied de page ---------- */
footer{padding:72px 0 28px;border-top:1px solid var(--filet)}
.pied-grille{display:grid;grid-template-columns:1.1fr .85fr 1fr;gap:56px}
.pied-grille p{font-size:14px;line-height:1.85;color:var(--gris-doux);margin-top:20px;max-width:34ch}
.pied-grille h2{
  font-family:var(--texte);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--bleu-bureau);margin:6px 0 20px
}
.pied-grille > div > a:not(.lockup){
  display:block;font-size:14px;color:var(--ardoise);text-decoration:none;margin-bottom:11px;
  transition:color .2s ease,transform .2s ease
}
.pied-grille > div > a:not(.lockup):hover{color:var(--encre);transform:translateX(3px)}
.pied-bas{
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  border-top:1px solid var(--filet);padding-top:24px;margin-top:52px;
  font-size:12px;color:var(--gris-doux)
}
.pied-bas > div{display:flex;gap:22px;flex-wrap:wrap}
.pied-bas a{color:var(--gris-doux);text-decoration:none}
.pied-bas a:hover{color:var(--bleu-bureau);text-decoration:underline;text-underline-offset:3px}
@media (max-width:860px){
  .pied-grille{grid-template-columns:1fr 1fr;gap:32px}
  .pied-grille > div:first-child{grid-column:1/-1}
}
@media (max-width:520px){
  .pied-grille{grid-template-columns:1fr}
  .pied-bas{flex-direction:column;align-items:flex-start;gap:14px}
}

/* ---------- Blocs de verre ---------- */
.verre{
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 24px 60px -40px rgba(18,24,28,.5);
  backdrop-filter:blur(16px) saturate(130%);
  -webkit-backdrop-filter:blur(16px) saturate(130%)
}
html[data-theme="dark"] .verre{
  background:rgba(24,31,36,.62);border-color:rgba(151,240,255,.16)
}
/* La règle de base des compositions décoratives, indispensable :
   sans position:absolute, le motif occupe de la place dans le flux. */
.deco-commencer{
  position:absolute;left:-170px;top:-130px;width:400px;height:auto;
  pointer-events:none;opacity:.55;z-index:0
}
#commencer{position:relative;overflow:hidden}
#commencer .wrap{position:relative;z-index:1}
@media (max-width:900px){.deco-commencer{width:250px;left:-120px;top:-80px;opacity:.4}}

/* ---------- Apparitions : léger flou qui se dissipe ---------- */
.js .reveal{transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}

/* ---------- Titres soulignés d'un trait qui se déploie ---------- */
.tete h2{position:relative;display:inline-block}
.tete h2::after{
  content:"";position:absolute;left:0;bottom:-14px;height:3px;width:64px;background:var(--cyan);
  transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.22,1,.36,1) .15s
}
.js .tete.vu h2::after,.tete h2::after{transform:scaleX(1)}
.js .tete:not(.vu) h2::after{transform:scaleX(0)}

/* ---------- Parallaxe douce sur les cercles ---------- */

@media (prefers-reduced-motion:reduce){
  .tete h2::after{transform:scaleX(1)!important}
}


/* ---------- Carte identité, à propos ---------- */
.carte-identite{
  position:relative;background:var(--surface);color:var(--encre);
  border:1px solid var(--filet);border-radius:var(--r-lg);
  padding:40px 36px;overflow:hidden;box-shadow:var(--ombre-douce)
}
.carte-identite .surtitre{margin-bottom:6px}
.carte-identite p{color:var(--ardoise);font-size:15px;line-height:1.65;margin-top:18px;max-width:30ch}
.compteur-ans{
  display:flex;align-items:baseline;gap:12px;margin:8px 0 0;
  font-family:var(--titre);font-weight:700;color:var(--encre)
}
.compteur-ans span{font-size:104px;line-height:.9;letter-spacing:-.05em;color:#0B6E7F}
.compteur-ans small{font-family:var(--texte);font-size:22px;font-weight:600;color:var(--gris-doux)}
.signature-nom{
  border-top:1px solid var(--filet);padding-top:22px;margin-top:28px!important;
  font-family:var(--titre);font-weight:700;font-size:19px;color:var(--encre)
}
.signature-nom span{
  display:block;font-family:var(--texte);font-weight:500;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:#6B4A18;margin-top:6px
}
html[data-theme="dark"] .carte-identite{background:var(--surface);border-color:var(--filet)}
@media (max-width:700px){
  .carte-identite{padding:30px 26px}
  .compteur-ans span{font-size:76px}
}

/* ---------- Portrait, quand la photo sera là ---------- */
.portrait{
  width:100%;border-radius:var(--r-lg);margin-bottom:22px;
  box-shadow:0 24px 60px -40px rgba(18,24,28,.55)
}


/* ==================================================================
   QUESTIONNAIRE
   ================================================================== */
#contact{padding:88px 0}
.demande-grille{display:grid;grid-template-columns:1fr 1.08fr;gap:56px;align-items:start}
@media (max-width:980px){.demande-grille{grid-template-columns:1fr;gap:36px}}

/* la colonne de gauche accompagne le défilement du formulaire */
.demande-copie{position:sticky;top:104px}
@media (max-width:980px){.demande-copie{position:static}}
.demande-copie h2{color:#fff;font-size:32px;font-size:clamp(28px,3.2vw,40px);line-height:1.1}
.demande-copie > p{color:#C3D3D6;margin-top:18px;max-width:32ch;font-size:16px}
.demande-copie .surtitre{color:var(--cyan)}
.atouts{list-style:none;margin:28px 0 24px;padding:0}
.atouts li{display:flex;align-items:center;gap:13px;margin-bottom:13px;font-size:15px;line-height:1.45;color:#DCE9EB}
.atouts svg{width:19px;height:19px;flex:none;stroke:var(--cyan);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.demande-copie .mailto{font-size:20px;font-size:clamp(17px,1.9vw,22px)}

/* ---------- La carte du formulaire ---------- */
.demande-carte{
  background:var(--surface);border-radius:var(--r-lg);padding:32px 30px;
  box-shadow:0 30px 70px -50px rgba(0,0,0,.8)
}
@media (max-width:700px){.demande-carte{padding:24px 18px}}
.demande-carte fieldset{border:0;margin:0 0 24px;padding:0;min-width:0}
.demande-carte legend{
  display:flex;align-items:center;gap:11px;padding:0;margin-bottom:8px;
  font-family:var(--titre);font-weight:600;font-size:18px;color:var(--encre)
}
.etape-num{
  display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--cyan);color:#12181C;font-family:var(--texte);font-size:13px;font-weight:600
}
.aide{font-size:13px;color:var(--gris-doux);margin:0 0 14px}
.aide.centre{text-align:center;margin:12px 0 0;font-size:12px;line-height:1.5}

/* ---------- Étiquettes à cocher ---------- */
.puces{display:flex;flex-wrap:wrap;gap:8px}
.puce{position:relative;cursor:pointer}
.puce input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.puce span{
  display:inline-flex;align-items:center;gap:8px;padding:9px 15px 9px 13px;
  background:var(--blanc-chaud);border:1px solid var(--filet);border-radius:var(--r-md);
  font-size:14px;line-height:1.3;color:var(--ardoise);
  transition:border-color .18s ease,background .18s ease,color .18s ease
}
.puce span::before{
  content:"+";font-weight:600;font-size:15px;line-height:1;color:var(--gris-doux);
  transition:color .18s ease,transform .18s ease
}
.puce:hover span{border-color:var(--bleu-bureau)}
.puce input:focus-visible + span{outline:2px solid var(--bleu-bureau);outline-offset:2px}
.puce.coche span{border-color:var(--bleu-bureau);background:rgba(11,110,127,.08);color:var(--encre);font-weight:500}
.puce.coche span::before{content:"\2713";color:var(--bleu-bureau)}
html[data-theme="dark"] .puce.coche span{background:rgba(151,240,255,.10)}

/* ---------- Champs ---------- */
.champs-grille{display:grid;grid-template-columns:1fr 1fr;gap:13px 12px}
@media (max-width:700px){.champs-grille{grid-template-columns:1fr}}
.champs-grille .large{grid-column:1/-1}
.champs-grille .champ span{display:block;font-size:12px;font-weight:600;color:var(--encre);margin-bottom:5px}
.champs-grille input,.champs-grille textarea,.champs-grille select{
  width:100%;font-family:var(--texte);font-size:15px;color:var(--encre);
  background:var(--blanc-chaud);border:1px solid var(--filet);border-radius:var(--r-md);
  padding:11px 13px;min-height:46px
}
.champs-grille textarea{min-height:78px;resize:vertical}
.champs-grille input:focus,.champs-grille textarea:focus,.champs-grille select:focus{
  outline:2px solid var(--bleu-bureau);outline-offset:1px;border-color:var(--bleu-bureau)
}
.mention-form{font-size:12px;color:var(--gris-doux);margin:0 0 16px;line-height:1.5}
.mention-form a{color:var(--bleu-bureau)}
#preparer{width:100%;justify-content:space-between;min-height:52px}
#resultat{border-top:1px solid var(--filet);margin-top:22px;padding-top:20px}
#resultat[hidden]{display:none}
#apercu{font-size:14px;line-height:1.6;min-height:210px}
.actions-resultat{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.actions-resultat .btn,.actions-resultat .btn-contour{flex:1;margin-top:0;min-width:170px}
#etat-form{display:block;margin-top:12px}
#etat-form:empty{display:none}

/* sur mobile, les champs passent à 16 px pour éviter le zoom automatique */
@media (max-width:700px){
  .champs-grille input,.champs-grille textarea,.champs-grille select{font-size:16px}
}


/* le motif est découpé par son propre calque, sans bloquer le positionnement collant */
.deco-clip{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none}


/* ==================================================================
   TABLETTE ET TÉLÉPHONE — réglages fins
   ================================================================== */

/* ---------- Tablette paysage et petits portables ---------- */
@media (max-width:1080px){
  /* le formulaire manque d'air à deux colonnes sur cette largeur */
  .demande-grille{grid-template-columns:1fr;gap:40px}
  .demande-copie{position:static}
  .demande-copie > p{max-width:52ch}
  .demande-carte{max-width:760px}
}

/* ---------- Tablette portrait ---------- */
@media (max-width:960px){
  /* une troisième carte seule sur sa ligne prend toute la largeur */
  .grid.g3 > *:nth-child(3):last-child{grid-column:1/-1}
  .encart{padding:48px 36px}
  .hero-encart{padding-bottom:0}
  section{padding:76px 0}
  #contact{padding:76px 0}
  .topbar-in{min-height:64px}
}

/* ---------- Téléphone ---------- */
@media (max-width:700px){
  #contact{padding:52px 0}
  .encart{padding:34px 22px}
  .hero-encart{padding-bottom:0}
  /* les liens du pied de page deviennent de vraies cibles tactiles */
  .pied-grille > div > a:not(.lockup){padding:7px 0;margin-bottom:4px}
  .pied-bas > div{gap:10px 20px}
  .pied-bas a{padding:6px 0}
  /* la carte identité ne doit pas écraser le texte */
  .carte-identite{margin-top:8px}
  .marches-rondes li{padding-bottom:26px}
  .demande-copie h2{font-size:30px}
  .atouts li{align-items:flex-start}
  .atouts svg{margin-top:2px}
}

/* ---------- Petits téléphones ---------- */
@media (max-width:400px){
  .wrap{padding:0 16px}
  .encart{padding:28px 18px}
  .hero-encart{padding-bottom:0}
  .demande-carte{padding:22px 16px}
  .puce span{font-size:13px;padding:8px 12px 8px 11px}
  .prix{font-size:28px}
  .compteur-ans span{font-size:64px}
  .offre,.carte,.entree{padding:22px 18px}
  .lockup .sym{width:52px;height:37px}
  .lockup .wm-main{font-size:15px}
  .topbar-in{padding-left:12px;padding-right:8px}
  .bascule,.burger{width:40px;height:40px}
}

/* ---------- Écrans tactiles : pas d'effet de survol ---------- */
@media (hover:none){
  .btn:hover,.nav a.nav-contact:hover{transform:none;box-shadow:none}
  .puce:hover span,.choix-case:hover{border-color:var(--filet)}
  .pied-grille > div > a:not(.lockup):hover{transform:none}
}

/* ---------- Rien ne doit déborder horizontalement ----------
   overflow-x:hidden casserait tous les positionnements collants de la page.
   overflow:clip découpe sans créer de conteneur de défilement. */
body{max-width:100%;overflow-x:clip}


/* ---------- La carte blanche reprend ses couleurs de texte ----------
   .sec-nuit p impose une couleur claire, juste sur le fond profond,
   mais illisible à l'intérieur de la carte du formulaire. */
.demande-carte p,.demande-carte label,.demande-carte span{color:var(--ardoise)}
.demande-carte .aide{color:var(--gris-doux)}
.demande-carte .mention-form{color:var(--ardoise)}
.demande-carte legend{color:var(--encre)}
.demande-carte .etape-num{color:#12181C}
.demande-carte .champ > span{color:var(--encre)}
.demande-carte .puce span{color:var(--ardoise)}
.demande-carte .puce.coche span{color:var(--encre)}
.demande-carte .btn{color:#fff}
html[data-theme="dark"] .demande-carte .btn{color:#12181C}
.demande-carte .btn-contour{color:var(--bleu-bureau)}
html[data-theme="dark"] .demande-carte .btn-contour{color:var(--cyan)}

/* les textes d'exemple des champs sont souvent trop pâles par défaut */
.champs-grille input::placeholder,.champs-grille textarea::placeholder{color:var(--gris-doux);opacity:1}


/* ---------- Bulles au passage de la souris ----------
   Le mode Produit reprend la superposition des cercles du logo. */
.bulles{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:1}
.bulle{
  position:absolute;border-radius:50%;pointer-events:none;
  mix-blend-mode:multiply;opacity:.9;
  transform:translate(-50%,-50%) scale(.35);
  animation:bulle-vie 800ms cubic-bezier(.22,1,.36,1) forwards;
  will-change:transform,opacity
}
@keyframes bulle-vie{
  35%{opacity:.85}
  100%{transform:translate(-50%,-50%) scale(1.25);opacity:0}
}
html[data-theme="dark"] .bulle{mix-blend-mode:screen;opacity:.5}
@media (prefers-reduced-motion:reduce){.bulles{display:none}}


/* ---------- Portrait ---------- */
.portrait{
  display:block;width:100%;height:auto;border-radius:var(--r-lg);margin-bottom:22px;
  box-shadow:0 26px 60px -42px rgba(18,24,28,.6)
}
@media (max-width:900px){.portrait{max-width:420px}}

/* ---------- Numéro de téléphone ---------- */
.tel{
  display:inline-block;margin-top:10px;font-family:var(--titre);font-weight:600;
  font-size:20px;color:#fff;text-decoration:underline;text-underline-offset:6px;
  text-decoration-color:var(--cyan)
}
.tel:hover{text-decoration-color:#fff}
.pied-grille > div > a[href^="tel:"]{font-weight:600;color:var(--encre)}


/* ---------- Colonne profil ---------- */
.colonne-profil{position:relative;max-width:400px;margin-left:auto}
.cadre-portrait{
  position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;
  background:var(--blanc-chaud);box-shadow:0 30px 70px -48px rgba(18,24,28,.65)
}
.cadre-portrait img{display:block;width:100%;height:auto}
.badge-ans{
  position:absolute;left:0;bottom:0;display:flex;align-items:baseline;gap:9px;
  padding:16px 22px 14px;background:var(--surface);
  border-top-right-radius:var(--r-lg);border-bottom-left-radius:var(--r-lg)
}
.badge-ans span{
  font-family:var(--titre);font-weight:700;font-size:46px;line-height:.9;
  letter-spacing:-.04em;color:#0B6E7F
}
.badge-ans small{
  font-family:var(--texte);font-weight:600;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gris-doux);line-height:1.3;white-space:nowrap
}
.profil-nom{
  margin:22px 0 0;font-family:var(--titre);font-weight:700;font-size:19px;color:var(--encre)
}
.profil-nom span{
  display:block;font-family:var(--texte);font-weight:500;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--bleu-bureau);margin-top:5px
}
.colonne-profil .deco-points{top:-28px;right:-24px;width:72px;height:72px;z-index:1}
@media (max-width:900px){
  .apropos{grid-template-columns:1fr}
  .colonne-profil{max-width:400px;margin:8px 0 0}
  .colonne-profil .deco-points{display:none}
}
@media (max-width:480px){
  .badge-ans{padding:13px 18px 12px}
  .badge-ans span{font-size:38px}
}

/* ---------- Bulles au passage de la souris ----------
   Le mode Produit reprend la superposition des cercles du logo. */
.bulles{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:1}
.bulle{
  position:absolute;border-radius:50%;pointer-events:none;
  mix-blend-mode:multiply;opacity:.9;
  transform:translate(-50%,-50%) scale(.35);
  animation:bulle-vie 800ms cubic-bezier(.22,1,.36,1) forwards;
  will-change:transform,opacity
}
@keyframes bulle-vie{
  35%{opacity:.85}
  100%{transform:translate(-50%,-50%) scale(1.25);opacity:0}
}
html[data-theme="dark"] .bulle{mix-blend-mode:screen;opacity:.5}
@media (prefers-reduced-motion:reduce){.bulles{display:none}}


/* ---------- Portrait ---------- */
.portrait{
  display:block;width:100%;height:auto;border-radius:var(--r-lg);margin-bottom:22px;
  box-shadow:0 26px 60px -42px rgba(18,24,28,.6)
}
@media (max-width:900px){.portrait{max-width:420px}}

/* ---------- Numéro de téléphone ---------- */
.tel{
  display:inline-block;margin-top:10px;font-family:var(--titre);font-weight:600;
  font-size:20px;color:#fff;text-decoration:underline;text-underline-offset:6px;
  text-decoration-color:var(--cyan)
}
.tel:hover{text-decoration-color:#fff}
.pied-grille > div > a[href^="tel:"]{font-weight:600;color:var(--encre)}


/* ---------- Colonne profil : photo et repères dans un seul bloc ---------- */
.colonne-profil{position:relative;max-width:380px;margin-left:auto}
.carte-profil{
  background:var(--surface);border:1px solid var(--filet);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--ombre-douce)
}
.carte-profil .portrait{
  display:block;width:100%;height:auto;margin:0;border-radius:0;box-shadow:none
}
.profil-infos{padding:24px 26px 28px}
.profil-infos .surtitre{margin-bottom:4px}
.profil-infos > p{color:var(--ardoise);font-size:14px;line-height:1.6;margin-top:14px;max-width:none}
.carte-profil .compteur-ans{margin:2px 0 0}
.carte-profil .compteur-ans span{font-size:68px;color:#0B6E7F}
.carte-profil .compteur-ans small{font-size:19px}
.carte-profil .signature-nom{
  border-top:1px solid var(--filet);padding-top:18px;margin-top:20px!important;
  font-size:17px;color:var(--encre)
}
.colonne-profil .deco-points{top:-30px;right:-26px;width:74px;height:74px;z-index:1}
@media (max-width:900px){
  .apropos{grid-template-columns:1fr}
  .colonne-profil{max-width:420px;margin:0}
  .colonne-profil .deco-points{display:none}
}


/* ---------- Photo détourée dans le cadre d'accueil ---------- */
.hero-texte{padding-bottom:64px}
.hero-photo{position:relative;max-width:460px;margin-left:auto}
.cercles-photo{display:block;width:100%;height:auto;overflow:visible}
.hero-photo img{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:74%;height:auto;filter:drop-shadow(0 22px 30px rgba(18,24,28,.18))
}
/* les cercles respirent, sans jamais passer devant elle */
.rond-a,.rond-b,.rond-c{transform-box:fill-box;transform-origin:center;will-change:transform}
.rond-a{animation:flotte-a 23s ease-in-out infinite}
.rond-b{animation:flotte-b 19s ease-in-out infinite}
.rond-c{animation:flotte-c 17s ease-in-out infinite}
/* Trajectoires volontairement irrégulières : sept étapes inégalement réparties,
   sur des durées premières entre elles, pour que la boucle ne se devine pas. */
@keyframes flotte-a{
  0%   {transform:translate(0,0) scale(1)}
  14%  {transform:translate(18px,-22px) scale(1.03)}
  31%  {transform:translate(-9px,-30px) scale(1.01)}
  47%  {transform:translate(-24px,-6px) scale(1.04)}
  63%  {transform:translate(-12px,19px) scale(1.01)}
  79%  {transform:translate(16px,12px) scale(1.03)}
  91%  {transform:translate(21px,-7px) scale(1.01)}
  100% {transform:translate(0,0) scale(1)}
}
@keyframes flotte-b{
  0%   {transform:translate(0,0) scale(1)}
  17%  {transform:translate(-21px,14px) scale(1.05)}
  29%  {transform:translate(-6px,27px) scale(1.02)}
  44%  {transform:translate(17px,18px) scale(1.06)}
  61%  {transform:translate(24px,-11px) scale(1.02)}
  78%  {transform:translate(4px,-24px) scale(1.05)}
  93%  {transform:translate(-15px,-9px) scale(1.02)}
  100% {transform:translate(0,0) scale(1)}
}
@keyframes flotte-c{
  0%   {transform:translate(0,0) scale(1)}
  12%  {transform:translate(14px,20px) scale(1.04)}
  27%  {transform:translate(-11px,26px) scale(1.07)}
  41%  {transform:translate(-25px,4px) scale(1.03)}
  58%  {transform:translate(-14px,-21px) scale(1.06)}
  74%  {transform:translate(12px,-26px) scale(1.03)}
  89%  {transform:translate(23px,-5px) scale(1.05)}
  100% {transform:translate(0,0) scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .rond-a,.rond-b,.rond-c{animation:none}
}
@media (max-width:900px){
  .hero-encart{padding:40px 26px 0}
  .hero-texte{padding-bottom:20px}
  .hero-photo{max-width:340px;margin:0 auto}
}
@media (max-width:480px){.hero-photo{max-width:300px}.hero-encart{padding:32px 20px 0}}

/* ---------- Illustration et repères dans la section À propos ---------- */
.carte-experience{
  background:var(--surface);border:1px solid var(--filet);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--ombre-douce)
}
.photo-apropos{display:block;width:100%;height:auto}
.experience-infos{padding:24px 26px 26px}
.experience-infos .compteur-ans{margin:0;align-items:baseline}
.experience-infos .compteur-ans span{font-size:60px;color:#0B6E7F}
.experience-infos .compteur-ans small{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gris-doux)}
.experience-infos .profil-nom{
  border-top:1px solid var(--filet);padding-top:18px;margin-top:20px
}


/* ---------- Bloc À propos ---------- */
#apropos .encart{background:var(--surface);border:1px solid var(--filet);box-shadow:var(--ombre-douce)}
#apropos .tete{max-width:56ch}
.carte-experience{max-width:330px;margin-left:auto}
.photo-apropos{display:block;width:100%;height:auto}
@media (max-width:900px){
  .carte-experience{margin:0}
  #apropos .encart{padding:34px 24px}
}



/* ---------- Encadré « sujet du moment » ---------- */
.alerte-actu{
  background:var(--surface);border:1px solid var(--filet);border-left:4px solid var(--abricot);
  border-radius:var(--r-md);padding:28px 30px;margin-top:40px;max-width:78ch
}
.alerte-actu .surtitre{color:#995A00;margin-bottom:8px}
.alerte-actu h3{font-size:21px;line-height:1.3}
.alerte-actu p{margin-top:12px;font-size:15px;line-height:1.65;color:var(--ardoise);max-width:none}
html[data-theme="dark"] .alerte-actu .surtitre{color:var(--abricot)}
@media (max-width:700px){.alerte-actu{padding:22px 20px}}