/* PerioMaster — coquille commune à toutes les pages */
:root{
  --ink:#0E2233;          /* bleu encre : titres */
  --ink2:#3A4C5C;
  --muted:#6B7C8A;
  --accent:#0B7A85;       /* turquoise médical */
  --accent-d:#095C64;
  --accent-soft:#E6F2F3;
  --clinic:#1F5FA8;       /* bleu clinique */
  --paper:#F7F8F7;        /* gris clinique très clair */
  --surface:#fff;
  --line:#E4E8EA;
  --line2:#F0F3F4;
  --ok:#2F7D6B; --warn:#B8860B; --alert:#AE2E25;
  --r:10px;
  --shadow:0 1px 2px rgba(14,34,51,.05), 0 1px 8px -4px rgba(14,34,51,.10);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:16px/1.6 Inter,"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}

/* ---------- barre supérieure ---------- */
.top{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.top .in{max-width:1200px;margin:0 auto;padding:0 20px;height:60px;display:flex;align-items:center;gap:8px}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:-.02em;
  font-size:17px;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand svg{display:block}
.top nav{display:flex;gap:2px;margin-inline-start:auto;align-items:center}
.top nav a{color:var(--ink2);padding:8px 12px;border-radius:8px;font-size:14.5px;font-weight:560}
.top nav a:hover{background:var(--accent-soft);color:var(--accent-d);text-decoration:none}
.top nav a.on{color:var(--accent-d);background:var(--accent-soft)}
.btn{display:inline-grid;place-items:center;height:42px;padding:0 20px;border-radius:var(--r);
  border:1px solid var(--accent);background:var(--accent);color:#fff;font-size:15px;font-weight:600;
  cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--accent-d);border-color:var(--accent-d);text-decoration:none;color:#fff}
.btn.ghost{background:var(--surface);color:var(--accent-d)}
.btn.ghost:hover{background:var(--accent-soft);color:var(--accent-d)}
.btn.sm{height:36px;padding:0 14px;font-size:14px}
.langsel{height:36px;border:1px solid var(--line);border-radius:8px;background:var(--surface);
  color:var(--ink2);font:560 14px/1 inherit;padding:0 30px 0 11px;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7'><path d='M1 1l4 4 4-4' fill='none' stroke='%236B7C8A' stroke-width='1.6'/></svg>");
  background-repeat:no-repeat;background-position:right 11px center}
[dir="rtl"] .langsel{padding:0 11px 0 30px;background-position:left 11px center}
.burger{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:9px;
  background:var(--surface);cursor:pointer;place-items:center}

/* ---------- contenu ---------- */
main.page{max-width:1100px;margin:0 auto;padding:28px 20px 60px}
main.full{padding:0;max-width:none}
h1{font-size:30px;line-height:1.2;letter-spacing:-.025em;margin:0 0 6px}
h2{font-size:22px;line-height:1.25;letter-spacing:-.02em;margin:0 0 8px}
.lead{color:var(--muted);font-size:17px;margin:0 0 24px;max-width:70ch}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:20px 22px;margin-bottom:16px;box-shadow:var(--shadow)}
.card > h3{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin:0 0 14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field label{display:block;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);font-weight:650;margin-bottom:6px}
.field input,.field select{width:100%;height:42px;border:1px solid var(--line);border-radius:9px;
  padding:0 12px;font:560 15px/1 inherit;color:var(--ink);background:var(--surface)}
.field input:focus,.field select:focus{outline:none;border-color:var(--accent);background:var(--accent-soft)}
.field .help{font-size:13px;color:var(--muted);margin-top:6px}
.req{color:var(--alert)}
.note{background:#FBFDFD;border:1px solid var(--line);border-inline-start:3px solid var(--accent);
  border-radius:9px;padding:13px 16px;font-size:14.5px;color:var(--ink2)}
.warnbox{background:#FFFDF6;border:1px solid #EDE3C9;border-inline-start:3px solid #C2921F;
  border-radius:9px;padding:13px 16px;font-size:14.5px;color:#5F4E22}
.ok{color:var(--accent-d);font-weight:600}

/* Consentements de communication.

   La case et sa phrase sont dans un meme <label> : cliquer la phrase coche,
   ce qui donne une cible de 40 px de haut au lieu d'un carre de 13 px. Sur un
   telephone, c'est la difference entre une case cochee et un formulaire
   abandonne.

   Le texte n'est PAS en gris clair : c'est une clause qui conditionne
   l'ouverture du compte, elle se lit comme le reste du formulaire. */
.consent{margin-top:18px;padding-top:16px;border-top:1px solid var(--line2)}
.consent__row{display:flex;gap:11px;align-items:flex-start;margin-bottom:12px;
  cursor:pointer;font-size:14.5px;line-height:1.5;color:var(--ink2)}
.consent__row input{flex:0 0 auto;width:18px;height:18px;margin:2px 0 0;accent-color:var(--accent);
  cursor:pointer}
.consent__row span{flex:1 1 auto}
.consent__note{margin:14px 0 0;font-size:13.5px;line-height:1.55;color:var(--muted)}
.consent__note a{color:var(--accent-d)}
/* Le formulaire d'activation n'a pas la grille du formulaire d'inscription :
   on lui rend la meme respiration. */
.consent + .btn{margin-top:18px}

footer.foot{border-top:1px solid var(--line);background:var(--surface);
  padding:26px 20px;color:var(--muted);font-size:13.5px}
footer.foot .in{max-width:1100px;margin:0 auto;display:flex;gap:18px;flex-wrap:wrap;align-items:center}

@media (max-width:860px){
  .top nav{display:none}
  .top nav.open{display:flex;position:absolute;top:60px;inset-inline:0;background:var(--surface);
    border-bottom:1px solid var(--line);flex-direction:column;padding:10px;gap:4px}
  .burger{display:grid}
  .grid2{grid-template-columns:1fr}
  h1{font-size:25px}
}

/* ---------- fenêtres modales ---------- */
dialog.modal{border:0;border-radius:14px;padding:26px 28px 24px;max-width:430px;width:calc(100% - 32px);
  box-shadow:0 24px 60px -18px rgba(14,34,51,.4);color:var(--ink);background:var(--surface)}
dialog.modal.wide{max-width:640px}
dialog.modal::backdrop{background:rgba(14,34,51,.45)}
dialog.modal h2{font-size:21px;margin:0 0 4px}
dialog.modal .modal-sub{color:var(--muted);font-size:14.5px;margin:0 0 20px}
dialog.modal .modal-x{position:absolute;inset-block-start:12px;inset-inline-end:14px;margin:0}
dialog.modal .modal-x button{border:0;background:none;font-size:26px;line-height:1;color:var(--muted);
  cursor:pointer;padding:0 4px}
dialog.modal .modal-x button:hover{color:var(--ink)}
dialog.modal .modal-foot{display:flex;justify-content:space-between;gap:12px;margin-top:16px;font-size:14px}
dialog.modal .modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
dialog.modal .modal-note{font-size:13px;color:var(--muted);margin:0 0 14px}
.linkish{background:none;border:0;padding:0;color:var(--accent);cursor:pointer;font:inherit;font-size:14px}
.linkish:hover{text-decoration:underline}
@media (max-width:560px){ dialog.modal .modal-grid{grid-template-columns:1fr} }

/* --- oeil de revelation sur les champs de mot de passe -------------------- */
/* La boite prend la place du champ dans la mise en page ; le champ garde sa
   largeur pleine et reserve seulement la place du bouton a la fin. */
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-inline-end:44px}
.pw-eye{position:absolute;inset-block-start:0;inset-inline-end:0;height:42px;width:42px;
        display:flex;align-items:center;justify-content:center;
        background:none;border:0;padding:0;cursor:pointer;color:var(--muted)}
.pw-eye:hover{color:var(--accent-d)}
.pw-eye:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:8px}

