/* ═══════════════════════════════════════════════════════════
   BRAVO SMILE — styles partagés
   Pages secondaires : actualités, articles, mentions, confidentialité.
   La page d'accueil garde ses styles en ligne (hero spécifique).
   ═══════════════════════════════════════════════════════════ */

:root{
  --abysse:#03141F; --nuit:#062232; --fond2:#082C42;
  --bravo:#17508F;  --smile:#1B9CB0; --cyan:#45D3DE;
  --platine:#E7DBC4; --email:#F7FAFB; --perle:#AFC5D4; --ardoise:#6F8A9A;
  --corail:#FF6B5B; --vert:#4FD68F; --urgence:#D62C20;
  --grad:linear-gradient(96deg,#17508F,#178294 55%,#168090);
  --titre:'Poppins',system-ui,sans-serif;
  --corps:'DM Sans',system-ui,sans-serif;
  --max:1280px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font:400 16.5px/1.75 var(--corps);color:var(--perle);background:var(--abysse);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
/* `height:auto` est indispensable : les attributs width/height du HTML, posés
   pour réserver la place, deviennent une hauteur réelle dès qu'une règle CSS
   fixe la largeur — et l'image s'étire. */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:6px}
::selection{background:var(--cyan);color:var(--abysse)}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:clamp(20px,5vw,68px)}
.etroit{max-width:820px}
h1,h2,h3,h4{font-family:var(--titre);color:var(--email);font-weight:600;letter-spacing:-.03em;line-height:1.16}
h1{font-size:clamp(30px,4.4vw,52px)}
h2{font-size:clamp(24px,3vw,34px);margin-top:2.2em;margin-bottom:.6em}
h3{font-size:clamp(19px,2.1vw,23px);font-weight:500;margin-top:1.8em;margin-bottom:.5em}
p{margin-bottom:1.15em;max-width:70ch}
.lead{font-size:clamp(17px,1.85vw,20px);line-height:1.62;color:#93AEC0}
.mini{font-size:14.5px;color:var(--ardoise)}
.pl{color:var(--platine)}
strong{color:var(--email);font-weight:500}

body::after{content:"";position:fixed;inset:0;z-index:300;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ─── boutons ─── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;position:relative;overflow:hidden;
  font:600 16.5px var(--titre);color:#fff;padding:18px 34px;min-height:56px;border:0;border-radius:999px;
  background:var(--grad);cursor:pointer;
  box-shadow:0 18px 46px rgba(27,156,176,.32),inset 0 1px 0 rgba(255,255,255,.26)}
.btn::before{content:"";position:absolute;inset:0;transform:translateX(-120%);transition:transform .8s cubic-bezier(.2,.8,.3,1);
  background:linear-gradient(110deg,transparent 28%,rgba(255,255,255,.4) 50%,transparent 72%)}
.btn:hover::before{transform:translateX(120%)}
.btn span{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px}
.btn.mini{padding:13px 25px;min-height:48px;font-size:14.5px}
.ghost{display:inline-flex;align-items:center;justify-content:center;gap:11px;font:500 16px var(--titre);
  color:var(--platine);padding:16px 28px;border-radius:999px;border:1px solid rgba(231,219,196,.28);
  background:rgba(231,219,196,.05);transition:.3s}
.ghost:hover{border-color:var(--platine);background:rgba(231,219,196,.11)}
.btn svg,.ghost svg{width:19px;height:19px;flex-shrink:0}

/* ─── en-tête ─── */
header{position:fixed;inset:0 0 auto;z-index:100;transition:background .4s,backdrop-filter .4s,border-color .4s;
  border-bottom:1px solid transparent}
header.on{background:rgba(3,20,31,.84);backdrop-filter:blur(22px);border-bottom-color:rgba(255,255,255,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:96px}
.nav>a:first-child img{height:62px;width:auto}
@media(max-width:620px){.nav>a:first-child img{height:50px}.nav{min-height:80px}}
.menu{display:none;gap:36px}
.menu a{font:500 16.5px var(--corps);color:var(--perle);position:relative;padding-block:5px;transition:color .25s}
.menu a::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:var(--platine);
  transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.3,1)}
