/* =====================================================================
   Rétrocom : feuille de style commune à toutes les pages du site
   Thème : téléphone d'époque (laiton, bakélite, bois, noir et beige, bandeaux bleu nuit).
   Deux variantes : « L'Annuaire » en clair, « Le Palace » en 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">. Le choix du visiteur (boutons du bas de page)
   est appliqué par assets/js/theme.js, chargé dans l'en-tête de chaque page.
   Seules les couleurs changent d'un thème à l'autre : contenu, mise en page
   et polices restent identiques.

   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 : « L'Annuaire » */
  --paper:    #efe6d3;   /* beige : fond de page */
  --card:     #f8f2e4;   /* ivoire : cartes, formulaires, tableaux */
  --ink:      #17130f;   /* noir : texte principal */
  --muted:    #5e5041;   /* texte atténué */
  --line:     #b8915f;   /* chêne : filets et bordures */
  --panel:    #1f2b3d;   /* bleu nuit : bandeaux et fonds forts */
  --on-panel: #efe6d3;   /* texte sur fond fort */
  --brass:    #c9a04a;   /* laiton : accents et boutons */
  --on-brass: #17130f;   /* texte sur laiton */
  --bake:     #17130f;   /* bakélite noire : plaque du cadran, pastilles */
  --accent:   #7c5a17;   /* laiton foncé : liens et repères */
  --win:      #f3ead6;   /* ivoire : fenêtre d'affichage du numéro */
  --error:    #a3341f;   /* messages d'erreur */
  color-scheme: light;

  /* 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 : « Le Palace » (bleu nuit, laiton et beige), selon le réglage de l'appareil */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f141c; --card: #1b2432; --ink: #efe4cf; --muted: #c4b498;
    --line: #4b5a72; --panel: #1f2b3d; --on-panel: #efe4cf; --brass: #d0a94f;
    --on-brass: #0f141c; --bake: #080b10; --accent: #d0a94f; --win: #efe4cf;
    --error: #ff9b86; color-scheme: dark;
  }
}
/* Mode sombre : forcé par le visiteur (assets/js/theme.js) */
:root[data-theme="dark"] {
  --paper: #0f141c; --card: #1b2432; --ink: #efe4cf; --muted: #c4b498;
  --line: #4b5a72; --panel: #1f2b3d; --on-panel: #efe4cf; --brass: #d0a94f;
  --on-brass: #0f141c; --bake: #080b10; --accent: #d0a94f; --win: #efe4cf;
  --error: #ff9b86; color-scheme: dark;
}


/* ---------------------------------------------------------------------
   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);
}

/* Titres : Source Serif italique, comme un imprimé d'époque.
   Menus, boutons et numéros restent en Josefin Sans (var(--head)). */
h1, h2, h3 {
  font-family: var(--body);
  font-style: italic;
  font-weight: 400;
  line-height: 1.15;
  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;
}

/* Menu : <div class="menu" id="menu"><nav>…</nav><div class="menu-actions">…</div></div>
   Sur petit écran, il se replie derrière le bouton « Menu » (seulement si JavaScript fonctionne : classe « js »). */
.menu { display: flex; align-items: center; gap: 1rem 2rem; flex-wrap: wrap; }
nav { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; font-family: var(--head); font-weight: 500; }
nav a { text-decoration: none; padding: .35rem 0; }
nav a:hover { text-decoration: underline; }
nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--brass); }
.menu-actions { display: flex; align-items: center; gap: .75rem; font-family: var(--head); font-weight: 500; }
.menu-actions .btn { padding: .55rem 1rem; }
a.navbtn { border: 2px solid var(--ink); border-radius: var(--radius-s); padding: .35rem .8rem; text-decoration: none; }
.menu-bouton { display: none; min-height: 2.75rem; padding: 0 1rem; font: 600 1rem var(--head); color: var(--ink);
  background: transparent; border: 2px solid var(--ink); border-radius: var(--radius-s); cursor: pointer; }
