/* =====================================================================
   Rétrocom : feuille de style commune à toutes les pages du site
   Thème : central téléphonique des années 1930 (vert de central, laiton,
   bakélite). Mode clair et mode sombre.

   UTILISATION
   Dans le <head> de chaque page :

     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
     <link rel="stylesheet" href="retrocom.css">

   Les polices (Josefin Sans et Source Serif 4, licence SIL OFL) sont hébergées
   sur le site, dans assets/fonts : aucune requête vers Google, aucune adresse IP
   transmise. Ce sont des sous-ensembles « latin » (français compris), déclarés
   par les règles @font-face ci-dessous.

   MODE SOMBRE
   Suit le réglage de l'appareil. Pour le forcer : <html data-theme="dark">
   ou <html data-theme="light">.

   SOMMAIRE
    1. Variables (couleurs, polices, formes)
    2. Base et typographie
    3. Mise en page
    4. En-tête, menu et logo
    5. Boutons
    6. Bandeau d'accueil (hero)
    7. Sections, colonnes, étapes
    8. Cartes et messages
    9. Formulaires
   10. Tableaux
   11. Galerie
   12. Pages de texte (mentions, confidentialité)
   13. Bas de page
   14. Utilitaires
   15. Cadran et téléphone (page d'accueil uniquement, facultatif)
   16. Adaptation aux petits écrans, mouvement réduit, impression
   17. Pages dynamiques : inscription, connexion, espace abonné
   ===================================================================== */

/* Polices hébergées (voir assets/fonts/LICENCES-OFL.txt) */
@font-face { font-family: 'Josefin Sans'; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url('../fonts/josefin-sans.woff') format('woff'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('../fonts/source-serif-4.woff') format('woff'); }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/source-serif-4-italic.woff') format('woff'); }



/* ---------------------------------------------------------------------
   1. Variables
   --------------------------------------------------------------------- */
:root {
  /* Couleurs, mode clair */
  --paper:    #e8ece6;   /* fond de page */
  --card:     #f4f6f1;   /* cartes, formulaires, tableaux */
  --ink:      #1b2b25;   /* texte principal */
  --muted:    #4f625a;   /* texte atténué */
  --line:     #c4cfc7;   /* filets et bordures */
  --panel:    #2f4b3e;   /* vert de central : bandeaux et fonds forts */
  --on-panel: #eef3ee;   /* texte sur fond vert */
  --brass:    #c9953a;   /* laiton : accents et boutons */
  --on-brass: #1b2b25;   /* texte sur laiton */
  --bake:     #2b211c;   /* bakélite */
  --accent:   #2f4b3e;   /* liens et repères */
  --win:      #ecefe4;   /* ivoire : fenêtre d'affichage du numéro */
  --error:    #a3341f;   /* messages d'erreur */

  /* Polices */
  --head: "Josefin Sans", "Trebuchet MS", sans-serif;
  --body: "Source Serif 4", Georgia, serif;

  /* Formes */
  --radius-s: 6px;       /* boutons, champs */
  --radius-m: 10px;      /* cartes, tableaux */
  --wrap: 1080px;        /* largeur maximale du contenu */

  /* Zones sûres des téléphones à encoche */
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Mode sombre : réglage de l'appareil */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121c18; --card: #1b2a24; --ink: #e6ede8; --muted: #9bb0a6;
    --line: #2b3f36; --panel: #1b2a24; --bake: #0f0b09; --accent: #8cc4ac;
    --error: #ff9b86;
  }
}
/* Mode sombre : forcé par la page */
:root[data-theme="dark"] {
  --paper: #121c18; --card: #1b2a24; --ink: #e6ede8; --muted: #9bb0a6;
  --line: #2b3f36; --panel: #1b2a24; --bake: #0f0b09; --accent: #8cc4ac;
  --error: #ff9b86;
}


/* ---------------------------------------------------------------------
   2. Base et typographie
   --------------------------------------------------------------------- */
html { scroll-padding-top: env(safe-area-inset-top, 0px); scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.125rem/1.65 var(--body);
}