.menu a:hover{color:var(--email)}
.menu a:hover::after,.menu a[aria-current]::after{transform:scaleX(1)}
.menu a[aria-current]{color:var(--platine)}
.nav-r{display:flex;align-items:center;gap:14px}
/* Le sélecteur FR/ع a été retiré : le site reste en français. Un bouton de
   langue qui ne mène nulle part promet une version arabe qui n'existe pas —
   et le jour où elle existera, elle demandera un vrai routage, pas un bouton. */
@media(min-width:1080px){.menu{display:flex}}

/* ═══ NAVIGATION MOBILE — ajoutée le 08/08/2026 ═══
   L'accueil avait reçu un tiroir en août ; les neuf autres pages, non. Sous
   1080 px, le menu disparaît : un patient qui arrivait sur un article depuis
   Google — ce qui est précisément le rôle de ces articles — se retrouvait sans
   aucun moyen d'aller voir les soins, le praticien ou les horaires. Il lui
   restait le fil d'Ariane et le pied de page.
   Le bouton d'appel manquait aussi, sur des pages qui parlent d'urgences. */
.rond{position:relative;width:44px;height:44px;border-radius:50%;border:1px solid rgba(231,219,196,.22);
  background:rgba(231,219,196,.09);color:var(--platine);display:none;place-items:center;
  cursor:pointer;padding:0;transition:background .25s,transform .25s}