@media (max-width: 900px) {
  .js .menu-bouton { display: inline-block; }
  .js .menu { display: none; width: 100%; }
  .js .menu.ouvert { display: flex; }
  .menu { flex-direction: column; align-items: stretch; gap: .5rem; padding-bottom: .5rem; }
  .menu nav { flex-direction: column; align-items: stretch; gap: 0; }
  .menu nav a { padding: .75rem 0; border-bottom: 1px solid var(--line); }
  nav a[aria-current="page"] { box-shadow: none; font-weight: 700; }
  .menu-actions { flex-wrap: wrap; padding-top: .5rem; }
  .menu-actions a { min-height: 2.75rem; display: inline-flex; align-items: center; }
}


/* ---------------------------------------------------------------------
   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 bleu nuit, 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: 2.5rem 0 2rem; color: var(--muted); font-size: .95rem; margin-top: 2rem; }
footer.site a { color: inherit; }
.pied-haut { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem 2rem; flex-wrap: wrap; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.pied-haut .logo { color: var(--ink); }
.pied-devise { margin: .5rem 0 0; font-style: italic; }
.pied-reseaux { display: flex; gap: 1.25rem; margin: 0; font: 600 1rem var(--head); }
.pied-reseaux a { min-height: 2.75rem; display: inline-flex; align-items: center; }
.pied-plan { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1.5rem; padding: 1.5rem 0; align-items: start; font-family: var(--body); font-weight: 400; }
.pied-titre { margin: 0 0 .4rem; font: 700 .95rem var(--head); color: var(--ink); }
.pied-plan ul { list-style: none; margin: 0; padding: 0; }
.pied-plan li a { display: inline-block; padding: .3rem 0; text-decoration: none; }
.pied-plan li a:hover { text-decoration: underline; }
.pied-bas { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.pied-legal { display: flex; flex-wrap: wrap; gap: .3rem 1.25rem; margin: 0; }
.pied-bas .theme-choix { margin-top: 0; }

/* Choix du thème : <div class="theme-choix" role="group"><button data-theme-choix="light">… */
.theme-choix { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; justify-content: center; margin-top: 1rem; }
.theme-choix button {
  min-height: 2.75rem; padding: 0 .9rem;
  font: 600 .9rem var(--head); color: var(--ink);
  background: transparent; border: 1px solid var(--line); border-radius: var(--radius-s); cursor: pointer;
}
.theme-choix button[aria-pressed="true"] { background: var(--brass); color: var(--on-brass); border-color: var(--brass); }


/* ---------------------------------------------------------------------
   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: #17130f;
  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, 160, 74, .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: #17130f;
  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); }
/* Mon espace : demandes en attente de confirmation par courriel */
.alert.attente p { margin: 0; }
.alert.attente ul { margin: .4rem 0 .5rem; padding-left: 1.2rem; }
.alert.attente .lien { font: inherit; }

/* 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 input[type=password], .inscr form select, .inscr form textarea { font-size: 1.05rem; padding: .75rem .85rem; }

/* Choix de la zone : deux pastilles */
.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%; }
.zones label { display: block; margin: 0; flex: 1 1 14rem; }
.zones input { position: absolute; opacity: 0; width: 1px; }
.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); }
.zones small { display: block; font: 400 .85rem var(--body); color: var(--muted); }
.zones input:checked + span { border-color: var(--brass); background: var(--brass); color: var(--on-brass); }
.zones input:checked + span small { color: inherit; }
.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: #17130f; }
.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(124, 90, 23, .12); }
.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; }
/* Touches du Minitel (page minitel.php) */
kbd { font: 600 .85em var(--head); padding: .05rem .4rem; background: var(--card); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; white-space: nowrap; }
.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; }
.reglage-ligne { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.reglage-ligne: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 .interrupteur { position: relative; display: block; flex: none; width: 3.5rem; min-height: 2.75rem; padding: .45rem .1rem; cursor: pointer; }
.interrupteur input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; 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 input:checked + .piste { background: var(--accent); box-shadow: none; }
.interrupteur input:checked + .piste .curseur { left: 1.6rem; }
.interrupteur input:focus-visible + .piste { 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 téléphone ancien » */
.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 (pages « Raccorder » et « Minitel ») : 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; } }
.centre.stack { text-align: center; }   /* pages à bloc unique (nouveau code, courriel confirmé) : tout le contenu centré, y compris l’encadré du code */