h1, h2, h3 {
  font-family: var(--head);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .005em;
  margin: 0;
}
h3.sub { font-size: 1.4rem; margin-bottom: .5rem; }

a { color: inherit; }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }

[hidden] { display: none !important; }


/* ---------------------------------------------------------------------
   3. Mise en page
   --------------------------------------------------------------------- */
.wrap   { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
.narrow { max-width: 28rem; }
.row    { display: flex; gap: .7rem; flex-wrap: wrap; }
.stack > * + * { margin-top: 1.25rem; }
.centre { margin-left: auto; margin-right: auto; }   /* bloc centré, même largeur */
.centre > h1, .centre > .intro, .centre > p { text-align: center; }

/* Deux colonnes égales (formulaire à côté d'un texte) */
.get { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }


/* ---------------------------------------------------------------------
   4. En-tête, menu et logo
   --------------------------------------------------------------------- */
header { border-bottom: 1px solid var(--line); }
header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 1rem; flex-wrap: wrap;
}

/* <a class="logo" href="/">Rétro<span>com</span></a> */
.logo { font: 700 1.4rem var(--head); text-decoration: none; }
.logo span {
  background: var(--brass); color: var(--on-brass);
  padding: 0 .4rem; border-radius: 3px; margin-left: .2rem;
}

nav { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; font-family: var(--head); font-weight: 500; }
nav a { text-decoration: none; }
nav a:hover { text-decoration: underline; }
nav a.navbtn { border: 2px solid var(--ink); border-radius: var(--radius-s); padding: .1rem .8rem; }


/* ---------------------------------------------------------------------
   5. Boutons
   --------------------------------------------------------------------- */
.btn {
  display: inline-block;
  background: var(--brass); color: var(--on-brass);
  font: 700 1rem var(--head);
  border: 0; border-radius: var(--radius-s);
  padding: .8rem 1.3rem;
  text-decoration: none; cursor: pointer;
}
.btn:hover { filter: brightness(1.07); }
.btn.ghost { background: transparent; color: inherit; border: 2px solid currentColor; }
.btn:disabled { opacity: .5; cursor: not-allowed; }


/* ---------------------------------------------------------------------
   6. Bandeau d'accueil (hero) : fond vert de central, texte clair
   --------------------------------------------------------------------- */
.hero { background: var(--panel); color: var(--on-panel); padding: 3.5rem 0 4rem; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; }
.hero h1 { font-size: clamp(2.3rem, 5.2vw, 3.8rem); }
.hero .lead { font-size: 1.25rem; max-width: 34rem; margin: 1.25rem 0 1.75rem; opacity: .92; }
.hero .cta { display: flex; gap: .8rem; flex-wrap: wrap; }


/* ---------------------------------------------------------------------
   7. Sections, colonnes, étapes
   --------------------------------------------------------------------- */
section.block { padding: 4rem 0; border-top: 1px solid var(--line); }
section.block h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); margin-bottom: .75rem; }
section.block h2.csub { font-size: 1.25rem; margin-bottom: .3rem; }
.assoc { background: var(--card); }   /* section sur fond de carte */

.ptitle { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: .75rem; }   /* titre de page */
.intro  { color: var(--muted); max-width: 40rem; margin: 0 0 2rem; }
.fine   { color: var(--muted); font-size: .98rem; }

/* Colonnes avec un trait de couleur au-dessus (jusqu'à quatre couleurs) */
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-bottom: 2.5rem; }
.col { border-top: 4px solid var(--brass); padding-top: 1rem; }
.col:nth-child(2) { border-color: var(--panel); }
.col:nth-child(3) { border-color: var(--accent); }
.col:nth-child(4) { border-color: var(--bake); }
.col h3 { font-size: 1.3rem; margin-bottom: .4rem; }
.col p  { margin: 0; color: var(--muted); }

/* Étapes numérotées : <ol class="steps"><li><div><h3>…</h3><p>…</p></div></li></ol> */
ol.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 1.25rem; max-width: 42rem; }
ol.steps li { counter-increment: s; display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: start; }
ol.steps li::before {
  content: counter(s);
  display: grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--bake); color: var(--brass);
  font: 700 1.3rem var(--head);
}
ol.steps h3 { font-size: 1.2rem; margin-bottom: .2rem; }
ol.steps p  { margin: 0; color: var(--muted); }