/* Dans les fenetres modales, le champ ne fait pas 42px de haut partout :
   on aligne le bouton sur la hauteur reelle du champ. */
.modal .pw-eye{height:100%}

/* --- bouton de suppression dans la liste --------------------------------- */
.btn-danger{background:none;border:1px solid var(--line);color:#AE2E25;border-radius:8px;
            padding:5px 11px;font:inherit;font-size:13px;cursor:pointer}
.btn-danger:hover{border-color:#AE2E25;background:#FCEDEC}


/* ---------------------------------------------------------------- accessibilite

   Lien d'evitement : invisible tant qu'on ne tabule pas dessus. Sans lui, un
   utilisateur au clavier retraverse toute la barre de navigation a chaque page
   avant d'atteindre le contenu. Il ne coute rien a qui ne s'en sert pas.        */
.skip {
    position: absolute;
    inset-inline-start: 12px;
    top: -60px;
    z-index: 999;
    background: var(--ink, #1A1917);
    color: #fff;
    padding: 10px 16px;
    border-radius: 0 0 8px 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: top .12s ease;
}
.skip:focus { top: 0; }
main:focus { outline: none; }

/* Anneau de focus visible et homogene. Les navigateurs en fournissent un, mais
   il disparait sous les fonds sombres et sur les elements dont on a redefini
   l'apparence — c'est-a-dire presque tous. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--acc, #2F6F62);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Respecte le reglage systeme « reduire les animations » : pour une personne
   sujette au vertige, une transition est un symptome, pas un detail. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Pied de page reduit pour les mises en page pleine largeur : rien que les
   liens legaux, sur une seule ligne discrete. */
.foot.slim { padding: 14px 0; border-top: 1px solid var(--line, #E6E3DD); }
.foot.slim .in { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; font-size: 12.5px; }

/* ================= bandeau cookies =================
   Il informe, il ne bloque pas. Un bandeau qui recouvre le contenu et exige un
   clic avant de laisser lire est un peage, pas une information — et il pousse
   l'utilisateur a cliquer sans lire, ce qui est exactement le contraire du but. */
.ckbanner {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 80;
    background: var(--ink, #1A1917); color: #fff;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 24px rgba(0,0,0,.18);
}
.ckbanner .in {
    max-width: 1040px; margin: 0 auto;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.ckbanner p { margin: 0; flex: 1 1 320px; font-size: 13.5px; line-height: 1.6; }
.ckbanner a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ckbanner button {
    min-height: 44px; padding: 10px 22px; border: 0; border-radius: 9px;
    background: #fff; color: var(--ink, #1A1917);
    font: inherit; font-size: 14px; font-weight: 650; cursor: pointer;
}
.ckbanner button:hover { background: #EFEDE8; }

/* ================= panneau d'accessibilite ================= */
.a11ybtn {
    position: fixed; inset-inline-start: 16px; bottom: 16px; z-index: 78;
    width: 48px; height: 48px; border-radius: 50%;
    border: 1px solid var(--line, #E6E3DD); background: var(--bg, #fff);
    color: var(--ink, #1A1917); cursor: pointer;
    box-shadow: 0 3px 14px rgba(0,0,0,.13);
    display: flex; align-items: center; justify-content: center;
}
.a11ybtn:hover { background: #F4F2EE; }
.a11ypanel {
    position: fixed; inset-inline-start: 16px; bottom: 74px; z-index: 79;
    width: min(310px, calc(100vw - 32px));
    background: var(--bg, #fff); border: 1px solid var(--line, #E6E3DD);
    border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,.18);
    padding: 16px 18px;
}
.a11ypanel h3 { margin: 0 0 4px; font-size: 14px; font-weight: 750; }
.a11ypanel .lead2 { margin: 0 0 14px; font-size: 11.5px; color: var(--muted, #8A857C); line-height: 1.55; }
.a11ypanel label {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 0; font-size: 13.5px; cursor: pointer;
    border-top: 1px solid var(--line2, #F0EEE9);
}
.a11ypanel label:first-of-type { border-top: 0; }
.a11ypanel input { width: 18px; height: 18px; accent-color: var(--acc, #2F6F62); flex: none; }
.a11ypanel .acts { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.a11ypanel .acts button {
    min-height: 40px; padding: 8px 16px; border: 1px solid var(--line, #E6E3DD);
    border-radius: 9px; background: var(--bg, #fff); font: inherit; font-size: 13px; cursor: pointer;
}
.a11ypanel .acts a { font-size: 12.5px; }

/* ---- les reglages eux-memes ----
   Ils agissent sur la racine, donc sur tout ce qui est exprime en rem — c'est
   pourquoi les tailles du site sont en rem et non en pixels. */
html.a11y-texte-grand       { font-size: 112.5%; }
html.a11y-texte-tres-grand  { font-size: 131.25%; }

html.a11y-contraste, html.a11y-contraste body {
    --ink: #000; --ink2: #1A1917; --muted: #3A3733;
    --line: #6B6660; --line2: #8A857C; --bg: #fff;
    background: #fff; color: #000;
}
html.a11y-contraste a { color: #00408F; }
html.a11y-contraste .btn, html.a11y-contraste button { border-color: #000 !important; }

html.a11y-sans-animation *, html.a11y-sans-animation *::before, html.a11y-sans-animation *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
}

/* Espacement conforme au critere 1.4.12 des WCAG, utile a la dyslexie. */
html.a11y-espace-lettres body {
    letter-spacing: .12em; word-spacing: .16em; line-height: 1.85;
}
html.a11y-espace-lettres p { margin-bottom: 2em; }

html.a11y-liens-soulignes a { text-decoration: underline; text-underline-offset: 3px; }

@media print { .ckbanner, .a11ybtn, .a11ypanel { display: none !important; } }