/* Option repliée (page « Raccorder ») */
details.option { margin: 1.5rem 0 2rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-m); padding: .2rem 1.1rem; }
details.option > summary { font: 700 1rem var(--head); color: var(--accent); min-height: 2.75rem; display: flex; align-items: center; }
details.option[open] > summary { margin-bottom: .4rem; }

/* Réglage à choix (son chiffré) : intitulé sur sa ligne, puis menu et bouton côte à côte */
.reglage-choix { flex-wrap: wrap; }
.reglage-choix .reglage-texte { flex: 1 1 100%; }
.reglage-choix select { flex: 1 1 8rem; min-width: 0; }

.reglages-actions { margin: 1rem 0 .5rem; }
.interrupteur .piste { pointer-events: none; }   /* le clic atteint la case à cocher, posée sur toute la zone */
form.reglages-form { display: block; background: none; border: 0; padding: 0; max-width: none; }   /* un seul formulaire pour tous les réglages, sans cadre de carte */


/* ---------------------------------------------------------------------
   18. Pages publiques de la refonte (appareils, numéros, aide)
   --------------------------------------------------------------------- */
/* Grille de cartes cliquables : <div class="cartes"><a class="carte">…</a></div> */
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.25rem; margin: 1.5rem 0 2rem; }
a.carte { display: block; padding: 1.4rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-m); color: inherit; text-decoration: none; }
a.carte:hover { border-color: var(--brass); }
a.carte svg { display: block; width: 4rem; height: 4rem; color: var(--accent); }
a.carte h2, a.carte h3 { font-size: 1.4rem; margin: .8rem 0 .3rem; }
a.carte p { margin: 0; color: var(--muted); }
a.carte .badge { display: inline-block; margin-top: .6rem; font: 700 .8rem var(--head); color: var(--on-brass); background: var(--brass); border-radius: 999px; padding: .1rem .6rem; }

/* Encadré d'appel à l'action en fin de page */
.suite { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.5rem; }

/* Questions fréquentes : <details class="faq"><summary>Question</summary><p>Réponse</p></details> */
details.faq { border-bottom: 1px solid var(--line); padding: .3rem 0; }
details.faq > summary { cursor: pointer; font: 600 1.1rem/1.4 var(--body); min-height: 2.75rem; display: flex; align-items: center; padding: .4rem 0; }
details.faq > summary::marker { color: var(--accent); }
details.faq > p, details.faq > ul { margin: .2rem 0 .9rem; color: var(--muted); }

/* Décomposition d'un numéro : <div class="decompo"><div><span class="num">ELY</span><span>Le central</span></div>…</div> */
.decompo { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin: .8rem 0 1.2rem; }
.decompo > div { min-width: 7rem; }
.decompo .num { display: block; font: 700 2.2rem/1.1 var(--head); letter-spacing: .06em; padding-bottom: .3rem; border-bottom: 3px solid var(--brass); }
.decompo .num.abonne { border-bottom-color: var(--line); }
.decompo span + span { display: block; margin-top: .4rem; color: var(--muted); font-size: .98rem; }

/* Outil « Que dois-je composer ? » */
#outil-composer { max-width: 34rem; }
#resultat { min-height: 1.6em; margin: 1rem 0 0; font-weight: 600; }


/* ---------------------------------------------------------------------
   19. Accueil (étape 3) et chronologie
   --------------------------------------------------------------------- */
.devise-bandeau { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1.5rem; margin: 0; padding: .7rem 0 .6rem; border-bottom: 3px double var(--line); font-style: italic; color: var(--muted); font-size: 1rem; }
section.block.sans-filet { border-top: 0; }
.filet-double { padding-bottom: .7rem; border-bottom: 3px double var(--line); }

/* Les trois gestes, numérotés en chiffres romains */
ol.gestes { list-style: none; counter-reset: g; margin: 1.5rem 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .8rem 2.5rem; }
ol.gestes li { counter-increment: g; }
ol.gestes li::before { content: counter(g, upper-roman) ". "; font-style: italic; font-size: 1.6rem; color: var(--accent); }