/* ---------------------------------------------------------------------
   8. Cartes et messages
   --------------------------------------------------------------------- */
.panelcard {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-m); padding: 1.5rem;
}

/* Liste de définitions en deux colonnes (fiche d'un compte) */
dl.acc { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.25rem; margin: 0; }
dl.acc dt { font: 600 1rem var(--head); color: var(--muted); }
dl.acc dd { margin: 0; font-weight: 600; }

/* Message de confirmation, caché tant qu'il n'a pas la classe « show » */
.ok { display: none; background: var(--panel); color: var(--on-panel); padding: 1rem; border-radius: var(--radius-s); margin-top: 1rem; }
.ok.show { display: block; }
.ok b { display: block; font: 700 1.6rem var(--head); letter-spacing: .1em; }

/* Message d'état ou d'erreur sous un formulaire */
.msg { min-height: 1.7em; margin: .9rem 0 0; }
.msg.err { color: var(--error); }

/* Aperçu d'un texte préparé (courriel, par exemple) */
.preview {
  white-space: pre-wrap; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: .8rem 1rem; font-size: .98rem; margin-top: .75rem;
}


/* ---------------------------------------------------------------------
   9. Formulaires
   --------------------------------------------------------------------- */
form {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-m); padding: 1.5rem;
}
form.plain { background: none; border: 0; padding: 0; }   /* formulaire sans cadre */
form div { margin-bottom: 1rem; }
form label { display: block; font: 600 1rem var(--head); margin-bottom: .35rem; }
form input, form select, form textarea {
  width: 100%; font: inherit;
  padding: .65rem .75rem;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--paper); color: var(--ink);
}
form textarea { resize: vertical; }


/* ---------------------------------------------------------------------
   10. Tableaux : à placer dans <div class="tablewrap"> pour défiler
       sur les petits écrans
   --------------------------------------------------------------------- */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--card); }
table { border-collapse: collapse; width: 100%; min-width: 600px; }
th, td { text-align: left; padding: .75rem 1rem; border-bottom: 1px solid var(--line); }
th { font: 600 1rem var(--head); color: var(--muted); }
tr:last-child td { border-bottom: 0; }

td.num { font: 700 1.15rem var(--head); letter-spacing: .08em; white-space: nowrap; }   /* numéros de téléphone */
td.act { white-space: nowrap; }                                                         /* boutons d'une ligne */
td.act button { margin-right: .4rem; }
td.act button:disabled { opacity: .4; cursor: not-allowed; }
td button {
  font: 600 .95rem var(--head); background: transparent; color: var(--ink);
  border: 2px solid var(--ink); border-radius: var(--radius-s);
  padding: .35rem .8rem; cursor: pointer;
}
td button:hover { background: var(--ink); color: var(--paper); }
table td input[type=text] {
  width: 100%; min-width: 9rem; font: inherit; padding: .4rem .6rem;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--paper); color: var(--ink);
}