.rond:hover{background:rgba(231,219,196,.16)}
.rond svg{width:19px;height:19px}
.rond.appel{background:var(--urgence,#D62C20);border-color:transparent;color:#fff;
  box-shadow:0 10px 26px rgba(214,44,32,.4)}
.rond.appel:hover{background:#E8382B}
.menu-b .ferme,.menu-b[aria-expanded="true"] .ouvre{display:none}
.menu-b[aria-expanded="true"] .ferme{display:block}

.mdrawer{display:none;flex-direction:column;gap:2px;padding:8px 20px 22px;
  background:rgba(3,20,31,.96);backdrop-filter:blur(22px);
  border-top:1px solid rgba(255,255,255,.08)}
.mdrawer.on{display:flex}
.mdrawer a{font:500 17px var(--corps);color:var(--perle);padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.07);display:block;margin:0}
.mdrawer a:last-of-type{border-bottom:0}
.mdrawer .btn{margin-top:14px;justify-content:center}

@media(max-width:900px){
  .rond{display:grid}
  .nav-r .btn.mini{display:none}
  .nav{min-height:78px;gap:12px}
  .nav>a:first-child img{height:44px}
  .nav-r{gap:9px}
}

/* ─── bandeau de page ─── */
.tete-page{padding:clamp(150px,17vw,210px) 0 clamp(48px,6vw,76px);position:relative;overflow:hidden;
  background:radial-gradient(72% 62% at 72% 18%,rgba(27,156,176,.2),transparent 64%),
             linear-gradient(158deg,#03141F,#062232 58%,#03141F)}
.tete-page::before{content:"";position:absolute;inset:0;opacity:.16;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:88px 88px;mask-image:radial-gradient(70% 70% at 60% 40%,#000,transparent 76%)}
.tete-page .wrap{position:relative;z-index:2}
.fil{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13.5px;color:var(--ardoise);margin-bottom:22px}
.fil a:hover{color:var(--platine)}
.fil svg{width:13px;height:13px;opacity:.6}

/* ─── contenu rédactionnel ─── */
.doc{padding-block:clamp(48px,6vw,76px) clamp(72px,9vw,110px)}
.doc h2{color:var(--email)}
.doc h2:first-child{margin-top:0}
.doc ul,.doc ol{margin:0 0 1.3em 0;padding-left:0;list-style:none;max-width:70ch}
.doc li{position:relative;padding-left:26px;margin-bottom:.6em}
.doc ul li::before{content:"";position:absolute;left:2px;top:12px;width:6px;height:6px;border-radius:50%;background:var(--cyan)}
.doc ol{counter-reset:o}
.doc ol li{counter-increment:o;padding-left:34px}
.doc ol li::before{content:counter(o);position:absolute;left:0;top:0;font:500 13px var(--titre);color:var(--cyan);
  width:22px;height:22px;border-radius:50%;border:1px solid rgba(69,211,222,.35);display:grid;place-items:center}
.doc a:not(.btn):not(.ghost){color:var(--cyan);border-bottom:1px solid rgba(69,211,222,.35);transition:.25s}
.doc a:not(.btn):not(.ghost):hover{border-bottom-color:var(--cyan)}
.doc table{width:100%;border-collapse:collapse;margin-bottom:1.6em;font-size:15.5px}
.doc th,.doc td{text-align:left;padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.09);vertical-align:top}
.doc th{font:500 14px var(--titre);color:var(--platine);letter-spacing:.02em}
.doc td{color:var(--ardoise)}
.encart{margin:2em 0;padding:26px 28px;border-radius:20px;
  background:linear-gradient(160deg,rgba(69,211,222,.09),rgba(255,255,255,.02));
  border:1px solid rgba(69,211,222,.24)}
.encart p:last-child{margin-bottom:0}
.encart.alerte{background:linear-gradient(160deg,rgba(224,160,58,.11),rgba(255,255,255,.02));border-color:rgba(224,160,58,.3)}
.encart b{display:block;font:500 15.5px var(--titre);color:var(--email);margin-bottom:8px}
.maj{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:999px;
  background:rgba(231,219,196,.07);border:1px solid rgba(231,219,196,.2);
  font:500 13px var(--corps);color:var(--platine);margin-bottom:26px}

/* ─── sommaire ─── */
.somm{position:sticky;top:130px;padding:26px;border-radius:22px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09)}
.somm b{display:block;font:500 13px var(--titre);color:var(--platine);letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:16px}
.somm a{display:block;padding:8px 0 8px 15px;font-size:14.5px;color:var(--ardoise);
  border-left:1px solid rgba(255,255,255,.12);transition:.25s}
.somm a:hover,.somm a.actif{color:var(--platine);border-left-color:var(--cyan)}
.avec-somm{display:grid;gap:48px}
@media(min-width:1000px){.avec-somm{grid-template-columns:1fr 280px;gap:64px;align-items:start}
  .avec-somm .somm{order:2}.avec-somm .doc{order:1}}

/* ─── grille d'articles ─── */
.arts{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:700px){.arts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.arts{grid-template-columns:repeat(3,1fr)}.art.une{grid-column:span 2}}
.art{display:flex;flex-direction:column;gap:12px;padding:30px 30px 32px;border-radius:24px;
  border:1px solid rgba(255,255,255,.09);overflow:hidden;position:relative;
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  transition:transform .45s cubic-bezier(.2,.8,.3,1),border-color .45s}
.art:hover{transform:translateY(-5px);border-color:rgba(69,211,222,.4)}
.art .cat{display:inline-flex;align-self:flex-start;padding:6px 13px;border-radius:999px;
  background:rgba(69,211,222,.12);border:1px solid rgba(69,211,222,.26);
  font:500 12px var(--corps);color:var(--cyan);letter-spacing:.06em;text-transform:uppercase}
.art h3{margin:0;font-weight:600}
.art p{font-size:15px;color:var(--ardoise);margin:0}
.art .meta{margin-top:auto;padding-top:16px;display:flex;align-items:center;gap:14px;
  font-size:13px;color:var(--ardoise)}
.art .meta .fl{margin-left:auto;display:inline-flex;align-items:center;gap:8px;color:var(--platine);font-weight:500}
.art .meta svg{width:15px;height:15px;transition:transform .35s}
.art:hover .meta svg{transform:translateX(5px)}
.art.une{background:linear-gradient(150deg,rgba(27,156,176,.16),rgba(23,80,143,.06))}
.art.une h3{font-size:clamp(22px,2.6vw,28px)}
.art.bientot{opacity:.55;pointer-events:none}
.art.bientot .cat{background:rgba(231,219,196,.09);border-color:rgba(231,219,196,.22);color:var(--platine)}

/* ─── pied ─── */
.pied{background:#020D16;padding-block:80px 26px;font-size:15px;color:var(--ardoise);border-top:1px solid rgba(255,255,255,.07)}
.pg{display:grid;gap:44px;margin-bottom:56px}
@media(min-width:780px){.pg{grid-template-columns:1.7fr 1fr 1fr 1fr}}
.pied h4{font:500 15px var(--titre);color:var(--email);margin-bottom:17px}
.pied a{display:block;margin-bottom:10px;transition:color .25s}
.pied a:hover{color:var(--platine)}
.soc{display:flex;gap:10px;margin-top:22px}
.soc a{width:42px;height:42px;border-radius:13px;background:rgba(255,255,255,.06);display:grid;place-items:center;margin:0;
  transition:background .3s,transform .3s}
.soc a:hover{background:rgba(231,219,196,.15);transform:translateY(-3px)}
.soc svg{width:18px;height:18px}
.pb{border-top:1px solid rgba(255,255,255,.08);padding-top:25px;display:flex;flex-wrap:wrap;gap:13px 30px;
  justify-content:space-between;font-size:13.5px}

/* ─── le pied sur téléphone ───
   Il mesurait 1216 px sur un écran de 812 : quatre blocs empilés, 44 px entre
   chacun, 84 px de marge haute. Les trois listes de liens sont courtes et
   tiennent très bien deux par deux. */
@media(max-width:780px){
  .pied{padding-block:44px 20px;font-size:14px}
  .pg{gap:26px 20px;margin-bottom:26px;grid-template-columns:1fr 1fr}
  .pg>div:first-child{grid-column:1/-1}
  /* `!important` uniquement parce que la hauteur du logo est posée en style en
     ligne dans les dix pages. À 66 px il mangeait un tiers de la largeur. */
  .pg>div:first-child img{height:44px!important}
  .pg>div:first-child p{margin-top:14px!important;font-size:13.5px;line-height:1.55}
  .pied h4{margin-bottom:9px;font-size:14px}
  .pied a{margin-bottom:6px}
  .soc{margin-top:14px}
  .pb{padding-top:16px;gap:6px;font-size:12.5px;flex-direction:column;text-align:left}
}

/* ─── bulle de contact ─── */
.chat{position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:150;
  display:flex;flex-direction:column;align-items:flex-end;gap:14px;
  transition:opacity .35s cubic-bezier(.2,.8,.3,1),transform .35s cubic-bezier(.2,.8,.3,1),visibility .35s}
/* La bulle se pose exactement au-dessus de la colonne « Informations » du pied
   de page et en rendait les liens incliquables. Elle s'efface dès que le pied
   entre à l'écran — il porte déjà le téléphone, WhatsApp et l'adresse. */
.chat.range{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(14px)}

/* Le conteneur de la bulle ne capte rien — voir le commentaire détaillé dans
   index.html. En résumé : le panneau garde sa hauteur même fermé, donc `.chat`
   mesure 320 × 595 px et recouvrait 63 % d'un écran de téléphone avec une boîte
   transparente qui interceptait tous les touchers. */
.chat{pointer-events:none}
.chat-p{pointer-events:none}
.chat.on .chat-p{pointer-events:auto}
.urg-cta,.cb{pointer-events:auto}

/* ─── CTA d'urgence ───
   Sur un site de cabinet dentaire, la douleur est le seul motif qui n'attend
   pas. Elle a son bouton, toujours visible, et elle appelle — un formulaire ne
   soulage personne à 22 h.
   Icône seule, en rouge franc : deux pastilles rondes empilées se lisent d'un
   coup d'œil, et le rouge dit ce qu'aucun mot n'a besoin de dire. Le libellé
   n'est pas perdu pour autant — il revient au survol et au clavier, et
   `aria-label` porte le numéro pour les lecteurs d'écran. */
.urg-cta{position:relative;width:62px;height:62px;border-radius:50%;
  display:grid;place-items:center;background:var(--urgence);color:#fff;
  box-shadow:0 16px 40px rgba(214,44,32,.46),inset 0 1px 0 rgba(255,255,255,.26);
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s}
.urg-cta:hover{transform:scale(1.06);box-shadow:0 20px 46px rgba(214,44,32,.56)}
.urg-cta svg{width:26px;height:26px}
/* Info-bulle à gauche : à droite elle sortirait de l'écran. */
.urg-cta::after{content:attr(data-info);position:absolute;right:calc(100% + 13px);top:50%;
  padding:9px 15px;border-radius:999px;white-space:nowrap;
  background:rgba(6,34,50,.94);border:1px solid rgba(231,219,196,.22);backdrop-filter:blur(18px);
  font:500 13.5px var(--corps);color:var(--email);
  opacity:0;pointer-events:none;translate:8px -50%;
  transition:opacity .25s cubic-bezier(.2,.8,.3,1),translate .25s cubic-bezier(.2,.8,.3,1)}
.urg-cta:hover::after,.urg-cta:focus-visible::after{opacity:1;translate:0 -50%}
@media(max-width:620px){.urg-cta{width:54px;height:54px}.urg-cta svg{width:23px;height:23px}
  /* Au doigt il n'y a pas de survol : l'info-bulle ne servirait qu'à masquer. */
  .urg-cta::after{display:none}}
.chat-p{width:min(320px,calc(100vw - 40px));padding:22px;border-radius:24px;transform-origin:bottom right;
  background:rgba(6,34,50,.88);border:1px solid rgba(231,219,196,.22);backdrop-filter:blur(24px);
  box-shadow:0 26px 60px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(14px) scale(.94);
  transition:opacity .32s cubic-bezier(.2,.8,.3,1),transform .32s cubic-bezier(.2,.8,.3,1),visibility .32s}
.chat.on .chat-p{opacity:1;visibility:visible;transform:none}
.ct{display:flex;align-items:center;gap:11px;padding-bottom:15px;margin-bottom:15px;border-bottom:1px solid rgba(255,255,255,.11)}
.ct .av2{width:40px;height:40px;border-radius:50%;background:var(--grad);flex-shrink:0;display:grid;place-items:center;
  color:#fff;font:600 15px var(--titre)}
.ct b{display:block;font:500 14.5px var(--titre);color:var(--email)}
.ct em{font-style:normal;font-size:12px;color:var(--vert);display:flex;align-items:center;gap:6px}
.ct em::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--vert)}
.chat-m{font-size:14.5px;line-height:1.55;color:var(--perle);margin-bottom:16px}
.ca{display:grid;gap:9px}
.ca a{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:15px;margin:0;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);transition:.25s}
.ca a:hover{border-color:rgba(69,211,222,.5);background:rgba(69,211,222,.09);transform:translateX(3px)}
.ca svg{width:19px;height:19px;flex-shrink:0;color:var(--cyan)}
.ca .wa svg{color:var(--vert)}
.ca b{display:block;font:500 14.5px var(--titre);color:var(--email)}
.ca small{font-size:12px;color:var(--ardoise)}
.cb{position:relative;width:62px;height:62px;border:0;border-radius:50%;cursor:pointer;background:var(--grad);
  display:grid;place-items:center;box-shadow:0 16px 40px rgba(27,156,176,.42);transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.cb:hover{transform:scale(1.06)}
.cb svg{width:26px;height:26px;color:#fff;position:absolute;transition:opacity .25s,transform .25s}
.cb .fer{opacity:0;transform:rotate(-90deg) scale(.6)}
.chat.on .cb .ouv{opacity:0;transform:rotate(90deg) scale(.6)}
.chat.on .cb .fer{opacity:1;transform:none}
.cb::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(69,211,222,.5);
  animation:onde 2.6s ease-out infinite}
@keyframes onde{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.42);opacity:0}}
.chat.on .cb::after{animation:none}

/* ═══ BANDEAU COOKIES ═══
   Refus aussi accessible qu'acceptation — un « tout refuser » caché est
   une non-conformité, et la loi 09-08 comme le RGPD exigent un consentement
   libre. Rien n'est déposé avant le clic. */
.cookies{position:fixed;left:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:160;
  width:min(430px,calc(100vw - 32px));padding:26px 26px 22px;border-radius:24px;
  background:rgba(6,34,50,.94);border:1px solid rgba(231,219,196,.24);backdrop-filter:blur(24px);
  box-shadow:0 30px 70px rgba(0,0,0,.55);transform:translateY(20px);opacity:0;visibility:hidden;
  transition:opacity .4s cubic-bezier(.2,.8,.3,1),transform .4s cubic-bezier(.2,.8,.3,1),visibility .4s}
.cookies.on{opacity:1;visibility:visible;transform:none}
.cookies h4{font:500 16px var(--titre);color:var(--email);margin-bottom:9px;display:flex;align-items:center;gap:10px}
.cookies h4 svg{width:19px;height:19px;color:var(--cyan)}
.cookies p{font-size:14px;line-height:1.6;color:var(--ardoise);margin-bottom:18px;max-width:none}
.cookies p a{color:var(--cyan);border-bottom:1px solid rgba(69,211,222,.4)}
.ck-act{display:flex;flex-wrap:wrap;gap:10px}
.ck-act button{flex:1;min-width:130px;padding:13px 18px;border-radius:999px;cursor:pointer;
  font:500 14.5px var(--corps);border:1px solid rgba(231,219,196,.28);
  background:rgba(231,219,196,.05);color:var(--platine);transition:.25s}
.ck-act button:hover{border-color:var(--platine);background:rgba(231,219,196,.12)}
.ck-act button.ok{border:0;color:#fff;background:var(--grad);font-weight:600;
  box-shadow:0 12px 30px rgba(27,156,176,.3)}
.ck-reglages{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);display:none}
.ck-reglages.on{display:block}
.ck-l{display:flex;align-items:flex-start;gap:12px;padding-block:11px}
.ck-l input{width:19px;height:19px;flex-shrink:0;margin-top:2px;accent-color:var(--cyan)}
.ck-l b{display:block;font:500 14px var(--titre);color:var(--email)}
.ck-l small{font-size:12.5px;color:var(--ardoise);line-height:1.5}
.ck-lien{background:none;border:0;color:var(--cyan);font:500 13.5px var(--corps);cursor:pointer;
  padding:0;margin-top:14px;text-decoration:underline;text-underline-offset:3px}

/* ─── mention de sécurité du formulaire ─── */
.secu{display:flex;align-items:flex-start;gap:11px;margin-top:16px;padding:14px 16px;border-radius:15px;
  background:rgba(79,214,143,.08);border:1px solid rgba(79,214,143,.22)}
.secu svg{width:18px;height:18px;color:var(--vert);flex-shrink:0;margin-top:2px}
.secu span{font-size:13px;line-height:1.55;color:var(--perle)}
.secu a{color:var(--vert);text-decoration:underline;text-underline-offset:2px}

/* Pas d'`opacity:0` ici : le masquage est posé par site.js juste avant
   d'observer les éléments. Tant qu'il vivait dans cette feuille, le contenu
   dépendait du JavaScript pour redevenir visible — script bloqué, réseau
   coupé, et la page restait blanche. Sur un site de santé, ce n'est pas une
   animation ratée, c'est un cabinet introuvable. */
.up{transform:translateY(28px)}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .up{opacity:1!important;transform:none!important}}