/* Lignes à points de conduite : libellé ……… numéro */
ul.pointilles { list-style: none; margin: 1.5rem 0; padding: 0; max-width: 46rem; }
ul.pointilles li { display: flex; align-items: baseline; gap: .6rem; padding: .45rem 0; }
ul.pointilles li::after { content: ""; order: 1; flex: 1 1 2rem; border-bottom: 2px dotted var(--line); }
ul.pointilles li > span:last-child { order: 2; white-space: nowrap; }
ul.pointilles .num { font: 700 1.1rem var(--head); letter-spacing: .05em; }
@media (max-width: 34rem) {
  ul.pointilles li { flex-wrap: wrap; gap: .1rem .6rem; border-bottom: 1px solid var(--line); }
  ul.pointilles li::after { display: none; }
  ul.pointilles li > span:last-child { margin-left: auto; }
}

/* Le saviez-vous ? : bandeau bleu nuit */
.saviez { background: var(--panel); color: var(--on-panel); padding: 3.5rem 0; }
.saviez .wrap > * { max-width: 46rem; }
.saviez-titre { font: 700 1rem var(--head); text-transform: uppercase; letter-spacing: .12em; color: var(--brass); margin: 0 0 .8rem; }
.saviez-texte { font-style: italic; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.3; margin: 0 0 1rem; }
.saviez a { color: var(--brass); }

/* Vidéo et questions rapides, côte à côte */
.duo-large { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 2.5rem 4rem; align-items: start; }
a.video { display: flex; flex-direction: column; justify-content: flex-end; gap: 1rem; min-height: 13rem; padding: 1.5rem; margin: 1rem 0 .6rem; background: var(--panel); color: var(--on-panel); border-radius: var(--radius-m); text-decoration: none; }
a.video:hover { outline: 3px solid var(--brass); }
.video-lecture { width: 4rem; height: 4rem; border-radius: 50%; background: var(--brass); position: relative; }
.video-lecture::after { content: ""; position: absolute; left: 1.55rem; top: 1.15rem; border-style: solid; border-width: .85rem 0 .85rem 1.4rem; border-color: transparent transparent transparent var(--on-brass); }
h3.question { font-size: 1.25rem; margin: 1.2rem 0 .2rem; }
h3.question + p { margin: 0; color: var(--muted); }

/* Chronologie */
.legal ol.chrono, ol.chrono { list-style: none; margin: 2rem 0 3rem; padding: 0; border-left: 3px solid var(--brass); }
ol.chrono li { display: grid; grid-template-columns: 11rem 1fr; gap: .2rem 1.5rem; padding: 0 0 1.6rem 1.5rem; position: relative; }
ol.chrono li::before { content: ""; position: absolute; left: -.55rem; top: .35rem; width: .8rem; height: .8rem; border-radius: 50%; background: var(--paper); border: 3px solid var(--brass); }
.chrono-date { margin: 0; font: 700 1.05rem var(--head); color: var(--accent); }
section.block .legal ol.chrono h2 { font-size: 1.35rem; margin: 0 0 .25rem; border: 0; padding: 0; }
ol.chrono p { margin: 0; }
ol.chrono .source { font-size: .9rem; color: var(--muted); }
@media (max-width: 40rem) { ol.chrono li { grid-template-columns: 1fr; } }