/* Tableaux des centraux : un ou deux côte à côte */
.exch  { max-width: 34rem; }
.exch table { min-width: 0; }
.exchs { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.exchs .exch { max-width: none; }


/* ---------------------------------------------------------------------
   11. Galerie : <div class="gallery"><figure><svg|img><figcaption>…
   --------------------------------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
.gallery figure { margin: 0; }
.gallery svg, .gallery img { display: block; width: 100%; height: auto; border-radius: var(--radius-m); }
.gallery figcaption { padding-top: .85rem; }
.gallery h3 { font-size: 1.25rem; margin-bottom: .3rem; }
.gallery p  { margin: 0; color: var(--muted); }


/* ---------------------------------------------------------------------
   12. Pages de texte (mentions légales, confidentialité) : <div class="legal">
   --------------------------------------------------------------------- */
.legal { max-width: 46rem; }
section.block .legal h2 { font-size: 1.4rem; margin: 2.2rem 0 .5rem; }
section.block .legal .panelcard h2 { margin-top: 0; }
section.block .legal > h2 { font-size: 1.7rem; margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--line, #c5cdc3); }
section.block .legal h3 { font-size: 1.1rem; margin: 1.6rem 0 .3rem; }
.tlignes td small.fine { display: block; color: var(--muted); font-size: .85rem; margin-top: .15rem; }
.legal ul { padding-left: 1.2rem; margin: .5rem 0; }
.legal li { margin: .4rem 0; }


/* ---------------------------------------------------------------------
   13. Bas de page
   --------------------------------------------------------------------- */
footer.site { border-top: 1px solid var(--line); padding: 2rem 0; color: var(--muted); font-size: .95rem; text-align: center; }
footer.site a { color: inherit; }


/* ---------------------------------------------------------------------
   14. Utilitaires
   --------------------------------------------------------------------- */
/* Texte lisible seulement par les lecteurs d'écran */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }


/* ---------------------------------------------------------------------
   15. Cadran et téléphone : page d'accueil uniquement.
       Cette partie peut être supprimée des autres pages du site.
   --------------------------------------------------------------------- */
.phone { text-align: center; }

/* Sélecteur Province / Paris : pastilles à contour */
.mode { border: 0; padding: 0; margin: 0 0 1rem; display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.mode label { margin: 0; }
.mode input { position: absolute; opacity: 0; }
.mode span { display: inline-block; padding: .45rem .9rem; border: 2px solid var(--on-panel); border-radius: 999px; cursor: pointer; font: 600 .95rem var(--head); }
.mode input:checked + span { background: var(--on-panel); color: var(--panel); }
.mode input:focus-visible + span { outline: 3px solid var(--brass); outline-offset: 2px; }

/* Fenêtre d'affichage du numéro composé */
.readout {
  display: inline-block; min-width: 11rem;
  background: var(--win); color: #1b2b25;
  border-radius: 8px; padding: .45rem 1.1rem; margin-bottom: 1rem;
  font: 700 2rem var(--head); letter-spacing: .12em; white-space: nowrap;
}

/* Le cadran : la plaque, le disque et les boutons des trous sont superposés */
.dial { position: relative; width: min(340px, 100%); aspect-ratio: 1; margin: 0 auto; }
.dial svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#disc { transform-origin: 50% 50%; }
.hole {
  position: absolute; width: 15.4%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%; border: 0; background: transparent; cursor: pointer; padding: 0;
}
.hole:hover { box-shadow: 0 0 0 3px rgba(201, 149, 58, .75); }

/* Médaillon central : <div class="dial-card">Rétro<span class="com">com</span></div> */
.dial-card {
  position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--win); color: #1b2b25;
  display: flex; align-items: center; justify-content: center;
  white-space: nowrap; text-align: center;
  font: 700 .95rem/1.1 var(--head); pointer-events: none;
}
.dial-card .com { background: var(--brass); color: var(--on-brass); border-radius: 3px; padding: 1px 4px; margin-left: 2px; }

#status { min-height: 4.4em; margin: 1rem auto .75rem; max-width: 22rem; }
.btns { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.hint { font-size: .95rem; opacity: .85; margin: .75rem auto 0; max-width: 24rem; }


/* ---------------------------------------------------------------------
   16. Petits écrans, mouvement réduit, impression
   --------------------------------------------------------------------- */
@media (max-width: 820px) {
  .hero .wrap, .get, .exchs { grid-template-columns: 1fr; gap: 2rem; }
  .hero { padding-top: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media print {
  :root { padding: 0; }
  header nav, .btn, .btns, .hero .cta { display: none; }
  body { background: #fff; color: #000; }
  .hero { background: none; color: #000; padding: 1rem 0; }
  section.block { padding: 1.5rem 0; }
  a { text-decoration: underline; }
}


/* ---------------------------------------------------------------------
   17. Pages dynamiques : inscription, connexion, espace abonné
   --------------------------------------------------------------------- */
/* Bandeau de message : <p class="alert">…</p> ou <p class="alert err">…</p> */
.alert {
  background: var(--card); border: 1px solid var(--line);
  border-left: 4px solid var(--accent); border-radius: var(--radius-s);
  padding: .8rem 1rem; margin: 0 0 1rem;
}
.alert.err { border-left-color: var(--error); }

/* Code d'accès, montré une seule fois */
.codebox { background: var(--panel); color: var(--on-panel); border-radius: var(--radius-m); padding: 1.25rem 1.5rem; }
.codebox p { margin: 0; }
.codebox b { display: block; margin: .4rem 0; font: 700 2rem var(--head); letter-spacing: .16em; }

/* Petit formulaire sur une ligne (dans une cellule de tableau, par exemple) */
form.inline { display: flex; gap: .5rem; align-items: center; background: none; border: 0; padding: 0; }
form.inline div { margin: 0; }
form.inline input[type=text] { min-width: 9rem; }

/* Case à cocher suivie de son texte */
form label.check { display: flex; gap: .6rem; align-items: flex-start; font: 400 1rem var(--body); margin-bottom: 1rem; }
form label.check input { width: auto; margin-top: .35rem; }

/* Page d'inscription : plus large, centrée */
.inscr { max-width: 40rem; margin: 0 auto; }
.inscr > h1, .inscr > .intro, .inscr > .fine { text-align: center; }
.inscr form { padding: 2rem; }
.inscr form input[type=text], .inscr form input[type=email], .inscr form select, .inscr form textarea { font-size: 1.05rem; padding: .75rem .85rem; }

/* Choix de la zone : deux pastilles */
fieldset.zones { border: 0; padding: 0; margin: 0 0 1.25rem; display: flex; gap: .6rem; flex-wrap: wrap; }
fieldset.zones legend { font: 600 1rem var(--head); padding: 0; margin-bottom: .1rem; float: left; width: 100%; }
fieldset.zones label { display: block; margin: 0; flex: 1 1 14rem; }
fieldset.zones input { position: absolute; opacity: 0; width: 1px; }
fieldset.zones span { display: block; padding: .7rem 1rem; border: 2px solid var(--line); border-radius: var(--radius-s); cursor: pointer; font: 600 1rem var(--head); text-align: center; background: var(--paper); }
fieldset.zones small { display: block; font: 400 .85rem var(--body); color: var(--muted); }
fieldset.zones input:checked + span { border-color: var(--brass); background: var(--brass); color: var(--on-brass); }
fieldset.zones input:checked + span small { color: inherit; }
fieldset.zones input:focus-visible + span { outline: 3px solid var(--brass); outline-offset: 2px; }

/* Central et numéro sur la même ligne */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 34rem) { .duo { grid-template-columns: 1fr; gap: 0; } }

/* Bouton d'une action irréversible */
.btn.danger { background: transparent; color: var(--error); border: 2px solid var(--error); }

/* Comptes SIP (page compte) */
dl.sip { margin: 0 0 1rem; display: grid; gap: .5rem; }
dl.sip > div { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline; }
dl.sip dt { min-width: 10.5rem; color: var(--muted); font-size: .98rem; }
dl.sip dd { margin: 0; }
dl.sip code { font: 600 1.05rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
code.mdp { display: inline-block; margin-top: .4rem; padding: .25rem .6rem; background: var(--card); border: 1px solid var(--line); border-radius: 6px; user-select: all; }
.sipcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 1rem 1.25rem; margin-top: 1rem; }
.sipcard h3 { margin: 0 0 .6rem; font-size: 1.2rem; }
.sipcard h3 small { color: var(--muted); font-weight: 400; font-size: .95rem; margin-left: .4rem; }
details summary { cursor: pointer; }

/* Liste dépliante des lignes (page compte) */
.lignes { display: grid; gap: .6rem; }
details.ligne { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-m); }
details.ligne > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1.2rem; padding: .8rem 1.1rem; cursor: pointer; }
details.ligne > summary .num { font: 700 1.15rem var(--head); letter-spacing: .08em; white-space: nowrap; }
details.ligne > summary .lcentral { color: var(--muted); font-size: .98rem; margin-left: auto; }
.ldetail { padding: .2rem 1.1rem 1.1rem; border-top: 1px solid var(--line); }
.ldetail h3 { font-size: 1.05rem; margin: 1rem 0 .6rem; }

.ldetail button { font: 600 .95rem var(--head); padding: .45rem .9rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: inherit; cursor: pointer; }
.ldetail button:disabled { opacity: .4; cursor: not-allowed; }
.ldetail form.inline input[type=text] { flex: 1; min-width: 0; }

.lpart { padding: .2rem 0 1rem; }
.lpart + .lpart { border-top: 1px solid var(--line); padding-top: .2rem; }
.ldetail button.danger { color: #8f2a1f; border-color: #c98a82; }

dl.sip.reglages dt { min-width: 15.5rem; }
dl.sip dd.mdp-ligne, dl.sip dd.reglage { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.mdp-champ { font: 600 1.05rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; width: 13rem; max-width: 100%; padding: .3rem .6rem; background: var(--card); color: inherit; border: 1px solid var(--line); border-radius: 6px; }

/* Info-bulle : s'ouvre au survol, au clavier (Tab) et au toucher */
.tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; margin-left: .3rem; border-radius: 50%; border: 1px solid var(--muted); color: var(--muted); font: 700 .75rem var(--head); cursor: help; vertical-align: middle; }
.tip:hover, .tip:focus { color: var(--ink, inherit); border-color: currentColor; outline: none; }
.tip:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.tiptxt { display: none; position: absolute; z-index: 5; left: 0; top: 1.6rem; width: min(18rem, 78vw); padding: .7rem .9rem; background: var(--panel); color: var(--on-panel); border-radius: var(--radius-m); font: 400 .92rem/1.45 var(--body, inherit); text-align: left; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.tip:hover .tiptxt, .tip:focus .tiptxt { display: block; }

/* ---------------------------------------------------------------------
   18. Espace abonné : mise en page de la page compte
   --------------------------------------------------------------------- */
.compte { display: flex; flex-direction: column; gap: 1.75rem; }
.compte > * { margin: 0; }
.compte h2 { font-size: 1.6rem; margin-bottom: .5rem; }
.compte h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.compte .fine { margin: .2rem 0 .9rem; }

.compte-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
.compte-tete .ptitle { margin: 0; }

.pastilles { list-style: none; margin: -.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.pastilles li { font: 600 .9rem var(--head); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: .3rem .85rem; }
.pastilles li.attention { background: #f6e9c9; border-color: var(--brass); color: #1b2b25; }
.pastilles li.attention a { color: inherit; }

.ancres { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; border-bottom: 1px solid var(--line); font: 700 1rem var(--head); }
.ancres a { padding: .7rem 0; text-decoration: none; color: var(--muted); }
.ancres a:first-child { color: var(--ink); border-bottom: 3px solid var(--brass); margin-bottom: -1px; }
.ancres a:hover { color: var(--ink); text-decoration: none; }

.carte { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 1.5rem; }
form.carte { padding: 1.5rem; }

/* Lignes : indication « Ouvrir / Fermer » à droite de la ligne */
.louvrir::after { content: "Ouvrir"; font: 700 .9rem var(--head); color: var(--accent); border: 2px solid var(--accent); border-radius: var(--radius-s); padding: .15rem .7rem; }
details[open] > summary .louvrir::after { content: "Fermer"; }
details.ligne > summary .lnom { flex: 1 1 8rem; }
details.ligne > summary .lcentral { margin-left: 0; }
details.ligne > summary .louvrir { margin-left: auto; }

/* Détail d'une ligne : trois blocs côte à côte sur grand écran */
.ldetail { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.5rem 2rem; padding: 1.1rem; }
.ldetail h3 { margin: 0 0 .7rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); font-size: 1.15rem; }
.ldetail .lpart, .ldetail .lpart + .lpart { padding: 0; border-top: 0; min-width: 0; }
.ldetail dl.sip dt { min-width: 0; flex-basis: 100%; }
.ldetail dl.sip { gap: .7rem; }
.ldetail button { min-height: 2.5rem; }
.ldetail button.principal { background: var(--brass); color: var(--on-brass); border-color: var(--brass); }
.ldetail .mdp-champ { width: 11rem; }

/* Ajouter un numéro : champs sur une ligne */
.ajout { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; }
.ajout > div { flex: 1 1 13rem; margin: 0; }
.ajout > .ajout-bouton { flex: 0 0 auto; }

/* Mon compte */
.duo-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem; }
.duo-cartes .carte > form.plain h3 { margin-bottom: .3rem; }
.zone-sensible { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; border: 2px solid var(--error); }
.zone-sensible > div { margin: 0; }
.zone-sensible h3 { color: var(--error); }
.zone-sensible .zs-texte { flex: 1 1 22rem; }
.zone-sensible .zs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.zone-sensible label.check { margin: 0; }
.zone-sensible .code-actuel { margin: 0; flex: 0 1 12rem; }
.zone-sensible .code-actuel label { margin-bottom: .25rem; }

/* Tableau des lignes + détail dessous */
.tlignes td.num small { display: block; font: 400 .9rem var(--body); letter-spacing: 0; color: var(--muted); }
.tlignes tr.choisie { background: rgba(47, 75, 62, .10); }
.tlignes td.act { text-align: right; }
.tlignes a.ouvrir { display: inline-block; min-height: 2.5rem; box-sizing: border-box; padding: .45rem 1rem; border: 2px solid var(--accent); border-radius: var(--radius-s); font: 700 .95rem var(--head); text-decoration: none; color: var(--accent); }
.tlignes a.ouvrir:hover { background: var(--accent); color: var(--card); }
.tlignes a.ouvrir[aria-current] { background: var(--accent); color: var(--card); }
.tlignes tbody tr:last-child td { border-bottom: 0; }
.detail { padding: 1.5rem; }
.detail > h2 { margin-bottom: 1.1rem; }
.detail-sous { font-weight: 500; color: var(--muted); font-size: 1.15rem; }
.detail .ldetail { padding: 0; border-top: 0; }
button.lien { display: inline; background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }

/* État en direct des lignes (connectée / hors ligne) : point + texte, jamais la couleur seule */
:root { --etat-on: #2f7a52; --etat-off: #7d8d85; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --etat-on: #6cc79a; --etat-off: #8aa095; } }
:root[data-theme="dark"] { --etat-on: #6cc79a; --etat-off: #8aa095; }
.etat { display: inline-flex; align-items: center; gap: .6rem; }
.etat small { display: block; font: 400 .9rem var(--body); color: var(--muted); }
.pt { flex: none; width: .8rem; height: .8rem; border-radius: 50%; }
.pt.on { background: var(--etat-on); }
.pt.off { background: var(--etat-off); }
.etat-detail { margin: -.6rem 0 1.1rem; font-size: 1rem; }

/* Téléphone : chaque ligne du tableau devient une fiche */
@media (max-width: 40rem) {
  .tlignes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tlignes, .tlignes tbody { display: block; min-width: 0; width: 100%; }
  .tlignes tr { display: grid; grid-template-columns: 1fr; gap: .15rem; padding: .9rem 1rem; border-bottom: 1px solid var(--line); }
  .tlignes tbody tr:last-child { border-bottom: 0; }
  .tlignes td { display: block; padding: 0; border: 0; white-space: normal; }
  .tlignes td.act { text-align: left; margin-top: .5rem; }
  .tlignes a.ouvrir { display: block; text-align: center; }
}

/* Détail d'une ligne : titre avec le central à droite */
.detail-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; margin-bottom: 1.1rem; }
.detail-tete > h2 { margin: 0; }
.detail-central { color: var(--muted); font-size: 1.1rem; }
.etat-detail + .ldetail, .detail-tete + .ldetail { margin-top: 0; }

/* Valeurs copiables d'un clic */
.copiable { cursor: copy; border: 1px dashed var(--muted); border-radius: var(--radius-s); padding: .3rem .6rem; }
code.copiable { display: inline-block; }
.copiable:hover, .copiable:focus-visible { border-style: solid; border-color: var(--accent); }
dd:has(> .copiable) { position: relative; }
.copie-ok { margin-left: .6rem; font: 700 .85rem var(--head); color: var(--accent); }
button.lien { min-height: 2.5rem; font: 700 .95rem var(--head); }
.ldetail button.lien { border: 0; background: none; border-radius: 0; padding: 0 .2rem; color: var(--accent); }

/* Réglages : interrupteurs */
.reglages-liste { display: flex; flex-direction: column; }
form.reglage-form { justify-content: space-between; gap: .75rem; padding: .6rem 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
form.reglage-form:last-child { border-bottom: 0; }
.reglage-texte strong { line-height: 1.3; }
.reglage-texte { display: block; min-width: 0; }
.reglage-texte small { display: block; color: var(--muted); font-size: .92rem; }
.ldetail button.interrupteur { flex: none; width: 3.5rem; min-height: 2.75rem; padding: .45rem .1rem; border: 0; border-radius: 0; background: transparent; cursor: pointer; }
.interrupteur .piste { display: block; position: relative; width: 3.25rem; height: 1.85rem; border-radius: 1rem; background: var(--line); box-shadow: inset 0 0 0 2px var(--muted); transition: background .15s; }
.interrupteur .curseur { position: absolute; top: .2rem; left: .2rem; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: #fff; transition: left .15s; }
.interrupteur .curseur { box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.interrupteur[aria-checked="true"] .piste { background: var(--accent); box-shadow: none; }
.interrupteur[aria-checked="true"] .curseur { left: 1.6rem; }
.interrupteur:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }

/* Gestion : nom, tests, actions rares */
.nomligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.nomligne small { display: block; color: var(--muted); font-size: .92rem; }
.nomligne strong { font-size: 1.1rem; }
details.modifier > summary { cursor: pointer; font: 700 .95rem var(--head); color: var(--accent); text-decoration: underline; min-height: 2.5rem; display: flex; align-items: center; list-style: none; }
details.modifier > summary::-webkit-details-marker { display: none; }
details.modifier[open] { flex: 1 1 100%; }
details.modifier form { margin-top: .4rem; }
.tester { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.tester p { margin: 0; }
details.plus { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .3rem; }
details.plus > summary { cursor: pointer; font: 700 .95rem var(--head); color: var(--accent); min-height: 2.5rem; display: flex; align-items: center; }
.plus-corps { display: flex; flex-direction: column; gap: 1rem; padding: .9rem; background: var(--paper); border-radius: var(--radius-s); }
form.plus-action { flex-direction: column; align-items: flex-start; gap: .4rem; }
.plus-action .fine { margin: 0; font-size: .92rem; }

/* Retour sur le bloc modifié : un peu d'air au-dessus après le saut vers l'ancre */
.lpart[id], #detail { scroll-margin-top: 1rem; }
.messages-ligne:empty { display: none; }
.messages-ligne { margin: 0 0 1.1rem; }
.messages-ligne .alert { margin: 0 0 .5rem; }

/* Illustration de la page 404 */
.panne { display: block; width: 100%; max-width: 26rem; height: auto; margin: 0 auto 1.5rem; border-radius: 12px; }

/* Page « Raccorder un vieux téléphone » */
.legal.large { max-width: 58rem; }
.legal .tablewrap { margin: .8rem 0 1.2rem; }
.legal ol { padding-left: 1.3rem; margin: .5rem 0; }
.legal ol > li { margin: .5rem 0; }
.legal code { font: 600 .95em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: .05rem .35rem; overflow-wrap: anywhere; }
.legal td code { white-space: nowrap; }

/* Schéma de raccordement (page « Raccorder ») : horizontal sur ordinateur, vertical sur petit écran */
.schema { margin: 1.5rem 0 2rem; }
.schema svg { display: block; width: 100%; height: auto; border-radius: 12px; }
.schema .schema-v { display: none; max-width: 22rem; margin: 0 auto; }
.schema figcaption { margin-top: .6rem; text-align: center; }
@media (max-width: 640px) { .schema .schema-h { display: none; } .schema .schema-v { display: block; } }