/* Réclames d'époque */
.reclames { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 2rem 1.5rem; margin-top: 2rem; }
figure.reclame { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; display: flex; flex-direction: column; }
figure.reclame img { display: block; width: 100%; height: 22rem; object-fit: cover; object-position: top; background: #efe6d3; }
figure.reclame figcaption { padding: 1rem 1.1rem 1.1rem; }
figure.reclame h2 { font-size: 1.4rem; margin: 0 0 .3rem; }
figure.reclame p { margin: 0 0 .6rem; }
.reclame-imprime { font-style: italic; color: var(--muted); }
figure.reclame details summary { font: 700 .95rem var(--head); color: var(--accent); min-height: 2.75rem; display: flex; align-items: center; }
figure.reclame details p { margin-top: .4rem; }
figure.reclame .credit { margin: .6rem 0 0; font-size: .85rem; }
figure.reclame.paysage img { object-fit: contain; object-position: center; }
.reclame-date { margin: 0 0 .2rem !important; font: 700 .85rem var(--head); letter-spacing: .05em; color: var(--accent); }

/* Photos de téléphones anciens */
.gallery.photos img { aspect-ratio: 1; object-fit: cover; background: #fff; }
.gallery .credit, figure.photo-appareil .credit { margin: .5rem 0 0; font-size: .82rem; color: var(--muted); }
figure.photo-appareil { float: right; width: min(16rem, 40%); margin: 0 0 1rem 1.5rem; }
figure.photo-appareil img { display: block; width: 100%; height: auto; border-radius: var(--radius-m); border: 1px solid var(--line); }
@media (max-width: 40rem) { figure.photo-appareil { float: none; width: 100%; max-width: 20rem; margin: 0 auto 1.5rem; } }

/* Inscription (étape 4) : formulaire en quatre parties numérotées */
.inscr form { padding: 1.5rem 2rem 2rem; }
fieldset.etape-inscr { border: 0; border-bottom: 1px solid var(--line); padding: 0 0 1.5rem; margin: 0 0 1.5rem; min-width: 0; }
fieldset.etape-inscr > legend { display: flex; align-items: center; gap: .7rem; padding: 0; margin-bottom: 1rem; font: italic 400 1.5rem var(--body); }
.etape-num { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--bake); color: var(--brass); font: 700 1.05rem var(--head); font-style: normal; flex: none; }
fieldset.etape-inscr .zones { margin-bottom: 1rem; }
.inscr .aide { margin: .45rem 0 0; }
.inscr .msg { margin: .45rem 0 0; min-height: 0; }
.numeros-proposes { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .5rem; }
.numeros-proposes label { margin: 0; }
.numeros-proposes input { position: absolute; opacity: 0; width: 1px; }
.numeros-proposes span { display: block; min-height: 2.75rem; padding: .6rem .5rem .45rem; border: 2px solid var(--line); border-radius: var(--radius-s); background: var(--paper); text-align: center; cursor: pointer; font: 700 1.05rem var(--head); letter-spacing: .06em; white-space: nowrap; }
.numeros-proposes input:checked + span { border-color: var(--brass); background: var(--brass); color: var(--on-brass); }
.numeros-proposes input:focus-visible + span { outline: 3px solid var(--brass); outline-offset: 2px; }
.btn.grand { font-size: 1.1rem; padding: .95rem 1.8rem .8rem; }
@media (max-width: 40rem) { .inscr form { padding: 1.25rem 1rem 1.5rem; } }
.champ-code { display: flex; gap: .5rem; margin: 0 !important; }
.champ-code input { flex: 1; min-width: 0; font-family: var(--head) !important; letter-spacing: .08em; }
.champ-code .btn { flex: none; }

/* Page de bienvenue (après l'inscription) */
.bienvenue { max-width: 46rem; margin: 0 auto; }
.bienvenue > .ptitle, .bienvenue > .intro { text-align: center; margin-left: auto; margin-right: auto; }
.bienvenue-numero { margin: 0 0 1.5rem; padding: 1.5rem; text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-m); }
.bienvenue-etiquette { margin: 0; font: 700 .9rem var(--head); text-transform: uppercase; letter-spacing: .12em; color: var(--accent); }
.bienvenue-numero .num { margin: .3rem 0 .5rem; font: 700 clamp(2.4rem, 9vw, 3.6rem)/1.1 var(--head); letter-spacing: .08em; white-space: nowrap; }
.bienvenue-numero .fine { margin: 0; }
.bienvenue-code { margin-bottom: 1rem; text-align: center; }
.bienvenue-actions { justify-content: center; margin-top: 1rem !important; }
.bienvenue-code .fine { color: inherit; opacity: .85; margin-top: .5rem; }
.bienvenue h2 { margin-top: 2.5rem; }
.bienvenue .cartes { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
@media print {
  header, footer, .bienvenue h2, .bienvenue .cartes, .bienvenue .suite, .bienvenue-actions, .bienvenue > p:not(.intro) { display: none !important; }
  .bienvenue-code { background: none; color: #000; border: 2px solid #000; }
  .bienvenue-numero { background: none; border: 2px solid #000; }
}
.bienvenue-code.secours { background: var(--card); color: var(--ink); border: 2px dashed var(--brass); }
.bienvenue-code.secours b { letter-spacing: .08em; font-size: clamp(1.05rem, 5.5vw, 2rem); white-space: nowrap; }
.bienvenue-code label.noter { display: flex; gap: .6rem; align-items: center; justify-content: center; margin: 1rem 0 0; font: 600 1rem var(--head); cursor: pointer; }
.bienvenue-code label.noter input { width: 1.2rem; height: 1.2rem; }
#rappel-secours { color: var(--error); }
@media print { .bienvenue-code label.noter, .copie-etat { display: none !important; } .bienvenue-code.secours { border: 2px dashed #000; } }

/* Code d'accès perdu : deux façons de récupérer l'accès */
.recup-titre { font-size: 1.5rem; margin: 2.5rem 0 .4rem; padding-top: 1.5rem; border-top: 1px solid var(--line); text-align: center; }
.recup-titre:first-of-type { margin-top: 1rem; padding-top: 0; border-top: 0; }
.codebox.secours-nouveau { margin-top: 1rem; background: var(--card); color: var(--ink); border: 2px dashed var(--brass); }
.codebox.secours-nouveau b { font-size: clamp(1.05rem, 5vw, 1.45rem); letter-spacing: .08em; white-space: nowrap; }
.narrow.centre > .codebox, .narrow.centre > .fine { text-align: center; }
.narrow.centre > .btn { display: table; margin-left: auto; margin-right: auto; }

/* Connexion : formulaire et encadré « Pas encore de ligne ? » */
.acces { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 2rem; max-width: 56rem; margin: 0 auto; align-items: start; }
.acces-form .ptitle { margin-bottom: .4rem; }
.acces-form .intro { margin-bottom: 1.25rem; }
.acces-form form { padding: 1.75rem; }
.acces-form .aide { margin: .5rem 0 0; }
.acces-nouveau { background: var(--panel); color: var(--on-panel); border-radius: var(--radius-m); padding: 1.75rem; margin-top: 6.95rem; }
.acces-nouveau h2 { font-size: 1.7rem; margin: 0 0 .6rem; }
.acces-nouveau p { margin: 0 0 1rem; opacity: .92; }
.acces-nouveau ul { margin: 0 0 1.5rem; padding-left: 1.2rem; }
.acces-nouveau li { margin: .3rem 0; }
.acces-nouveau li::marker { color: var(--brass); }
@media (max-width: 760px) { .acces { grid-template-columns: 1fr; } .acces-nouveau { margin-top: 0; } }

/* Carte de visite : réglages à gauche, aperçu à droite */
.carte-atelier { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 2rem; align-items: start; }
.carte-reglages { padding: 1.5rem; }
.carte-reglages fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
.carte-reglages legend { font: 600 1rem var(--head); margin-bottom: .35rem; padding: 0; }
.carte-reglages .zones { margin: 0; }
.carte-reglages .aide { margin: .4rem 0 0; }
.carte-reglages .msg { margin: .4rem 0 0; min-height: 0; }
.carte-titre-dl { font-size: 1.3rem; margin: 1.5rem 0 .7rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.carte-apercu { display: grid; gap: 1.25rem; position: sticky; top: 1rem; }
.carte-apercu figure { margin: 0; }
.carte-face { aspect-ratio: 85 / 55; border-radius: 6px; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.25), 0 1px 3px rgba(0,0,0,.2); }
.carte-face svg { display: block; width: 100%; height: 100%; }
.carte-apercu figcaption { margin-top: .4rem; font: 600 .85rem var(--head); color: var(--muted); text-align: center; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 860px) { .carte-atelier { grid-template-columns: 1fr; } .carte-apercu { position: static; order: -1; } }
/* Page d'impression (sans PDF) : une carte par page. Page nommée : le format 85 × 55 mm ne s'applique qu'aux cartes. */
@page carte { size: 85mm 55mm; margin: 0; }
body.carte-impression { background: #fff; margin: 0; padding: 1rem; }
.carte-page { width: 85mm; height: 55mm; margin: 0 auto 1rem; }
.carte-page svg { display: block; width: 85mm; height: 55mm; }
.carte-impression-aide { text-align: center; font: 1rem var(--body); }
@media print {
  body.carte-impression { padding: 0; }
  .carte-page { margin: 0; page: carte; page-break-after: always; break-after: page; }
  .carte-impression-aide { display: none; }
}
/* Fiche imprimée (codes.js, data-imprimer-fiche) : seule la fiche est imprimée, sur une page */
#zone-impression { display: none; }
@media print {
  html.impression-fiche body > *:not(#zone-impression) { display: none !important; }
  html.impression-fiche body { background: #fff; color: #17130f; margin: 0; padding: 0; }
  html.impression-fiche #zone-impression { display: block; page: fiche; }
}
@page fiche { size: A4 portrait; margin: 18mm; }
.fiche { max-width: 150mm; margin: 0 auto; font: 11.5pt/1.5 var(--body); color: #17130f; }
.fiche-tete { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 4mm; border-bottom: 2.5pt double #17130f; }
.fiche-logo { font: 700 18pt var(--head); }
.fiche-logo span { border: 1.5pt solid #c9a04a; color: #17130f; border-radius: 2pt; padding: 1pt 4pt 0; margin-left: 1pt; }
.fiche-date { font: italic 10pt var(--body); color: #5e5041; }
.fiche h1 { font: italic 400 26pt/1.1 var(--body); margin: 10mm 0 4mm; }
.fiche-code { margin: 0 0 6mm; padding: 6mm 4mm; border: 1.5pt dashed #9c7124; border-radius: 3mm; text-align: center; font: 700 22pt var(--head); letter-spacing: .12em; white-space: nowrap; }
.fiche-numeros { display: flex; flex-wrap: wrap; gap: 1mm 6mm; align-items: baseline; margin: 0 0 8mm; }
.fiche-numeros dt { font: 600 10pt var(--head); text-transform: uppercase; letter-spacing: .1em; color: #5e5041; width: 100%; }
.fiche-numeros dd { margin: 0; font: 700 14pt var(--head); letter-spacing: .06em; }
.fiche h2 { font: 600 13pt var(--head); margin: 0 0 2mm; padding-top: 4mm; border-top: .75pt solid #b8915f; }
.fiche ol { margin: 0 0 8mm; padding-left: 6mm; }
.fiche li { margin: 1.5mm 0; }
.fiche-pied { margin: 0; padding-top: 4mm; border-top: .75pt solid #b8915f; font: italic 10pt var(--body); color: #5e5041; }
#secours-affiche { margin-bottom: 1.5rem; }

/* Mon espace : volets (<details class="volet">), ouverts sur ordinateur, repliables sur téléphone */
details.volet > summary { list-style: none; cursor: default; }
details.volet > summary::-webkit-details-marker { display: none; }
details.volet > summary h3 { margin-bottom: .5rem; }
@media (max-width: 760px) {
  details.volet > summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.9rem; }
  details.volet > summary h3 { margin: 0; }
  details.volet > summary::after { content: ""; flex: none; width: .6rem; height: .6rem; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); margin: 0 .3rem .25rem 0; transition: transform .15s; }
  details.volet[open] > summary::after { transform: rotate(-135deg); margin-bottom: -.2rem; }
  details.volet[open] > summary { margin-bottom: .6rem; }
  .ldetail details.lpart + details.lpart { border-top: 1px solid var(--line); padding-top: .2rem; }
  .duo-cartes .carte { padding-top: .8rem; padding-bottom: .8rem; }
  .ldetail details.volet > summary h3 { border-bottom: 0; padding-bottom: 0; }
}

/* Fiche d'une ligne : bandeau bleu nuit avec le numéro */
.detail { padding: 0; overflow: hidden; }
.detail > .detail-tete { margin: 0; padding: 1.25rem 1.5rem 1.1rem; background: var(--panel); color: var(--on-panel); display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem; align-items: baseline; }
.detail-tete h2 { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .9rem; font-style: normal; }
.detail-tete h2 .num { font: 700 clamp(1.8rem, 6vw, 2.4rem)/1.1 var(--head); letter-spacing: .08em; white-space: nowrap; }
.detail-tete .detail-sous { font: italic 400 1.25rem var(--body); color: inherit; opacity: .85; }
.detail-tete .detail-central { color: inherit; opacity: .8; }
.detail-tete .etat-detail { grid-column: 1 / -1; margin: .2rem 0 0; color: inherit; }
.detail > .messages-ligne, .detail > .ldetail { margin-left: 1.5rem; margin-right: 1.5rem; }
.detail > .messages-ligne { margin-top: 1rem; }
.detail > .ldetail { margin-top: 1.25rem; margin-bottom: 1.5rem; }
@media (max-width: 760px) {
  .detail > .detail-tete { grid-template-columns: 1fr; padding: 1rem 1.1rem; }
  .detail > .messages-ligne, .detail > .ldetail { margin-left: 1.1rem; margin-right: 1.1rem; }
}

/* ---------------------------------------------------------------------
   Page Minitel : émulateur du 36 15 (assets/js/minitel.js)
   Le boîtier garde ses couleurs d'appareil (beige et brun) quel que soit le thème.
   --------------------------------------------------------------------- */
.minitel-emu { max-width: 760px; margin: 1.5rem 0 1rem; }
.minitel-emu.grand { max-width: 900px; margin: 1rem 0 1.25rem; }
/* Page Minitel : encart vers le Minitel en ligne */
.essayer-minitel { margin: 1.5rem 0; }
.essayer-minitel .sub { margin-top: 0; }
.me-caisse {
  background: linear-gradient(160deg, #e6dccb, #cbbfa8); border: 2px solid #4a3a30; border-radius: 22px;
  padding: 16px; box-shadow: 0 14px 34px rgba(0, 0, 0, .28), inset 0 2px 0 rgba(255, 255, 255, .5);
}
.me-ecran { position: relative; background: #1d1915; padding: 14px; border-radius: 16px; box-shadow: inset 0 0 14px #000; }
.me-scr { display: block; width: 100%; height: auto; border-radius: 2.2% / 2.8%; background: #000; cursor: text; }
.me-ecran::after {               /* trame et bombé de l'écran cathodique */
  content: ""; position: absolute; inset: 14px; border-radius: 2.2% / 2.8%; pointer-events: none;
  background: repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, .22) 2px 3px),
              radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, .55) 100%);
}
.minitel-emu.saisie .me-ecran { box-shadow: inset 0 0 14px #000, 0 0 0 3px var(--brass); }
/* Champ invisible posé sur l'écran : il reçoit la saisie et fait apparaître le clavier des téléphones */
.me-kb {
  position: absolute; left: 50%; bottom: 18px; width: 2px; height: 2px; padding: 0; border: 0; opacity: 0;
  font-size: 16px; color: transparent; caret-color: transparent; background: transparent;
}
.me-bandeau { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 14px; color: #2a201a; font: 600 .9rem var(--head); }
.me-cnx {
  background: var(--brass); color: #1b1710; border: 0; border-bottom: 4px solid #8a6420; border-radius: 6px;
  padding: .6rem 1.1rem; font: 700 .95rem var(--head); letter-spacing: .04em; cursor: pointer;
}
.me-statut { display: inline-flex; align-items: center; gap: .45rem; }
.me-led { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: #8f2a22; box-shadow: 0 0 5px #8f2a22; }
.me-led.on { background: #2fb04f; box-shadow: 0 0 8px #2fb04f; }
.me-led.wait { background: #e6a91f; box-shadow: 0 0 8px #e6a91f; }
.me-debit { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; }
.me-debit select { font: inherit; padding: .25rem .4rem; border: 1px solid #8c7a62; border-radius: 5px; background: #f3ead6; color: #2a201a; }
.me-touches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.me-touches button {
  background: #f3ead6; color: #2a201a; border: 0; border-bottom: 4px solid #9a8a70; border-radius: 6px;
  padding: .6rem .2rem; font: 700 .8rem/1 var(--head); letter-spacing: .03em; cursor: pointer;
}
.me-touches button.envoi { background: #3d4a3a; color: #f3ead6; border-bottom-color: #1f271d; }
.me-touches button:active, .me-cnx:active { transform: translateY(2px); border-bottom-width: 2px; }
@media (max-width: 520px) {
  .me-caisse { padding: 10px; border-radius: 16px; }
  .me-ecran { padding: 8px; border-radius: 12px; }
  .me-ecran::after { inset: 8px; }
  .me-touches { gap: 6px; }
  .me-touches button { font-size: .7rem; padding: .7rem .1rem; }
  .me-debit { margin-left: 0; }
}