/* ============================================================
   Signal360 - page d'accueil publique
   Charte : rose #D94C6A, bleu nuit #0D1F3C (repris du logo).
   ============================================================ */

:root{
  /* --- Accent : le rose du logo, et lui seul --- */
  --rose:#D94C6A;
  --rose-sombre:#C13756;
  --rose-clair:#FCF4F7;   /* petites surfaces : encadrés, pastilles */
  --fond-tinte:#F8F5F7;   /* grands aplats de section */
  --rose-pale:#F5DBE2;
  --rose-voile:rgba(217,76,106,.07);

  /* --- Structure : le bleu nuit du logo et son échelle de gris --- */
  --nuit:#101A2E;
  --texte:#5A6478;
  --texte-doux:#8B94A6;
  --bord:#ECEEF3;
  --bord-clair:#F4F6F9;
  --fond:#FCFCFD;         /* la page n'est pas blanche : les cartes le sont */
  --surface:#FFFFFF;

  /* --- Élévation : deux ombres, pas davantage. Une carte se pose,
         elle ne flotte pas. --- */
  --ombre-douce:0 1px 2px rgba(16,26,46,.05);
  --ombre:0 1px 2px rgba(16,26,46,.04), 0 14px 34px rgba(16,26,46,.06);

  /* --- Rayons : quatre valeurs, jamais une cinquième --- */
  --r-s:8px;
  --r-m:12px;
  --r-l:16px;
  --r-xl:22px;

  --anneau:0 0 0 3px rgba(217,76,106,.13);

  /* --- Ce que seule app.css déclarait jusqu'ici ---
     Un écran qui se passe d'app.css - securite.php, donnees-personnelles.php -
     perdait « --mesure » sans rien dire : « max-width:var(--mesure) » sans
     valeur de repli est une déclaration invalide, donc ignorée, et la mesure
     du texte sautait en silence. La feuille de référence doit porter ce dont
     la référence se sert. --- */
  --mesure:70ch;
  --rouge:#B3261E;
  --vert:#1B5E36;
}

*,*::before,*::after{box-sizing:border-box}

/* Le site public tient en une page : le bandeau y mène par des ancres, et
   il est collant. Sans marge d'ancrage, la section visée se rangeait sous
   lui et son titre restait caché - on arrivait au bon endroit sans le voir.
   Le glissement est doux, sauf pour qui a demandé moins d'animation. */
html{scroll-behavior:smooth}
#fonctionnement,#fonctionnalites,#tarifs,#contact,#exemple,#apropos,
#fonctions{scroll-margin-top:92px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  /* Le pied de page se colle au bas de l'écran quand le contenu ne suffit
     pas à le pousser : plus de bande vide entre lui et le bord. */
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;

  margin:0;
  background:var(--fond);
  color:var(--texte);
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.65;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Les titres portent la structure : moins gras qu'avant, plus resserrés.
   Une graisse 800 n'est gardée que là où un chiffre doit frapper. */
h1,h2,h3,h4{margin:0;color:var(--nuit);font-weight:700;line-height:1.18;letter-spacing:-.025em}
h1{letter-spacing:-.035em}

/* Un anneau unique pour tout ce qui prend le focus au clavier. */
:focus-visible{outline:2px solid var(--rose);outline-offset:2px;border-radius:3px}

/* Le contenu prend toute la hauteur restante, le pied reste en dessous. */
body>main{flex:1 0 auto}
body>.pied,body>.pied-compte{flex:none}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{margin:0;padding:0;list-style:none}

.conteneur{width:100%;max-width:1140px;margin:0 auto;padding:0 24px}
.section{padding:88px 0}
.section-titre{text-align:center;margin-bottom:56px}
.section-titre h2{font-size:clamp(25px,2.8vw,32px)}
.section-titre p{margin-top:12px;color:var(--texte)}
.trait{width:44px;height:2px;border-radius:2px;background:var(--rose);margin:18px auto 0}

/* ---------------- Finitions ---------------- */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
::selection{background:var(--rose-voile);color:var(--nuit)}
hr{border:0;border-top:1px solid var(--bord);margin:32px 0}
strong,b{font-weight:600;color:var(--nuit)}

/* ---------------- Icônes ----------------
   Tracés dans app/lib/Icones.php. La structure hérite de la couleur du
   texte, l'accent porte le rose. Poser « --ico-accent: currentColor »
   sur un ancêtre rend l'icône monochrome - c'est ce qu'on fait dans les
   champs de saisie et partout où l'icône est blanche sur fond rose. */
.ico{
  --ico-accent:var(--rose);
  display:block;flex:none;width:1em;height:1em;
  fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.ico .trait{stroke:currentColor}
.ico .accent{stroke:var(--ico-accent)}
.ico .plein{fill:currentColor;stroke:none}

/* Monochrome : fond rose, champ de saisie, commande d'interface. */
.pastille-pleine,.pied-social,.saisie,.oeil,.bouton,
.champ label,.sceau,.bascule-etiquette{--ico-accent:currentColor}
/* Un ancêtre ne suffit pas : « .ico » redéclare la variable sur l'icône
   même, et une déclaration propre l'emporte toujours sur l'héritage. Dans
   un bouton plein, l'accent restait donc rose sur rose - le rabat de
   l'enveloppe, l'arc de la loupe disparaissaient. On vise l'icône. */
.bouton .ico{--ico-accent:currentColor}

/* Les petites icônes portent un trait un peu plus fin, les grandes un
   peu plus épais : c'est le seul réglage optique de la série. */
.onglet .ico,.aide .ico,.pied-social .ico{stroke-width:1.4}
.atout .ico,.etape>.ico,.pastille .ico{stroke-width:1.6}
/* Au-delà de 40 px le trait doit rester fin : c'est là que la
   grosseur se voit le plus. */
.etape>.ico,.confirmation .pastille .ico{stroke-width:1.4}

/* ---------------- Boutons ---------------- */
.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-size:15px;font-weight:600;letter-spacing:-.01em;
  padding:13px 24px;border-radius:var(--r-s);border:1px solid transparent;
  cursor:pointer;
  white-space:nowrap;
}
.bouton-plein{background:var(--rose);color:#fff;border-color:var(--rose)}
/* La couleur du texte est redite au survol, et ce n'est pas une redite
   inutile : app.css pose « main a:hover{color:var(--rose-sombre)} », dont
   la spécificité (0,1,2) l'emportait sur « .bouton-plein » (0,1,0). Un
   bouton plein survolé affichait donc du rose sombre sur du rose sombre -
   son intitulé disparaissait. Répétée ici, la règle passe à (0,2,0) et
   reprend la main sur toutes les pages qui chargent encore la feuille. */
.bouton-plein:hover{background:var(--rose-sombre);border-color:var(--rose-sombre);color:#fff}
.bouton-contour{background:var(--surface);color:var(--rose);border-color:var(--rose-pale)}
.bouton-contour:hover{background:var(--rose-clair);border-color:var(--rose);color:var(--rose)}
.bouton-nuit{background:var(--surface);color:var(--nuit);border-color:var(--bord)}
.bouton-nuit:hover{background:var(--nuit);color:#fff;border-color:var(--nuit)}
/* Fermer un compte, révoquer un appareil : le geste irréversible se signale
   par sa couleur, et le rouge ne sert qu'à lui. Il vivait dans app.css, donc
   hors de portée des écrans qui suivent la seule charte. */
.bouton-danger{background:var(--surface);color:var(--rouge);border-color:var(--rouge)}
.bouton-danger:hover{background:var(--rouge);color:#fff}
/* Un bouton hors de portée le dit de lui-même. Sans cette règle, un
   « disabled » ne se voyait pas : le bouton gardait sa couleur pleine et
   son curseur de main, et l'on cliquait dans le vide sans comprendre. */
.bouton[disabled],.bouton:disabled{opacity:.45;cursor:not-allowed}
.bouton[disabled]:hover,.bouton:disabled:hover{
  background:var(--rose);border-color:var(--rose);color:#fff;
}
.bouton-nuit[disabled]:hover,.bouton-nuit:disabled:hover{
  background:var(--surface);border-color:var(--bord);color:var(--nuit);
}
.bouton-large{width:100%}
.bouton-petit{padding:10px 18px;font-size:14.5px}

/* ---------------- En-tête ---------------- */
.entete{
  position:sticky;top:0;z-index:60;
  background:rgba(252,252,253,.82);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--bord);
}
.entete .conteneur{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:32px;min-height:74px}
.marque img{height:35px;width:auto}
.menu{display:contents}
.nav{display:flex;justify-self:center;gap:32px;font-size:14.5px;font-weight:500;color:var(--texte)}
.nav a{padding:5px 0}
.nav a:hover{color:var(--nuit)}
.entete-actions{justify-self:end;display:flex;align-items:center;gap:12px}

/* Menu replié, sans JavaScript : une case à cocher et son étiquette en
   guise de bouton. Le petit script du bandeau n'ajoute que le confort -
   refermer au clic à côté, sur Échap, ou quand on suit un lien. */
.bascule,.bascule-etiquette{display:none}
.bascule-etiquette{
  margin-left:auto;width:44px;height:44px;border:1px solid var(--bord);
  border-radius:var(--r-s);cursor:pointer;color:var(--nuit);
  background:var(--surface);transition:background .16s,border-color .16s,color .16s;
}
.bascule-etiquette:hover,.bascule:checked+.bascule-etiquette{
  border-color:var(--rose-pale);background:var(--rose-clair);color:var(--rose);
}
/* La case est masquée à l'œil, jamais au clavier : l'anneau de focus se
   pose donc sur l'étiquette, seule chose visible des deux. */
.bascule:focus-visible+.bascule-etiquette{outline:2px solid var(--rose);outline-offset:2px}
.bascule-etiquette svg{width:22px;height:22px}
/* Ouvert, le bouton porte la croix : on referme là où on a ouvert. */
.bascule-etiquette .ico-croix{display:none}
.bascule:checked+.bascule-etiquette .ico-menu{display:none}
.bascule:checked+.bascule-etiquette .ico-croix{display:block}
/* Le panneau se déroule au lieu d'apparaître d'un coup ; le réglage
   « mouvement réduit » du poste le neutralise plus haut. */
@keyframes menu-deroule{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}

/* ---------------- Bandeau d'accroche ---------------- */
.accroche{position:relative;overflow:hidden;padding:64px 0 92px}
/* Le halo déborde du bord droit de la carte (demande du 27 août 2026) :
   plus grand qu'elle et calé plus près du bord, il l'enveloppe au lieu de
   s'arrêter derrière. Il reste entier - un cercle tranché par le bord de la
   section se lit comme un défaut, non comme un décor. Une sphère 3D en
   pointillés a été essayée à sa place le même jour, puis retirée : l'aplat
   fait foi. */
.accroche::before{
  content:'';position:absolute;top:56px;right:16px;
  width:620px;height:620px;border-radius:50%;
  background:#FFECEF;
}
/* La trame de points a disparu (document 33, décision A2) : le décor de la
   moitié droite - halo, trame, carte ombrée - additionnait trois signaux là
   où l'accroche n'en demande aucun. */
/* Les deux moitiés n'en sont plus (document 33, décision A1) : la promesse
   porte la première vue, l'aperçu ne fait que la montrer. La grille penche
   donc à gauche, et la carte s'aligne sur le bord droit du conteneur au
   lieu d'occuper toute sa colonne. */
.accroche .conteneur{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr .85fr;gap:56px;align-items:center}
.accroche h1{font-size:clamp(36px,4.9vw,58px);font-weight:800;line-height:1.06;letter-spacing:-.015em}
.accroche h1 .accent{display:block;color:var(--rose)}
.accroche .chapo{margin-top:24px;max-width:480px;font-size:18px;line-height:1.6}

.atouts{display:flex;gap:8px;flex-wrap:wrap;margin:32px 0 32px}
.atout{width:96px;text-align:center;font-size:12px;font-weight:600;color:var(--nuit);line-height:1.35}
.atout svg{display:block;width:34px;height:34px;margin:0 auto 10px;color:var(--nuit)}
.accroche-actions{display:flex;gap:14px;flex-wrap:wrap}
/* L'argument commercial au pied du bouton d'essai : sur sa propre ligne,
   discret, sans casser la rangée de boutons. */
.accroche-note{flex-basis:100%;margin-top:2px;font-size:12.5px;color:var(--texte-doux)}

/* L'origine du service, sous l'accroche. Un aplat gris très clair plutôt
   qu'un encadré rose : la première vue porte déjà l'accent sur le titre et
   sur le bouton, et un troisième rose les aurait mis en concurrence. Le
   drapeau garde ses proportions officielles (2:3) et un filet léger, sans
   quoi ses bandes blanches se fondraient dans le fond. */
.origine{
  display:flex;align-items:center;gap:16px;
  margin-top:26px;padding:14px 20px;max-width:470px;
  background:var(--bord-clair);border-radius:var(--r-m);
  font-size:14px;font-weight:600;line-height:1.55;color:var(--nuit);
}
.origine-drapeau{
  flex:none;width:44px;height:auto;border-radius:3px;
  box-shadow:0 0 0 1px rgba(16,26,46,.10);
}
.origine strong{font-weight:800}

/* ---------------- Aperçu du courriel ---------------- */
/* L'aperçu se pose au second plan : ombre presque nulle, fond à peine
   détaché de la page, largeur bornée. Il illustre la promesse, il ne se
   dispute pas la première lecture avec elle. */
.carte-mail{
  background:var(--surface);border:1px solid var(--bord);border-radius:var(--r-l);
  box-shadow:var(--ombre-douce);padding:22px 22px 20px;
  max-width:400px;margin-left:auto;
}
.mail-entete{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:15px;border-bottom:1px solid var(--bord)}
.mail-entete img{height:27px;width:auto}
.mail-entete span{font-size:12px;color:var(--texte-doux)}
.mail-titre{margin-top:17px;font-size:18px;color:var(--rose)}
/* Mention et date sur une ligne, et en gris : un second rose sur la même
   vue affaiblissait celui du titre et celui du bouton. */
.mail-sous{margin-top:3px;color:var(--texte-doux);font-weight:500;font-size:13px}
.mail-bilan{background:var(--bord-clair);border-radius:var(--r-m);padding:13px 16px;margin-top:15px}
.mail-bilan p{font-size:13px;line-height:1.45}
.mail-bilan b{font-size:22px;font-weight:800;color:var(--nuit);margin-right:4px}
.mail-ligne{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:center;padding:13px 2px;border-bottom:1px solid var(--bord)}
.mail-ligne svg:first-child{width:18px;height:18px;color:var(--rose)}
.mail-type{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--rose)}
.mail-nom{font-size:13.5px;font-weight:700;color:var(--nuit);margin-top:1px}
.mail-det{font-size:12px;color:var(--texte-doux)}
.mail-pied{margin-top:17px}
.mail-note{margin-top:11px;text-align:center;font-size:11.5px;color:var(--texte-doux)}

/* ---------------- Comment ça marche ---------------- */
/* Quatre étapes depuis le document 20 : la quatrième - le tableau de bord -
   ne tenait pas dans une grille de trois. */
/* Le fin liséré rose enclot les quatre étapes en un seul geste (demande du
   27 août 2026) : c'est un cadre, pas une carte - ni fond, ni ombre. */
.etapes{
  display:grid;grid-template-columns:repeat(4,1fr);
  padding:40px 10px;border:1px solid var(--rose);border-radius:var(--r-l);
}
.etape{text-align:center;padding:0 22px}
.etape+.etape{border-left:1px solid var(--bord)}
.etape-num{width:38px;height:38px;margin:0 auto 22px;border-radius:50%;background:var(--rose);color:#fff;font-weight:700;font-size:16px;display:grid;place-items:center}
.etape>svg{display:block;width:48px;height:48px;margin:0 auto 20px;color:var(--nuit)}
.etape h3{font-size:18px;margin-bottom:12px}
.etape p{font-size:14px;line-height:1.6}

/* ---------------- Le portail ---------------- */
.portail{
  padding:88px 0;background:var(--fond-tinte);
  border-top:1px solid var(--bord);border-bottom:1px solid var(--bord);
}
.portail .conteneur{display:grid;grid-template-columns:1.7fr 1fr;gap:44px;align-items:center}
.portail h2{font-size:clamp(26px,3vw,33px);margin-bottom:26px}
.liste-check li{display:grid;grid-template-columns:22px 1fr;gap:14px;margin-bottom:17px;font-size:15.5px;line-height:1.5}
.liste-check svg{width:22px;height:22px;color:var(--rose);margin-top:2px}

.portail .bouton{margin-top:12px}

/* Le portail en pile : l'explication, puis l'écran en grand.

   La grille à deux colonnes reste la règle du bandeau - « .portail-inverse »
   s'en sert encore sur « fonctionnalites.php ». Ce modificateur ne vaut que
   pour l'accueil, où la maquette est l'argument : à mi-largeur, l'écran de
   l'abonné tombait à 58 % de sa taille et ses libellés devenaient illisibles.
   En pile il occupe toute la colonne, donc plus de 90 %.

   Le texte se centre, et les quatre fonctions tiennent sur un rang. Une
   liste à coches les empilait sur deux ou trois : chaque entrée y valait la
   largeur de sa phrase la plus longue, et quatre phrases ne tiennent pas
   côte à côte. En colonnes, la mesure ne dépend plus du texte - c'est le texte
   qui se replie sous son intitulé. */
.portail .conteneur.portail-empile{display:block}
.portail-texte{text-align:center;margin-bottom:52px}
/* Le titre garde une largeur de lecture ; la rangée, non : elle prend le
   bandeau entier, sans quoi les colonnes se resserrent pour rien. */
.portail-texte h2{max-width:640px;margin:0 auto 40px}

/* La rangée des quatre fonctions.

   Autant de colonnes que d'entrées, et non une grille qui s'ajuste : le
   nombre est fixe, il est petit, et un « auto-fit » laisserait un rang de
   trois plus un orphelin dès que la fenêtre se réduit d'un cheveu.

   Le compte doit suivre la liste d'index.php : une colonne de plus que
   d'entrées reste vide à droite, et la rangée entière paraît alors décalée
   à gauche sous un titre, lui, centré. */
.portail-atouts{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:30px;margin:0 0 40px;
}
.portail-atouts li{display:block;text-align:center}
.portail-atouts .ico{
  display:block;width:26px;height:26px;margin:0 auto 12px;color:var(--rose);
}
.portail-atout-nom{display:block;font-size:15.5px;font-weight:700;color:var(--nuit);line-height:1.3}
.portail-atout-aide{display:block;margin-top:6px;font-size:13.5px;line-height:1.45;color:var(--texte-doux)}
.portail-empile .portail-texte .bouton{margin:0 5px}
.portail-empile .fenetre{max-width:1060px;margin:0 auto}

/* Le rang tient jusqu'à ce que les colonnes tombent sous la largeur d'un
   intitulé : « La parution complète » mesure 166 px, et en dessous de
   1000 px de fenêtre les colonnes n'en font plus autant. On passe alors à
   deux rangs de deux - et non à trois colonnes, qui laisseraient une entrée
   orpheline sur le second rang - jamais à quatre entrées empilées, qui
   rendraient la section aussi haute que ce qu'elle annonce. */
@media (max-width:1000px){
  .portail-atouts{grid-template-columns:repeat(2,1fr);gap:32px 26px}
}
@media (max-width:600px){
  /* Deux colonnes de 154 px : « La parution complète » y passait à la ligne
     seule de son rang. Un point de moins, et les quatre intitulés se
     tiennent de nouveau sur un trait. */
  .portail-atouts{grid-template-columns:repeat(2,1fr);gap:28px 20px}
  .portail-atout-nom{font-size:14px}
  .portail-atout-aide{font-size:13px}
}

/* L'aperçu du portail : l'écran de l'abonné, à l'échelle.

   La maquette n'a pas de style à elle. Elle rejoue le balisage de bord.php
   avec bord.css et les composants du service ; ce bloc ne fait que deux
   choses - réduire l'écran à la largeur de la colonne, et neutraliser ce qui
   n'a de sens que dans une vraie fenêtre (la hauteur d'écran du panneau, son
   collage en haut).

   La réduction se lit en « cqw » : la carte est un conteneur, l'écran est
   dessiné à 1440 px, et l'échelle vaut la largeur disponible divisée par
   1440. Elle suit donc la colonne sans qu'aucun nombre soit à tenir.

   1440 n'est pas un goût : c'est la largeur de fenêtre où le canevas
   atteint son plafond de 1080 px et où la grille tient ses **douze
   colonnes** - le seul palier où la disposition conseillée pave ses trois
   bandes sans creux (8+4, 4+4+4, 8+4). C'est ce pavage entier que la
   maquette montre : les sept widgets, aucun rogné (demande du 27 août
   2026, document 45 § R3 révisée). */
/* La fenêtre qui porte la maquette.

   Une barre, trois pastilles, une adresse : c'est ce qui dit « ceci est un
   écran » sans qu'aucune légende ait à l'écrire. La fenêtre porte l'ombre et
   le rayon ; le cadre à l'intérieur ne fait plus que rogner. */
.fenetre{
  background:var(--surface);
  border:1px solid #EFE2E6;border-radius:var(--r-l);
  box-shadow:0 2px 6px rgba(16,26,46,.05), 0 26px 60px rgba(16,26,46,.10);
  overflow:hidden;
}
.fenetre-barre{
  display:flex;align-items:center;gap:14px;height:38px;padding:0 14px;
  background:#F7F8FA;border-bottom:1px solid var(--bord);
}
.fenetre-pastilles{display:flex;gap:6px}
.fenetre-pastilles i{width:9px;height:9px;border-radius:50%;background:#E2E5EB}
/* Une seule pastille prend l'accent : trois points roses feraient un feu
   tricolore, et la marque n'est pas un feu. */
.fenetre-pastilles i:first-child{background:var(--rose-pale)}
.fenetre-adresse{
  display:flex;align-items:center;gap:6px;
  padding:3px 12px;border-radius:999px;
  background:var(--surface);border:1px solid var(--bord);
  font-size:11px;color:var(--texte-doux);
}
.fenetre-adresse .ico{width:11px;height:11px;--ico-accent:currentColor}

.appli-cadre{
  position:relative;
  container-type:inline-size;
  /* Le cadre est au format d'un écran d'ordinateur - 16/10 (demande du
     27 août 2026, qui revient sur celle du même jour où le cadre suivait
     la hauteur du contenu : un aperçu quasi carré ne se lisait plus comme
     un écran). Le canevas dessiné à 1440 px dépasse cette hauteur, et
     l'« overflow » rogne le bas, et le voile dégradé ci-dessous fond la
     coupe dans le gris du canevas plutôt que de la laisser nette. */
  aspect-ratio:16/10;
  overflow:hidden;
  /* Le gris de l'espace abonné (« .page-bord »), et non « --fond » : le
     canevas du tableau de bord est transparent, et c'est ce gris qui
     dessine les gouttières entre les cartes. Un fond blanc les gommerait. */
  background:var(--bord-clair);
}
/* Le voile de bas de cadre : le canevas s'évanouit vers le gris de la page
   abonnée, et la coupe du 16/10 se lit comme « la page continue » plutôt
   que comme un rognage (demande du 27 août 2026, avec le retour au 16/10). */
.appli-cadre::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:38%;
  background:linear-gradient(to bottom,
    rgba(244,246,249,0) 0%,
    rgba(244,246,249,.72) 46%,
    var(--bord-clair) 100%);
  pointer-events:none;
}
.appli-ecran{
  width:1440px;
  /* Une division de deux longueurs rend un nombre (CSS Values 4) : c'est ce
     qui permet à l'échelle de suivre la colonne sans qu'aucune largeur soit
     écrite deux fois. Le repli - « scale(.585) » - vaut la largeur de la
     colonne au format de bureau, là où la maquette compte le plus. */
  transform:scale(.585);
  transform:scale(calc(100cqw / 1440px));
  transform-origin:top left;
}

/* La grille de la maquette est tenue à douze colonnes, quel que soit
   l'écran du **visiteur** : les media queries de repli de bord.css lisent
   la fenêtre du navigateur - celle de l'internaute, pas celle que la
   maquette dessine - et replieraient la grille à dix ou huit colonnes sur
   un portable, en creusant des trous dans un pavage réglé pour douze. La
   spécificité double l'emporte sur les règles de repli comme sur les
   requêtes de conteneur. */
.appli-ecran .bord-grille{--col:12}
.appli-ecran .wid-normal{grid-column:span 4;grid-row:span 4}
.appli-ecran .wid-etendu{grid-column:span 8;grid-row:span 4}

/* Ce que la carte doit défaire de l'écran réel : il se cale sur la fenêtre,
   elle n'en est pas une. */
.appli-ecran .bo{min-height:0}
.appli-ecran .bo-panneau{position:static;height:auto;align-self:stretch}
.appli-ecran .bo-corps{padding-bottom:0}

/* Le panneau de l'écran réel porte des liens ; la maquette n'en porte pas -
   ses entrées sont des « span ». Les règles de bord.css visent « .bo-nav a » :
   on les redit ici pour le balisage inerte, à l'identique. */
.appli-ecran .bo-nav>span{
  position:relative;display:flex;align-items:center;gap:11px;
  padding:6.5px 12px;border-radius:var(--r-s);
  font-size:14px;font-weight:500;color:var(--texte);
}
.appli-ecran .bo-nav>span .ico{width:18px;height:18px;color:var(--texte-doux)}
.appli-ecran .bo-nav>span.actif{background:var(--rose-clair);color:var(--rose);font-weight:700}
.appli-ecran .bo-nav>span.actif .ico{color:var(--rose)}
.appli-ecran .bo-compte-tete{display:flex;align-items:center;gap:10px;padding:8px 10px}
.appli-ecran .compte-jeton{
  display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--nuit);color:#fff;font-size:11px;font-weight:700;
}
.appli-ecran .bo-compte-tete .ico{width:13px;height:13px;color:var(--texte-doux);--ico-accent:currentColor}
.appli-ecran .bouton{cursor:default}

/* Le titre d'une carte, défendu contre la page qui héberge : la maquette
   vit dans la section « .portail », dont « .portail h2 » - un cran plus
   spécifique que « .wid-titre » - grossirait les titres de widgets à la
   taille d'un intertitre de page. */
.appli-ecran .wid-titre{
  margin:0;font-size:13px;font-weight:700;line-height:1.25;letter-spacing:0;
}

/* Le champ de la « Recherche rapide », en faux : un vrai <input> serait
   tabulable dans une image (« role="img" », « aria-hidden »). Le span
   reprend la mise du champ réel de bord.css, le texte joue le
   placeholder. */
.appli-ecran .wid-faux-champ{
  flex:1 1 auto;min-width:0;padding:10px 12px;
  font-size:14px;color:var(--texte-doux);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:var(--surface);border:1px solid var(--bord);
  border-radius:var(--r-s);
}

/* ---------------- Recherche ---------------- */
.recherche{position:relative;overflow:hidden;text-align:center}
.recherche .deco{position:absolute;top:50%;transform:translateY(-50%);width:210px;color:var(--rose-pale);opacity:.85}
.recherche .deco-gauche{left:10px}
.recherche .deco-droite{right:10px}
.champ{
  display:flex;max-width:620px;margin:28px auto 14px;
  background:var(--surface);border:1px solid var(--bord);border-radius:var(--r-s);
  box-shadow:var(--ombre-douce);overflow:hidden;
}
.champ label{display:flex;align-items:center;padding-left:16px;color:var(--texte-doux)}
.champ label svg{width:18px;height:18px}
.champ input{flex:1;min-width:0;border:0;outline:0;padding:16px 14px;font:inherit;font-size:15.5px;color:var(--nuit);background:transparent}
.champ input::placeholder{color:var(--texte-doux)}
.champ button{border:0;background:var(--rose);color:#fff;font:inherit;font-weight:700;font-size:15.5px;padding:0 28px;cursor:pointer}
.champ button:hover{background:var(--rose-sombre)}
.exemples{font-size:13px;color:var(--texte-doux)}

/* ---------------- Tarifs ---------------- */
.tarifs{display:grid;grid-template-columns:repeat(2,minmax(0,380px));gap:30px;justify-content:center;align-items:start}
.tarif{position:relative;background:var(--surface);border:1px solid var(--bord);border-radius:var(--r-m);padding:30px 28px}
.tarif.vedette{border:2px solid var(--rose);box-shadow:var(--ombre)}
.badge{
  position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  background:var(--rose);color:#fff;border-radius:6px;
  font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:6px 16px;white-space:nowrap;
}
.tarif-nom{font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--nuit)}
.tarif-prix{margin-top:10px;font-size:34px;font-weight:800;color:var(--nuit);letter-spacing:-.02em}
.tarif-prix .devise{color:var(--rose)}
.tarif-prix .periode{font-size:16px;font-weight:600;color:var(--texte)}
.tarif-ttc{margin-top:4px;font-size:13.5px;color:var(--texte)}
.tarif-liste{display:grid;grid-template-columns:1fr 1fr;gap:11px 14px;margin:22px 0 26px;font-size:12.5px;line-height:1.4}
.tarif-liste li{display:grid;grid-template-columns:17px 1fr;gap:9px;align-items:start}
.tarif-liste svg{width:17px;height:17px;color:var(--rose);margin-top:1px}

/* Le résumé des tarifs sur la page unique (document 24, M3). Il ne reprend
   ni la liste des fonctions ni la remise annuelle : celles-ci vivent sur
   « tarifs.php », que le pied de la zone rappelle. Deux cartes, centrées,
   qui ne dépassent pas la largeur d'une carte de la page dédiée. */
.tarifs-bref{
  display:grid;grid-template-columns:repeat(2,minmax(0,380px));
  gap:26px;justify-content:center;align-items:stretch;
}
/* Les deux cartes font la même hauteur : la colonne s'étire, et le bouton
   se cale en pied, si bien que les deux appels s'alignent. */
.tarif-bref{
  position:relative;display:flex;flex-direction:column;
  padding:30px 28px;text-align:center;
  background:var(--surface);border:1px solid var(--bord);border-radius:var(--r-l);
}
.tarif-bref .bouton{margin-top:auto}
.tarif-bref.vedette{border:2px solid var(--rose);box-shadow:var(--ombre)}
.tarif-bref .badge{top:-14px}
.tarif-bref .pastille{margin:0 auto 16px}
.tarif-bref h3{font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.tarif-bref-qui{margin-top:7px;font-size:13.5px;line-height:1.45}
.tarif-bref-prix{
  margin-top:18px;font-size:34px;font-weight:800;
  color:var(--rose);letter-spacing:-.02em;line-height:1.1;
}
.tarif-bref-prix .devise{font-size:27px}
.tarif-bref-prix .taxe{font-size:15px;font-weight:700;color:var(--nuit)}
.tarif-bref-prix .periode{font-size:16px;font-weight:600;color:var(--nuit)}
/* Le détail de la taxe, repris du récapitulatif de souscription : deux
   colonnes serrées, l'intitulé à gauche et le montant à droite, pour que le
   total se lise en descendant la colonne de droite plutôt qu'en cherchant.
   Les chiffres sont tabulaires - sans quoi « 3 955 » et « 455 » ne s'alignent
   pas sous la même unité. */
.tarif-bref-detail{
  margin:16px auto 0;max-width:260px;text-align:left;
  font-size:13px;line-height:1.5;color:var(--texte);
}
.tarif-bref-detail>div{display:flex;justify-content:space-between;gap:12px;padding:4px 0}
.tarif-bref-detail dd{font-variant-numeric:tabular-nums;white-space:nowrap}
.tarif-bref-total{
  margin-top:4px;padding-top:8px !important;
  border-top:1px solid var(--bord);
}
.tarif-bref-total dt{font-weight:700;color:var(--nuit)}
.tarif-bref-total strong{color:var(--rose);font-weight:800}
.tarif-bref-net{
  margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--texte-doux);
}
.tarif-bref-sieges{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin:14px 0 24px;font-size:13px;line-height:1.4;color:var(--texte);
}
.tarif-bref-sieges svg{width:18px;height:18px;flex:none;color:var(--rose)}
.tarifs-bref-pied{
  margin:32px auto 0;max-width:640px;text-align:center;
  font-size:13.5px;line-height:1.6;color:var(--texte-doux);
}
.tarifs-bref-pied a{display:inline-block;margin-top:6px;color:var(--rose);font-weight:700}
.tarifs-bref-pied a:hover{color:var(--rose-sombre)}

/* ---------------- Pied de page ---------------- */
.pied{background:var(--nuit);color:#fff;padding:30px 0}
.pied .conteneur{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.pied img{height:40px;width:auto}
.pied-mention{max-width:240px;font-size:12px;line-height:1.45;color:rgba(255,255,255,.7)}
.pied-mention strong{display:block;color:#fff;letter-spacing:.04em}
.pied-liens{margin-left:auto;display:flex;gap:28px;font-size:13.5px;flex-wrap:wrap;color:rgba(255,255,255,.82)}
.pied-liens a:hover{color:var(--rose)}
.pied-social{display:flex;gap:11px}
.pied-social a{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.10);display:grid;place-items:center;color:#fff}
.pied-social a:hover{background:var(--rose)}
.pied-social svg{width:17px;height:17px}

/* ---------------- Adaptations ---------------- */
@media (max-width:860px){
  .recherche .deco{display:none}
}
@media (max-width:1080px){
  .entete .bascule-etiquette{display:grid;place-items:center}
  /* « display:none » sortait la case de l'ordre de tabulation, et une
     <label> ne prend pas le focus : le menu replié devenait inatteignable
     sans souris. On la masque donc à la façon d'un texte d'accessibilité,
     et c'est l'étiquette qui porte l'anneau de focus. */
  .entete .bascule{
    display:block;position:absolute;width:1px;height:1px;margin:-1px;
    padding:0;border:0;clip-path:inset(50%);overflow:hidden;white-space:nowrap;
  }
  .entete .conteneur{display:flex;justify-content:space-between;position:relative}
  .menu{
    display:none;position:absolute;top:100%;left:0;right:0;z-index:5;
    background:var(--surface);border-bottom:1px solid var(--bord);
    box-shadow:var(--ombre);padding:6px 24px 18px;
    /* Le panneau ne déborde jamais de l'écran : au-delà il défile chez
       lui, sans emmener la page derrière. */
    max-height:calc(100vh - 74px);max-height:calc(100dvh - 74px);
    overflow-y:auto;overscroll-behavior:contain;
  }
  .bascule:checked ~ .menu{display:block;animation:menu-deroule .16s ease-out}
  /* Les alignements du bandeau large survivaient dans le panneau : posés
     pour la grille à trois colonnes, « justify-self » y rétrécissait la
     navigation et les actions à leur contenu au lieu de les étirer - d'où
     des liens flottant au milieu de rien. En colonne, tout s'aligne sur le
     bord du bandeau, à l'aplomb de la marque. */
  .menu .nav,.menu .entete-actions{justify-self:stretch}
  .menu .nav{flex-direction:column;gap:0}
  .menu .nav a{display:block;padding:13px 0;border-bottom:1px solid var(--bord)}
  .menu .entete-actions{margin:16px 0 0;gap:10px}
  .menu .entete-actions .bouton{flex:1}
  .accroche .conteneur,.portail .conteneur{grid-template-columns:1fr;gap:46px}
  .accroche .chapo{max-width:none}
  .carte-mail{max-width:520px;margin:0 auto}
  .accroche::before{width:460px;height:460px;top:-240px;right:-160px}
  .etapes{grid-template-columns:repeat(2,1fr);gap:44px 0}
  .etape{padding:0 22px}
  .etape:nth-child(3){border-left:0}
}
@media (max-width:640px){
  body{font-size:16px}
  .marque img{height:33px}
  .entete .conteneur{min-height:72px}
  .accroche::before{width:330px;height:330px;top:-150px;right:-120px}
  .origine{max-width:none;padding:13px 16px;gap:13px;font-size:13px}
  .origine-drapeau{width:38px}
  .tarifs-bref{grid-template-columns:minmax(0,420px)}
  .tarif-bref{padding:24px 20px}
  .contact-carte{padding:22px 20px}
  .atouts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 10px}
  .atout{width:auto}
  .section,.portail{padding:58px 0}
  .accroche{padding:40px 0 62px}
  .atouts{gap:18px 22px}
  .carte-mail{padding:20px}
  .etapes{grid-template-columns:1fr;gap:40px}
  .etape{padding:0}
  .etape+.etape{border-left:0}

  /* Sous cette largeur, la maquette tomberait à un quart de sa taille :
     une capture d'écran de bureau réduite à 330 px ne se lit plus, elle
     fait du bruit. La section garde son titre, ses cinq fonctions et son
     appel - ce qui, sur un téléphone, est ce qui compte. */
  .fenetre{display:none}
  .tarifs{grid-template-columns:minmax(0,420px);gap:34px}
  .tarif-liste{grid-template-columns:1fr}
  .champ{flex-wrap:wrap}
  .champ input{width:100%;flex:1 0 60%}
  .champ button{flex:1;padding:14px}
  .pied .conteneur{justify-content:center;text-align:center}
  .pied-liens{margin:0 auto;justify-content:center;gap:18px}
  .pied-mention{max-width:none}
}

/* ============================================================
   Pages de contenu - mentions légales, confidentialité, contact
   ============================================================ */

.page-entete{
  padding:58px 0 54px;text-align:center;
  background:var(--fond-tinte);border-bottom:1px solid var(--bord);
}
.page-entete .conteneur{max-width:840px}
.page-entete h1{font-size:clamp(28px,3.4vw,40px)}
.page-entete .chapo{margin:16px auto 0;max-width:660px;font-size:16.5px}
.surtitre{
  display:block;margin-bottom:12px;color:var(--rose);
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}

.contenu{padding:60px 0 82px}
.contenu .conteneur{max-width:840px}
.contenu-large .conteneur{max-width:1020px}
.contenu h2{font-size:22px;margin:42px 0 16px;padding-top:26px;border-top:1px solid var(--bord)}
.contenu h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.contenu h3{font-size:17px;margin:26px 0 10px}
.contenu p{margin:0 0 15px}
.contenu p a,.contenu li a,.contenu dd a,.contenu td a{
  color:var(--rose);font-weight:600;text-decoration:underline;text-underline-offset:2px;
}
.contenu p a:hover,.contenu li a:hover,.contenu dd a:hover{color:var(--rose-sombre)}
.contenu .bouton{text-decoration:none}
.puces{margin:0 0 18px}
.puces li{position:relative;padding-left:22px;margin-bottom:9px}
.puces li::before{content:'';position:absolute;left:3px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--rose)}
.maj{font-size:13.5px;color:var(--texte-doux)}

.encadre{
  background:var(--rose-clair);border-left:3px solid var(--rose);
  border-radius:0 10px 10px 0;padding:20px 24px;margin:0 0 24px;
}
.encadre p:last-child{margin-bottom:0}
.avis{
  background:#FFF6F7;border:1px solid var(--rose-pale);border-radius:var(--r-m);
  padding:18px 22px;margin:0 0 26px;font-size:15px;
}
.avis p:last-child{margin-bottom:0}

.identite{display:grid;grid-template-columns:1fr 1fr;gap:0 30px;margin:0 0 26px}
.identite>div{padding:13px 0;border-bottom:1px solid var(--bord)}
.identite dt{
  margin-bottom:4px;color:var(--texte-doux);
  font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
}
.identite dd{margin:0;color:var(--nuit);font-weight:600;font-size:15.5px}
.identite-large{grid-template-columns:1fr}
.manquant{color:var(--rose);font-style:normal;font-weight:700}

.cadre-tableau{overflow-x:auto;margin:0 0 26px;border:1px solid var(--bord);border-radius:var(--r-m)}
.contenu table{width:100%;min-width:540px;border-collapse:collapse;font-size:14.5px}
.contenu thead th{
  background:#FAFBFC;text-align:left;padding:12px 16px;border-bottom:1px solid var(--bord);
  color:var(--texte-doux);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
.contenu td{padding:13px 16px;border-bottom:1px solid #F3F4F8;vertical-align:top;line-height:1.5}
.contenu tbody tr:last-child td{border-bottom:0}

/* ---------------- Contact ---------------- */
/* La zone de contact de la page unique : le mot à gauche, avec les deux
   autres façons de nous joindre, le formulaire à droite dans une carte.
   La carte donne au formulaire une assise que six champs posés sur le fond
   de page n'auraient pas, et le sépare du texte sans trait de séparation. */
.contact-grille{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:start}
.contact-mot h2{font-size:clamp(25px,2.8vw,32px)}
.contact-mot .chapo{margin-top:16px;font-size:16.5px;line-height:1.6}
.contact-voies{display:grid;gap:22px;margin:32px 0 0;padding:0;list-style:none}
.contact-voies li{display:grid;grid-template-columns:46px 1fr;gap:16px;align-items:center}
.contact-voies .pastille{width:46px;height:46px;border-radius:var(--r-m)}
.contact-voies .pastille svg{width:21px;height:21px}
.contact-voies h3{margin:0 0 2px;font-size:12px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--texte-doux)}
.contact-voies p{margin:0;font-size:15.5px;font-weight:600;color:var(--nuit)}
.contact-voies a{color:var(--nuit)}
.contact-voies a:hover{color:var(--rose)}
/* Sans ombre : le filet et le fond blanc suffisent à détacher le formulaire
   du fond de section, et l'ombre haute le faisait flotter au-dessus d'une
   zone qui n'a rien à survoler. */
.contact-carte{
  background:var(--surface);border:1px solid var(--bord);
  border-radius:var(--r-l);padding:30px 30px 28px;
}
.contact-carte .message{margin-bottom:24px}
.contact-carte textarea{min-height:130px}
.contact-carte .aide{margin-top:2px;text-align:center}
.contact-carte .aide a{color:var(--rose);font-weight:600}
.formulaire{display:grid;gap:18px}
.formulaire label{display:block;margin-bottom:7px;font-size:13.5px;font-weight:700;color:var(--nuit)}
.formulaire label .facultatif{font-weight:400;color:var(--texte-doux)}
.formulaire input,.formulaire select,.formulaire textarea{
  width:100%;padding:12px 14px;font:inherit;font-size:15px;color:var(--nuit);
  background:var(--surface);border:1px solid var(--bord);border-radius:var(--r-s);outline:0;
}
.formulaire textarea{min-height:180px;resize:vertical;line-height:1.55}
.formulaire input:focus,.formulaire select:focus,.formulaire textarea:focus{
  border-color:var(--rose);box-shadow:var(--anneau);
}
.formulaire .fautif{border-color:var(--rose);background:#FFFAFB}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.aide{margin-top:7px;font-size:12.5px;color:var(--texte-doux)}
.erreur-champ{margin-top:6px;font-size:13px;font-weight:600;color:var(--rose)}

.message{border-radius:var(--r-m);padding:18px 22px;margin:0 0 28px;font-size:15px}
.message strong{display:block;margin-bottom:4px}
.message p:last-child{margin-bottom:0}
.message-succes{background:#F2FAF5;border:1px solid #C3E5CF;color:#1C5C37}
.message-erreur{background:#FFF3F5;border:1px solid var(--rose-pale);color:var(--rose-sombre)}

.carte-info{
  background:var(--surface);border:1px solid var(--bord);border-radius:var(--r-m);
  box-shadow:var(--ombre-douce);padding:26px;
}
.carte-info h2{margin:0 0 6px;padding:0;border:0;font-size:18px}
.carte-info>p{font-size:14px;margin-bottom:14px}
.carte-info dl{margin:0}
.carte-info dl>div{
  display:grid;grid-template-columns:20px 1fr;gap:13px;
  padding:13px 0;border-bottom:1px solid var(--bord);
}
.carte-info dl>div:last-child{border-bottom:0}
.carte-info svg{width:20px;height:20px;color:var(--rose);margin-top:3px}
.carte-info dt{
  color:var(--texte-doux);font-size:11.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
}
.carte-info dd{margin:3px 0 0;font-size:15px;font-weight:600;color:var(--nuit);line-height:1.45}
.carte-info dd a{color:var(--nuit);text-decoration:none}
.carte-info dd a:hover{color:var(--rose)}
.carte-info dd .discret{display:block;font-weight:400;font-size:13px;color:var(--texte-doux);margin-top:2px}

@media (max-width:900px){
  .contact-grille{grid-template-columns:1fr;gap:34px}
}
@media (max-width:640px){
  .page-entete{padding:40px 0 38px}
  .contenu{padding:44px 0 60px}
  .identite{grid-template-columns:1fr}
  .contenu h2{font-size:20px}
}

/* ============================================================
   Espace compte - inscription, connexion
   ============================================================ */

.inscription{padding:42px 0 56px}
.inscription .conteneur{
  max-width:1120px;display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start;
}
.inscription h1{font-size:clamp(26px,2.7vw,34px)}
.inscription h1 .accent{color:var(--rose)}
.promesse{margin-top:11px;font-size:16px;font-weight:700;color:var(--rose)}
.inscription .chapo{margin-top:9px;max-width:430px;font-size:14.5px;line-height:1.6}
.inscription .formulaire{margin-top:24px}

/* Sept champs, une case et trois rassurances : à la taille du reste du site,
   la colonne de gauche mangeait deux écrans et paraissait grossière. Elle se
   resserre ici, et là seulement - le formulaire de contact, lui, tient sur
   une carte et n'a que quatre champs. */
.inscription .formulaire{gap:14px}
.inscription .paire{gap:14px}
.inscription .formulaire label{margin-bottom:5px;font-size:13px}
/* « padding-block » et non « padding » : le raccourci l'emporterait sur le
   « padding-left » que « .saisie input » réserve au pictogramme, et le
   texte viendrait se poser dessus. Et la case à cocher est écartée :
   « composants.css » remet son remplissage à zéro pour une raison qu'il
   énonce lui-même - un remplissage plus large que la case en fixe la
   taille, et la case cesse d'être carrée. */
.inscription .formulaire input:not([type=checkbox],[type=radio]){
  padding-block:10px;font-size:14.5px;
}
.inscription .aide{margin-top:4px;font-size:12px}
.inscription .erreur-champ{margin-top:4px;font-size:12.5px}
.inscription .message{padding:15px 18px;font-size:14px}
.inscription .message{margin-top:28px;margin-bottom:0}
.paire{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.requis{color:var(--rose)}
.formulaire input::placeholder{color:var(--texte-doux)}

/* Champ avec pictogramme, et œil pour les mots de passe. */
.saisie{position:relative;display:block}
.saisie>svg{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--texte-doux);pointer-events:none;
}
.saisie input{padding-left:41px}
.saisie:has(.oeil) input{padding-right:44px}
.oeil{
  position:absolute;right:7px;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;width:30px;height:30px;padding:0;
  border:0;background:none;color:var(--texte-doux);cursor:pointer;
}
.oeil svg{width:17px;height:17px}
.oeil:hover,.oeil.oeil-actif{color:var(--rose)}

/* Bulle d'aide du numéro TAHITI. */
.bulle{
  position:relative;display:inline-grid;place-items:center;
  width:17px;height:17px;margin-left:5px;vertical-align:-3px;
  border:1.5px solid var(--texte-doux);border-radius:50%;
  color:var(--texte-doux);font-size:11px;font-weight:700;cursor:help;
  /* L'interligne du corps - 1,65 - donnait une ligne de 18 px dans un
     cercle de 17 : le « ? » débordait par le haut et se posait de
     travers. Il est porté par « .bulle-signe » plutôt que par un simple
     texte, sinon l'indentation du gabarit entre dans la boîte centrée
     et le décale vers la gauche. */
  line-height:1;
}
.bulle-signe{display:block;line-height:1}
.bulle-texte{
  position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);
  width:260px;padding:11px 13px;border-radius:var(--r-s);
  background:var(--nuit);color:#fff;text-align:left;
  font-size:12.5px;font-weight:400;line-height:1.45;
  opacity:0;visibility:hidden;z-index:10;
}
.bulle:hover .bulle-texte,.bulle:focus .bulle-texte{opacity:1;visibility:visible}

.case{display:grid;grid-template-columns:19px 1fr;gap:11px;align-items:start;margin-top:2px}
.case input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--rose)}
.case label{margin:0;font-size:13.5px;font-weight:400;line-height:1.5;color:var(--texte)}
.case a{color:var(--rose);font-weight:600}

.inscription .bouton-large{position:relative;padding:14px 26px;font-size:15.5px}
.fleche-cta{position:absolute;right:22px;display:grid;place-items:center}
.fleche-cta svg{width:16px;height:16px}

.rassurances{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:2px}
.rassurances li{display:grid;grid-template-columns:18px 1fr;gap:9px;align-items:start;
                font-size:12px;line-height:1.35;color:var(--texte)}
.rassurances svg{width:16px;height:16px;color:var(--rose);margin-top:1px}

/* L'étape d'après, sous les rassurances : cadre pointillé, texte à gauche,
   liste cochée en illustration à droite. */
.etape-suivante{
  margin-top:22px;display:flex;align-items:center;gap:18px;
  padding:18px 20px;border:2px dashed var(--rose-pale);border-radius:14px;
}
.etape-surtitre{font-size:13px;font-weight:700;color:var(--rose)}
.etape-titre{margin-top:4px;font-size:17px;font-weight:700;line-height:1.3;color:var(--nuit)}
.etape-detail{margin-top:6px;font-size:14px;line-height:1.55;color:var(--texte)}
.etape-illustration{flex:0 0 112px;width:112px;height:112px}

.deja{margin-top:18px;font-size:13.5px}
.deja a{color:var(--rose);font-weight:700}

/* ---------------- Ce que contient l'essai ---------------- */
/*
 * Le panneau empilait quatre roses - le fond de page, le champ du panneau,
 * l'encadré de fin et les carrés d'icônes - séparés par deux ou trois points
 * de clarté : rien ne s'y détachait de rien, et les six atouts tombaient
 * d'un bloc sans que le regard sache où s'arrêter.
 *
 * On applique ici la règle que « --fond » énonce déjà pour tout le site :
 * la page est teintée, les cartes sont blanches. Le panneau garde donc son
 * champ rose - c'est lui qui équilibre la colonne du formulaire, restée
 * sans carte - mais son contenu remonte sur une carte blanche, où les
 * pastilles roses retrouvent enfin un fond qui les porte. Trois zones
 * lisibles au lieu d'un aplat : l'annonce, la liste, la note de fin.
 */
.inscription-atouts{
  background:var(--rose-clair);
  border-radius:var(--r-xl);padding:22px 20px;
}

.atouts-entete{display:grid;grid-template-columns:42px 1fr;gap:14px;align-items:center}
.atouts-entete h2{font-size:17.5px;line-height:1.32}
.pastille{
  display:grid;place-items:center;width:52px;height:52px;
  border-radius:var(--r-l);background:#FBE0E7;color:var(--rose);
}
.pastille svg{width:24px;height:24px}
.pastille-pleine{border-radius:50%;background:var(--rose);color:#fff}
.trait-gauche{width:88px;height:3px;border-radius:2px;background:var(--rose);margin:20px 0 0}

.inscription-atouts .pastille{width:42px;height:42px;border-radius:var(--r-m)}
.inscription-atouts .pastille svg{width:20px;height:20px}
.inscription-atouts .pastille-pleine{border-radius:50%}

/* Le filet partait du bord gauche du panneau quand le titre, lui, commence
   après la pastille : il soulignait le vide. Il devient la ligne qui ferme
   l'entête, sur toute la largeur - c'est ce qu'on lui demandait. */
.inscription-atouts>.trait-gauche{
  width:auto;height:1px;border-radius:0;background:var(--rose-pale);margin:17px 0 0;
}

.liste-avantages{
  display:grid;gap:0;margin-top:17px;padding:0 15px;
  border-radius:var(--r-l);background:var(--surface);box-shadow:var(--ombre-douce);
}
.liste-avantages li{
  display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;
  padding:12px 0;border-top:1px solid var(--bord-clair);
}
.liste-avantages li:first-child{border-top:0}
.liste-avantages .pastille{width:34px;height:34px;border-radius:var(--r-s)}
.liste-avantages .pastille svg{width:17px;height:17px}
.liste-avantages h3{margin:0 0 2px;font-size:14.5px}
.liste-avantages p{margin:0;font-size:13px;line-height:1.45}

/* La note de fin ferme la colonne : c'est la seule phrase du panneau qui
   parle d'après - la fin de l'essai, ou le compte qu'on ne partage pas.
   En rose sur rose elle passait inaperçue ; en bleu nuit elle se lit, et
   elle laisse au bouton d'envoi le seul aplat pleinement rose de l'écran.
   Le couple nuit / blanc est déjà celui de « .bulle-texte ». */
.fin-essai{
  display:grid;grid-template-columns:38px 1fr;gap:0 14px;align-items:start;
  margin-top:17px;padding:18px 20px;border-radius:var(--r-l);background:var(--nuit);
}
.fin-essai .pastille{grid-row:1;width:38px;height:38px;border-radius:50%}
.fin-essai h3{grid-column:2;grid-row:1;font-size:14.5px;line-height:1.4;color:#fff}
.fin-essai .trait-gauche{grid-column:2;width:46px;height:2px;margin:11px 0 9px}
.fin-essai p{grid-column:2;margin:0;font-size:13px;line-height:1.5;color:rgba(255,255,255,.74)}

@media (max-width:980px){
  .inscription .conteneur{grid-template-columns:1fr;gap:42px}
  .inscription .chapo{max-width:none}
}
@media (max-width:640px){
  .entete-compte .conteneur{min-height:74px}
  .entete-compte .marque img{height:39px}
  .sceau{font-size:13px}
  .inscription{padding:34px 0 48px}
  .paire{grid-template-columns:1fr;gap:18px}
  .rassurances{grid-template-columns:1fr;gap:12px}
  .inscription-atouts{padding:20px 16px}
  .atouts-entete{grid-template-columns:40px 1fr;gap:13px}
  .pastille{width:46px;height:46px}
  .inscription-atouts .pastille{width:40px;height:40px}
  .liste-avantages{padding:0 13px}
  .liste-avantages li{grid-template-columns:32px 1fr;gap:11px}
  .liste-avantages .pastille{width:32px;height:32px}
  .fin-essai{grid-template-columns:36px 1fr;gap:0 12px;padding:17px}
  .fin-essai .pastille{width:36px;height:36px}
  .bulle-texte{width:200px}
}

/* ---------------- Planche des icônes (référence interne) ---------------- */
.planche{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:14px;margin-bottom:8px}
.planche li{display:grid;justify-items:center;gap:9px;text-align:center}
.planche-cadre{
  display:grid;place-items:center;width:100%;aspect-ratio:1/1;
  border:1px solid var(--bord);border-radius:var(--r-m);background:var(--surface);
  font-size:30px;color:var(--nuit);
}
.planche code,.cadre-code code{font-size:11.5px;color:var(--texte-doux);word-break:break-all}

.planche-tailles{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px;margin-bottom:10px}
.serie{
  display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;
  padding:18px;border:1px solid var(--bord);border-radius:var(--r-m);color:var(--nuit);
}
.serie code{width:100%;margin-top:4px}

.planche-regimes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin-bottom:8px}
.regime h3{margin:14px 0 6px;font-size:16px}
.regime p{font-size:14px}
.regime-fond{display:flex;justify-content:space-around;align-items:center;padding:22px 16px;border-radius:var(--r-m);font-size:28px}
.regime-clair{background:var(--surface);border:1px solid var(--bord);color:var(--nuit)}
.regime-rose{background:var(--rose-clair);color:var(--rose);--ico-accent:currentColor}
.regime-sombre{background:var(--nuit);color:#fff;--ico-accent:currentColor}

.cadre-code{
  padding:14px 18px;margin:0 0 18px;border:1px solid var(--bord);
  border-radius:var(--r-m);background:#FAFBFC;
}
.cadre-code code{font-size:13.5px;color:var(--nuit)}

/* ---------------- Carte de connexion ---------------- */
.carte-compte{
  max-width:480px;margin:0 auto;padding:38px 36px;
  background:var(--surface);border:1px solid var(--bord);border-radius:var(--r-l);
  box-shadow:var(--ombre-douce);
}
.carte-compte h1{font-size:30px}
.carte-compte .chapo{margin-top:12px;font-size:15.5px}
.carte-compte .formulaire{margin-top:28px}
.carte-compte .message{margin:24px 0 0}
.carte-compte .deja{margin-top:24px;text-align:center;font-size:14.5px}

/* L'attente de la confirmation, faite ailleurs (document 47, C3). La
   pastille bat doucement pour dire que la page guette - un point fixe se
   lirait comme une puce, et rien ne distinguerait plus l'écran vivant de
   l'écran figé. Elle s'immobilise pour qui demande moins d'animation. */
.attente-confirmation{
  display:flex;align-items:center;gap:10px;
  margin-top:26px;padding:14px 16px;
  background:var(--rose-clair);border:1px solid var(--rose-pale);border-radius:var(--r-m);
  font-size:14px;color:var(--texte);
}
.attente-confirmation::before{
  content:"";flex:0 0 auto;width:9px;height:9px;border-radius:50%;
  background:var(--rose);animation:attente-battement 1.6s ease-in-out infinite;
}
@keyframes attente-battement{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){
  .attente-confirmation::before{animation:none}
}
.attente-confirmation a{color:var(--rose);font-weight:700}

@media (max-width:640px){
  .carte-compte{padding:28px 22px}
  .carte-compte h1{font-size:26px}
}

/* ============================================================
   Fin d'essai et souscription
   ============================================================ */

.fin-essai-page{padding:46px 0 70px}
.fin-essai-haut{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;margin-bottom:44px}
.fin-essai-page h1{font-size:clamp(28px,3.4vw,40px)}
.fin-essai-page h1 .accent{color:var(--rose)}
.fin-essai-page .chapo{margin-top:16px;max-width:46ch;font-size:16px}

.carte-echeance{
  display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:center;
  margin-top:30px;padding:20px 24px;
  background:var(--rose-clair);border:1px solid var(--rose-pale);border-radius:var(--r-m);
}
.carte-echeance p{margin:0;font-size:14.5px}
.carte-echeance .echeance{margin-top:3px;font-size:17px;font-weight:800;color:var(--rose)}

.carte-perte{
  padding:30px;background:var(--surface);border:1px solid var(--bord);
  border-radius:var(--r-l);
}
.carte-perte-entete{display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:center}
.carte-perte-entete h2{font-size:19px;line-height:1.35}
.liste-perte{display:grid;gap:12px;margin:24px 0 26px}
.liste-perte li{display:grid;grid-template-columns:20px 1fr;gap:13px;align-items:start;font-size:14.5px}
.liste-perte .ico{width:20px;height:20px;color:var(--rose);margin-top:2px}
.carte-garde{
  display:grid;grid-template-columns:46px 1fr;gap:16px;align-items:start;
  padding:18px 20px;background:var(--rose-clair);border-radius:var(--r-m);
}
.carte-garde .pastille{width:46px;height:46px}
.carte-garde h3{font-size:15px;margin-bottom:5px}
.carte-garde p{margin:0;font-size:13.5px;line-height:1.5}

/* ---------------- L'avis ---------------- */
.bloc-avis{
  display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;
  padding:32px;margin-bottom:56px;
  background:var(--rose-clair);border-radius:var(--r-xl);
  border:1px solid var(--bord);
}
.avis-gauche{display:grid;align-content:start;gap:24px}
.avis-propos{display:grid;grid-template-columns:56px 1fr;gap:20px;align-items:start}
.avis-propos h2{font-size:21px;margin-bottom:10px}
.avis-propos p{margin:0;font-size:14.5px;line-height:1.55}
.avis-notes{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.avis-note{
  display:grid;justify-items:center;gap:8px;padding:14px 6px;cursor:pointer;
  background:var(--surface);border:1px solid var(--bord);border-radius:var(--r-m);
  font-size:12.5px;font-weight:600;color:var(--nuit);text-align:center;
}
.avis-note input{position:absolute;opacity:0;width:0;height:0}
.avis-note .frimousse{font-size:26px;line-height:1}
.avis-note:hover{border-color:var(--rose-pale)}
.avis-note:has(input:checked){border-color:var(--rose);box-shadow:var(--anneau)}
.avis-mot label{display:block;font-size:14.5px;font-weight:700;color:var(--nuit)}
.avis-mot .aide{margin:4px 0 12px}
.avis-mot textarea{
  width:100%;min-height:104px;padding:13px 15px;font:inherit;font-size:14.5px;
  color:var(--nuit);background:var(--surface);border:1px solid var(--bord);border-radius:var(--r-m);
  outline:0;resize:vertical;line-height:1.5;
}
.avis-mot textarea:focus{border-color:var(--rose);box-shadow:var(--anneau)}
.avis-mot .bouton{margin-top:14px}
.avis-merci{margin-top:12px;text-align:center;font-size:13px;color:var(--texte-doux)}

/* ---------------- Les offres ---------------- */
.fin-essai-page .section-titre{margin-bottom:34px}
.fin-essai-page .section-titre h2{font-size:clamp(24px,3vw,31px)}
.fin-essai-page .section-titre .accent{color:var(--rose)}
.offres{display:grid;grid-template-columns:repeat(2,minmax(0,468px));gap:30px;justify-content:center;align-items:start}
.offre{position:relative;padding:30px;background:var(--surface);border:1px solid var(--bord);border-radius:var(--r-l)}
.offre.vedette{border:2px solid var(--rose);box-shadow:var(--ombre)}
.offre .badge{top:-14px;left:auto;right:22px;transform:none}
.offre-entete{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:center;margin-bottom:22px}
.offre-entete h3{font-size:17px;letter-spacing:.03em}
.offre-entete p{margin:3px 0 0;font-size:13.5px;color:var(--texte-doux)}
.offre-prix{font-size:32px;font-weight:800;color:var(--rose);letter-spacing:-.02em}
.offre-prix .devise{font-size:26px}
.offre-prix .taxe{font-size:15px;font-weight:700;color:var(--nuit)}
.offre-prix .periode{font-size:16px;font-weight:600;color:var(--nuit)}
.offre-ttc{margin-top:4px;font-size:14px;color:var(--texte)}
.offre-traits{display:grid;gap:10px;margin:22px 0 26px;padding-top:20px;border-top:1px solid var(--bord)}
.offre-traits li{display:grid;grid-template-columns:18px 1fr;gap:11px;align-items:start;font-size:14px}
.offre-traits .ico{width:18px;height:18px;color:var(--rose);margin-top:2px}

.offres-aide{margin:30px 0 0;text-align:center;font-size:14.5px}
.offres-aide a{color:var(--rose);font-weight:700}

.rassurances-large{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
  margin-top:38px;padding:24px 28px;background:var(--rose-clair);border-radius:var(--r-l);
  border:1px solid var(--bord);
}
.rassurances-large li{display:grid;grid-template-columns:42px 1fr;gap:14px;align-items:center}
.rassurances-large .pastille{width:42px;height:42px;background:var(--surface)}
.rassurances-large .pastille .ico{width:20px;height:20px}
.rassurances-large h3{font-size:14px;margin-bottom:2px}
.rassurances-large p{margin:0;font-size:12.5px;color:var(--texte-doux)}

@media (max-width:980px){
  .fin-essai-haut,.bloc-avis{grid-template-columns:1fr;gap:32px}
  .offres{grid-template-columns:minmax(0,520px)}
  .rassurances-large{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .fin-essai-page{padding:32px 0 52px}
  .carte-perte,.bloc-avis,.offre{padding:22px}
  .avis-notes{grid-template-columns:1fr 1fr}
  .rassurances-large{grid-template-columns:1fr;padding:20px}
  .offre .badge{right:auto;left:50%;transform:translateX(-50%)}
}

/* ---------------- Souscription ---------------- */
.souscription{padding:34px 0 60px}
.etapes-fil{display:flex;align-items:center;gap:0;margin:0 0 34px}
.etapes-fil li{
  display:flex;align-items:center;gap:11px;
  font-size:14.5px;font-weight:700;color:var(--texte-doux);white-space:nowrap;
}
.etapes-fil li:not(:last-child)::after{
  content:'';flex:1;height:1px;min-width:40px;margin:0 18px;background:var(--bord);
}
.etapes-fil li:not(:last-child){flex:1}
.etape-pastille{
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--surface);border:1px solid var(--bord);color:var(--texte-doux);
  font-size:14px;font-weight:700;flex:none;
}
.etapes-fil .active{color:var(--rose)}
.etapes-fil .active .etape-pastille{background:var(--rose);border-color:var(--rose);color:#fff}
.etapes-fil .faite{color:var(--nuit)}
.etapes-fil .faite .etape-pastille{background:var(--rose-clair);border-color:var(--rose-pale);color:var(--rose)}
.etapes-fil .etape-pastille .ico{width:16px;height:16px;--ico-accent:currentColor}

.souscription-haut{display:grid;grid-template-columns:1fr auto;gap:36px;align-items:start;margin-bottom:26px}
.souscription h1{font-size:clamp(26px,3.2vw,36px)}
.souscription .chapo{margin-top:12px;max-width:52ch;font-size:16px}
.carte-securite{
  display:grid;grid-template-columns:44px 1fr;gap:15px;align-items:center;
  max-width:330px;padding:18px 22px;
  background:var(--rose-clair);border-radius:var(--r-m);
  border:1px solid var(--bord);
}
.carte-securite .pastille{width:44px;height:44px;background:var(--surface)}
.carte-securite h3{font-size:14.5px;margin-bottom:3px}
.carte-securite p{margin:0;font-size:13px;line-height:1.45;color:var(--texte)}

.bandeau-offre{
  display:grid;grid-template-columns:60px 1fr auto;gap:20px;align-items:center;
  padding:22px 28px;margin-bottom:34px;border-radius:var(--r-l);
  background:var(--rose-clair);border:1px solid var(--rose-pale);
}
.bandeau-offre .pastille{width:60px;height:60px;background:var(--surface)}
.bandeau-offre .pastille .ico{width:28px;height:28px}
.bandeau-offre-nom h2{font-size:21px}
.bandeau-offre-nom p{margin:3px 0 0;font-size:14px;color:var(--texte-doux)}
.bandeau-offre-prix{text-align:right}
.mention-vedette{
  display:block;margin-bottom:5px;color:var(--rose);
  font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
}
.bandeau-offre-prix .offre-prix{font-size:30px}

.souscription-corps{display:grid;grid-template-columns:1fr 330px;gap:34px;align-items:start}
.souscription-choix{min-width:0}
.titre-etape{font-size:20px;margin:0 0 18px}
.titre-etape:not(:first-child){margin-top:34px}

.cartes-duree{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cartes-moyen{display:grid;gap:16px}
.carte-choix{
  position:relative;display:grid;grid-template-columns:52px 1fr;gap:18px;
  padding:22px 52px 22px 22px;cursor:pointer;
  background:var(--surface);border:1px solid var(--bord);border-radius:var(--r-l);
}
.carte-choix input{position:absolute;opacity:0;width:0;height:0}
.carte-choix:hover{border-color:var(--rose-pale)}
.carte-choix:has(input:checked){border-color:var(--rose);box-shadow:var(--anneau)}
.carte-choix .coche{
  position:absolute;top:20px;right:20px;display:grid;place-items:center;
  width:24px;height:24px;border-radius:50%;border:1.5px solid var(--bord);background:var(--surface);
}
.carte-choix .coche .ico{width:0;height:0}
.carte-choix:has(input:checked) .coche{background:var(--rose);border-color:var(--rose);color:#fff;--ico-accent:currentColor}
.carte-choix:has(input:checked) .coche .ico{width:15px;height:15px}
.carte-choix-corps{display:block;min-width:0}
.carte-choix-nom{display:block;font-size:18px;font-weight:800;color:var(--nuit)}
.carte-choix-mention{display:block;margin-top:3px;font-size:13.5px;font-weight:700;color:var(--rose)}
.carte-choix-detail{display:block;margin-top:6px;font-size:13.5px;color:var(--texte)}
.carte-choix .offre-prix{display:block;margin-top:14px;font-size:26px}
.carte-choix .offre-ttc{display:block;font-size:13.5px;color:var(--texte)}
.economie{
  display:inline-block;margin-top:12px;padding:6px 14px;border-radius:999px;
  background:var(--rose-clair);color:var(--rose);font-size:12.5px;font-weight:700;
}
.etiquette{
  display:inline-block;margin-left:9px;padding:3px 9px;border-radius:999px;vertical-align:2px;
  background:var(--rose);color:#fff;font-size:10px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
}
.points{display:grid;gap:7px;margin-top:12px}
.points>span{display:grid;grid-template-columns:16px 1fr;gap:10px;align-items:start;font-size:13.5px}
.points .ico{width:16px;height:16px;color:var(--rose);margin-top:2px}

.coordonnees{
  display:block;margin-top:16px;padding:16px 18px;
  background:var(--papier,#FAFBFC);border:1px solid var(--bord);border-radius:var(--r-m);
}
.coordonnees-titre{display:block;margin-bottom:12px;font-size:13px;font-weight:700;color:var(--nuit)}
.coordonnees-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 20px}
.coordonnees-grille>span{display:block;font-size:12.5px;color:var(--nuit)}
.coordonnees-grille b{display:block;font-weight:400;font-size:11.5px;color:var(--texte-doux)}
.coordonnees-note{display:block;margin-top:12px;font-size:12.5px;color:var(--rose);font-weight:600}

.note-information{
  display:grid;grid-template-columns:20px 1fr;gap:13px;align-items:start;
  margin:18px 0 0;padding:15px 18px;border-radius:var(--r-m);
  background:#F4F7FB;font-size:13.5px;line-height:1.5;
}
.note-information .ico{width:20px;height:20px;color:#5B7BA8;--ico-accent:currentColor;margin-top:1px}
.note-information.discrete{background:var(--papier,#FAFBFC);margin-bottom:18px}
.note-information em{color:var(--rose);font-style:normal;font-weight:600}

.souscription .case{margin:26px 0 0}
.souscription-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:26px}
.souscription-actions .bouton{position:relative;padding:16px 62px 16px 30px;font-size:16.5px}
.lien-retour{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;color:var(--rose)}
/* Plus de rotation : « fleche-gauche » pointe d'elle-même. Une icône
   retournée par « transform » se décale de son centre optique dès qu'elle
   porte une hampe, et le glyphe cessait d'être aligné sur son intitulé. */
.lien-retour .ico{width:16px;height:16px}
.mention-sure{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--texte-doux)}
.mention-sure .ico{width:17px;height:17px;--ico-accent:currentColor}

/* Le récapitulatif */
.recap{position:sticky;top:104px;display:grid;gap:18px}
.recap-carte{padding:26px 24px;background:var(--surface);border:1px solid var(--bord);border-radius:var(--r-l)}
.recap-carte h2{font-size:18px;margin-bottom:18px;line-height:1.3}
.recap-lignes>div,.recap-compte>div{padding:11px 0}
.recap-lignes{border-bottom:1px solid var(--bord);padding-bottom:6px;margin-bottom:8px}
.recap-lignes dt,.recap-compte dt{font-size:13px;color:var(--texte-doux)}
.recap-lignes dd{margin:3px 0 0;font-size:14.5px}
.recap-lignes .fort{color:var(--rose);font-weight:700}
.recap-compte>div{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.recap-compte dd{margin:0;font-size:14.5px;font-weight:600;color:var(--nuit)}
.recap-total{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  margin:14px 0 0;padding-top:16px;border-top:1px solid var(--bord);
}
.recap-total span{font-size:14.5px;font-weight:700;color:var(--nuit)}
.recap-total strong{font-size:26px;font-weight:800;color:var(--rose);letter-spacing:-.02em}
.recap-total .taxe{font-size:14px;color:var(--nuit)}
.recap-garanties{display:grid;gap:16px;padding:22px 24px;background:var(--surface);border:1px solid var(--bord);border-radius:var(--r-l)}
.recap-garanties li{display:grid;grid-template-columns:38px 1fr;gap:14px;align-items:center}
.recap-garanties .pastille{width:38px;height:38px}
.recap-garanties .pastille .ico{width:18px;height:18px}
.recap-garanties h3{font-size:13.5px;margin-bottom:2px}
.recap-garanties h3 span{font-weight:400;color:var(--texte-doux)}
.recap-garanties p{margin:0;font-size:12.5px;color:var(--texte-doux)}
.recap-savoir{
  display:grid;grid-template-columns:42px 1fr;gap:15px;align-items:start;
  padding:22px 24px;background:var(--rose-clair);border-radius:var(--r-l);
}
.recap-savoir .pastille{width:42px;height:42px;background:var(--surface)}
.recap-savoir h3{font-size:14.5px;margin-bottom:6px}
.recap-savoir p{margin:0;font-size:13px;line-height:1.5}

/* Étapes 2 et 3 */
.recap-large{max-width:660px;margin-top:26px}
.recap-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:24px}

.souscription .offres-aide{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:38px}
.souscription .offres-aide .ico{width:19px;height:19px;color:var(--rose)}

@media (max-width:1020px){
  .souscription-corps{grid-template-columns:1fr}
  .recap{position:static}
}
@media (max-width:760px){
  .souscription-haut{grid-template-columns:1fr}
  .carte-securite{max-width:none}
  .bandeau-offre{grid-template-columns:52px 1fr;text-align:left}
  .bandeau-offre .pastille{width:52px;height:52px}
  .bandeau-offre-prix{grid-column:1/-1;text-align:left}
  .cartes-duree{grid-template-columns:1fr}
  .coordonnees-grille{grid-template-columns:1fr 1fr}
  .etapes-fil li span:not(.etape-pastille){display:none}
  .etapes-fil .active span:not(.etape-pastille){display:inline}
}

/* ---------------- Souscription : étapes 2 et 3 ---------------- */
.carte-revue{
  padding:24px 26px;margin-bottom:20px;
  background:var(--surface);border:1px solid var(--bord);border-radius:var(--r-l);
}
.carte-revue-entete{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-bottom:16px;margin-bottom:4px;border-bottom:1px solid var(--bord);
}
.carte-revue-entete h2{display:flex;align-items:center;gap:11px;font-size:17px}
.carte-revue-entete .ico{width:20px;height:20px;color:var(--rose)}
.lien-modifier{font-size:13.5px;font-weight:700;color:var(--rose)}
.lien-modifier:hover{text-decoration:underline}

.revue-lignes>div{
  display:grid;grid-template-columns:190px 1fr;gap:20px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--filet-clair,#F3F4F8);
}
.revue-lignes>div:last-child{border-bottom:0;padding-bottom:0}
.revue-lignes dt{font-size:13.5px;color:var(--texte-doux)}
.revue-lignes dd{margin:0;font-size:15px;color:var(--nuit)}
.revue-lignes .discret{display:block;margin-top:3px;font-size:13px;font-weight:400;color:var(--texte-doux)}

.revue-identite{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;margin-top:6px}
.revue-identite>div{padding:12px 0;border-bottom:1px solid var(--filet-clair,#F3F4F8)}
.revue-identite dt{margin-bottom:3px;font-size:11.5px;font-weight:700;
                   letter-spacing:.05em;text-transform:uppercase;color:var(--texte-doux)}
.revue-identite dd{margin:0;font-size:14.5px;font-weight:600;color:var(--nuit)}

.coordonnees-seule{margin-top:16px}

/* Confirmation */
.confirmation{max-width:720px;margin:14px auto 0}
.confirmation .pastille{width:66px;height:66px;margin:0 auto 22px}
.confirmation .pastille .ico{width:30px;height:30px}
.confirmation h1,.confirmation>.chapo{text-align:center}
.confirmation>.chapo{margin:14px auto 0;max-width:52ch}
.confirmation .titre-etape{margin-top:38px}

.reference-commande{
  margin:30px 0 0;padding:22px 26px;text-align:center;
  background:var(--rose-clair);border:1px solid var(--rose-pale);border-radius:var(--r-l);
}
.reference-commande span{
  display:block;color:var(--texte-doux);
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.reference-commande strong{
  display:block;margin:8px 0 6px;font-size:26px;font-weight:800;
  color:var(--rose);letter-spacing:.02em;
}
.reference-commande p{margin:0;font-size:13px;color:var(--texte)}

.jalons{display:grid;gap:20px;margin:0 0 8px}
.jalons li{display:grid;grid-template-columns:36px 1fr;gap:18px;align-items:start}
.jalon-num{
  display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:var(--rose);color:#fff;font-size:15px;font-weight:700;
}
.jalons h3{font-size:16px;margin-bottom:4px}
.jalons p{margin:0;font-size:14px;line-height:1.5;color:var(--texte)}

.confirmation-recap{margin-top:32px}
.confirmation-recap .recap-carte{background:var(--papier,#FAFBFC)}
.confirmation-mail{
  display:flex;align-items:center;justify-content:center;gap:11px;
  margin-top:26px;font-size:14px;color:var(--texte);
}
.confirmation-mail .ico{width:19px;height:19px;color:var(--rose);flex:none}
.confirmation-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:30px}

@media (max-width:640px){
  .revue-lignes>div,.revue-identite{grid-template-columns:1fr;gap:4px}
  .revue-lignes>div{gap:2px}
  .carte-revue{padding:20px}
  .reference-commande strong{font-size:21px}
}

/* ---------------- Page des tarifs ---------------- */
.tarifs-page{padding-bottom:64px}
.offre-annuel{
  display:grid;grid-template-columns:18px 1fr;gap:11px;align-items:start;
  margin-top:14px;padding-top:14px;border-top:1px dashed var(--bord);
  font-size:13.5px;color:var(--texte);
}
.offre-annuel .ico{width:18px;height:18px;color:var(--rose);margin-top:2px}
.offre-annuel strong{color:var(--nuit)}
.offre-essai{margin-top:12px;text-align:center;font-size:12.5px;color:var(--texte-doux)}
.tarifs-fiscalite{margin-top:26px;text-align:center;font-size:13.5px;color:var(--texte-doux)}
.tarifs-questions{padding-top:0}
.questions{display:grid;grid-template-columns:1fr 1fr;gap:32px 44px}
.questions h3{font-size:17px;margin-bottom:9px}
.questions p{margin:0;font-size:14.5px;line-height:1.6}
.questions a{color:var(--rose);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.tarifs-appel{margin-top:44px;text-align:center;font-size:15px}
.tarifs-appel a{color:var(--rose);font-weight:700}
@media (max-width:760px){
  .questions{grid-template-columns:1fr;gap:26px}
}

/* ---------------- Menu « Mon compte » ---------------- */
.compte{position:relative}
.compte summary{
  display:flex;align-items:center;gap:10px;padding:5px 10px 5px 5px;
  border:1px solid var(--bord);border-radius:999px;background:var(--surface);
  cursor:pointer;list-style:none;user-select:none;
}
.compte summary::-webkit-details-marker{display:none}
.compte summary:hover{border-color:var(--rose-pale);background:var(--rose-clair)}
.compte[open] summary{border-color:var(--rose-pale);background:var(--rose-clair)}
.compte-jeton{
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--nuit);color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em;
}
.compte-nom{font-size:14px;font-weight:600;color:var(--nuit)}
/* La porte du guide (document 46) : tant que le démarrage est dû,
   « Mon compte » ne déplie rien - il y mène. La même pastille que le
   menu qu'il remplace, sans chevron : rien ne s'ouvre ici. */
.compte-porte{
  display:flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;
  border:1px solid var(--bord);border-radius:999px;background:var(--surface);
  text-decoration:none;
}
.compte-porte:hover{border-color:var(--rose-pale);background:var(--rose-clair)}
.compte summary .ico{width:15px;height:15px;color:var(--texte-doux);--ico-accent:currentColor;transition:transform .18s}
.compte[open] summary .ico{transform:rotate(180deg)}

.compte-panneau{
  position:absolute;top:calc(100% + 10px);right:0;z-index:70;width:272px;
  background:var(--surface);border:1px solid var(--bord);
  border-radius:var(--r-m);box-shadow:var(--ombre);overflow:hidden;
}
.compte-tete{padding:16px 18px 14px;border-bottom:1px solid var(--bord)}
.compte-personne{font-size:14.5px;font-weight:700;color:var(--nuit)}
.compte-courriel{margin-top:2px;font-size:12.5px;color:var(--texte-doux);word-break:break-all}
.compte-societe{margin-top:6px;font-size:12.5px;font-weight:600;color:var(--texte)}

.compte-etat{padding:13px 18px;background:var(--rose-clair);border-bottom:1px solid var(--bord)}
.compte-formule{display:block;font-size:13.5px;font-weight:700;color:var(--rose)}
.compte-detail{display:block;margin-top:2px;font-size:12px;color:var(--texte)}
.compte-etat.alerte{background:#FFF4F6}
.compte-etat.alerte .compte-formule{color:var(--rose-sombre)}

.compte-reprise{
  display:flex;align-items:center;gap:10px;padding:12px 18px;
  background:var(--rose);color:#fff;font-size:13.5px;font-weight:700;
  --ico-accent:currentColor;
}
.compte-reprise:hover{background:var(--rose-sombre)}
.compte-reprise .ico{width:16px;height:16px}

.compte-liens{display:grid;padding:6px}
.compte-liens a{
  display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--r-s);
  font-size:14px;font-weight:500;color:var(--texte);
}
.compte-liens a:hover{background:var(--bord-clair);color:var(--nuit)}
.compte-liens .ico{width:17px;height:17px;color:var(--texte-doux)}
.compte-liens a:hover .ico{color:var(--rose)}

.compte-sortie{
  display:block;padding:12px 18px;border-top:1px solid var(--bord);
  font-size:13.5px;font-weight:600;color:var(--texte);
}
.compte-sortie:hover{background:var(--bord-clair);color:var(--rose)}

/* Replié : le menu se déroule dans le panneau, il ne flotte plus. Le seuil
   est celui du bandeau (1080 px) et non un seuil à lui : entre les deux,
   « Mon compte » s'ouvrait en flottant hors d'un panneau qui, lui, défile. */
@media (max-width:1080px){
  .compte{width:100%}
  .compte summary{justify-content:flex-start;width:100%;padding:10px 12px;border-radius:var(--r-s)}
  .compte-nom{margin-right:auto}
  .compte-panneau{
    position:static;width:auto;margin-top:10px;box-shadow:none;
  }
}

/* ============================================================
   Espace abonné - un back-office, pas une page de site
   ============================================================ */

.page-bord{background:var(--bord-clair);display:block;min-height:100vh;min-height:100dvh}
.bo{display:grid;grid-template-columns:244px 1fr;min-height:100vh;min-height:100dvh}
.bo>.bascule{display:none}

/* ---------------- Le panneau ---------------- */
.bo-panneau{
  position:sticky;top:0;align-self:start;
  display:flex;flex-direction:column;
  height:100vh;height:100dvh;
  background:var(--surface);border-right:1px solid var(--bord);
}
.bo-tete{
  display:flex;align-items:center;justify-content:space-between;
  height:66px;padding:0 20px;flex:none;
  border-bottom:1px solid var(--bord);
}
.bo-marque img{height:32px;width:auto}

/* La navigation ne s'étire pas : elle se pose en haut et laisse le vide
   au-dessous. Sans align-content, la grille répartit la hauteur libre
   entre ses lignes et écarte les entrées de plusieurs centimètres. */
.bo-nav{
  flex:1;min-height:0;overflow-y:auto;
  display:grid;align-content:start;gap:1px;
  padding:14px 12px;
}
.bo-groupe{
  margin:14px 0 6px;padding:0 12px;
  color:var(--texte-doux);font-size:10.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;
}
.bo-nav .bo-groupe:first-child{margin-top:0}
.bo-nav a{
  position:relative;display:flex;align-items:center;gap:11px;
  padding:6.5px 12px;border-radius:var(--r-s);
  font-size:14px;font-weight:500;color:var(--texte);
}
.bo-nav .ico{width:17px;height:17px;color:var(--texte-doux);flex:none}
.bo-nav a:hover{background:var(--bord-clair);color:var(--nuit)}
.bo-nav a:hover .ico{color:var(--nuit)}

/* L'entrée active se signale par un fond léger et un repère au bord, non
   par un pavé de couleur : le panneau n'est pas là pour crier. */
.bo-nav a.actif{background:var(--rose-clair);color:var(--rose);font-weight:600}
.bo-nav a.actif .ico{color:var(--rose)}
.bo-nav a.actif::before{
  content:'';position:absolute;left:-12px;top:6px;bottom:6px;
  width:3px;border-radius:0 3px 3px 0;background:var(--rose);
}

/* ---------------- Le bas du panneau ---------------- */
.bo-bas{flex:none;padding:12px;border-top:1px solid var(--bord);display:grid;gap:8px}
.bo-etat{
  padding:11px 13px;border-radius:var(--r-s);
  background:var(--rose-clair);
}
.bo-formule{display:block;font-size:12.5px;font-weight:700;color:var(--rose)}
.bo-detail{display:block;margin-top:2px;font-size:11.5px;color:var(--texte);line-height:1.4}
.bo-etat.alerte{background:#FFF1F4}
/* Le bouton du bas du panneau est plus ramassé que le « bouton-petit »
   ordinaire : c'est un rappel dans une colonne étroite, non l'appel à
   l'action d'une page. Cinq pixels de moins, sans toucher aux autres. */
.bo-etat .bouton{margin-top:10px;padding-top:2.5px;padding-bottom:2.5px}

/* Le bandeau d'essai, en tête de chaque écran de l'espace abonné
   (document 18). Il porte une information et un geste, jamais plus. */
.bandeau-essai{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:var(--rose-clair);border:1px solid var(--rose-pale);
  border-radius:var(--r-m);padding:16px 20px;margin:0 0 24px;
}
.bandeau-essai strong{display:block;color:var(--nuit);font-size:14.5px}
.bandeau-essai p{margin:4px 0 0;font-size:13.5px;color:var(--texte);line-height:1.5;max-width:70ch}
.bandeau-essai form{margin:0}
.bandeau-essai .bouton{flex:0 0 auto}

.bo-compte{position:relative}
.bo-compte summary{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-s);
  cursor:pointer;list-style:none;
}
.bo-compte summary::-webkit-details-marker{display:none}
.bo-compte summary:hover,.bo-compte[open] summary{background:var(--bord-clair)}
.bo-compte .compte-jeton{width:28px;height:28px;font-size:11px}
.bo-compte-nom{
  flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--nuit);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bo-compte summary .ico{
  width:13px;height:13px;color:var(--texte-doux);
  --ico-accent:currentColor;transition:transform .18s;
}
.bo-compte[open] summary .ico{transform:rotate(180deg)}
.bo-compte-panneau{
  position:absolute;bottom:calc(100% + 8px);left:0;right:0;z-index:40;
  padding:12px 6px 6px;background:var(--surface);
  border:1px solid var(--bord);border-radius:var(--r-m);box-shadow:var(--ombre);
}
.bo-compte-panneau .compte-courriel,
.bo-compte-panneau .compte-societe{padding:0 10px;font-size:12px}
.bo-compte-panneau .compte-societe{margin-bottom:8px}
.bo-compte-panneau a{
  display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:var(--r-s);
  font-size:13px;font-weight:500;color:var(--texte);
}
.bo-compte-panneau a:hover{background:var(--bord-clair);color:var(--nuit)}
.bo-compte-panneau .ico{width:15px;height:15px;color:var(--texte-doux)}

/* ---------------- Le contenu ---------------- */
.bo-corps{min-width:0;padding:26px 30px 44px}
.bo-page,.bo-corps>section,.bo-corps>.conteneur{
  max-width:1080px;padding:26px 30px;background:var(--surface);
  border:1px solid var(--bord);border-radius:var(--r-l);
}
.bo-corps>section{border-top:0}
.bo-corps main section{padding:0;border:0}
.bo-corps h1{font-size:25px}

@media (max-width:900px){
  /* Deux rangées : la barre, puis le contenu qui prend le reste. Sans
     cette consigne, la grille répartit la hauteur libre entre les deux
     et creuse un vide sous la barre. */
  .bo{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .bo-panneau{
    position:sticky;top:0;z-index:50;height:auto;gap:0;padding:12px 0;
    border-right:0;border-bottom:1px solid var(--bord);
  }
  .bo-panneau .bascule-etiquette{display:grid;place-items:center}
  .bo-nav,.bo-bas{display:none}
  .bo>.bascule:checked~.bo-panneau .bo-nav{display:grid;padding-top:12px}
  .bo>.bascule:checked~.bo-panneau .bo-bas{display:grid;padding-top:12px}
  .bo-compte-panneau{position:static;box-shadow:none;margin-top:8px}
  .bo-corps{padding:16px 14px 32px}
  .bo-page,.bo-corps>section,.bo-corps>.conteneur{padding:20px 18px}
}

/* ---------------- Le Signal du jour, dans le back-office ---------------- */
.bo-page .bord-sous{margin-top:6px;font-size:15px;font-weight:600;color:var(--rose)}

/* Un écran du compte dont l'état se résume en un mot - combien de
   périmètres actifs, quelle formule - le pose à droite du titre plutôt
   qu'en dessous : la ligne du titre est la première lue, et c'est là que
   la réponse est attendue. Le marqueur repasse sous le titre dès que la
   largeur ne suffit plus, plutôt que de le comprimer. */
.bord-entete{
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
  gap:12px 24px;
}
.bord-entete>div{min-width:min(100%,260px)}

/* La parution regardée : sa date, son ancienneté, et de quoi remonter le
   fil. Les flèches encadrent la date au lieu d'ouvrir une barre d'outils :
   on change de jour, on ne pilote pas un tableur. */
.bord-parution{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:6px}
.bord-date{font-size:13.5px;color:var(--texte-doux)}
/* « bord-fleche », « bord-age » et « bord-retour » retirés le 25 août 2026,
   avec ce qu'elles habillaient : les flèches de parution, le badge
   d'ancienneté et le retour à la dernière parution. Le sélecteur de dates
   et le titre en toutes lettres font tout cela. Des règles sans élément à
   habiller finissent par être recopiées ailleurs sans qu'on sache d'où
   elles viennent. */

/* « bord-rythme » retirée le 25 août 2026 avec la mention qu'elle
   habillait : le titre porte la date en toutes lettres et le sélecteur
   montre les journées qui existent - la ligne n'expliquait plus rien que
   l'écran ne dise déjà. */

.bord-note{
  margin-top:18px;padding:13px 16px;font-size:13.5px;line-height:1.55;
  background:var(--bord-clair);border-radius:var(--r-s);color:var(--texte);
}
.bord-note a{color:var(--rose);font-weight:600}

.bo-page .onglets{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 4px}
.bo-page .onglet{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 9px 7px 15px;border-radius:999px;background:var(--bord-clair);
  color:var(--texte);font-size:13px;font-weight:600;white-space:nowrap;
}
.bo-page .onglet:hover{background:var(--rose-clair);color:var(--rose)}
.bo-page .onglet.actif{background:var(--rose);color:#fff}

/* Le compteur, en pastille. Entre parenthèses il se fondait dans
   l'intitulé ; détaché, l'œil compare les volumes d'un onglet à l'autre
   sans avoir à lire. « min-width » et non « width » : « 211 » ne doit pas
   déborder d'un cercle taillé pour « 3 ». */
.bo-page .onglet-compte{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 6px;border-radius:999px;
  background:var(--surface,#fff);color:var(--texte-doux);
  font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums;
}
.bo-page .onglet:hover .onglet-compte{color:var(--rose)}
/* Sur l'onglet actif, le fond rose interdit le blanc : la pastille se pose
   en creux plutôt qu'en relief. */
.bo-page .onglet.actif .onglet-compte{
  background:rgba(255,255,255,.22);color:#fff;
}

.bord-amorce{
  display:grid;grid-template-columns:48px 1fr;gap:18px;align-items:start;
  margin-top:24px;padding:22px 24px;
  background:var(--rose-clair);border:1px solid var(--rose-pale);border-radius:var(--r-m);
}
.bord-amorce .pastille{width:48px;height:48px;background:var(--surface)}
.bord-amorce h2{font-size:17px;margin-bottom:7px}
.bord-amorce p{margin:0 0 16px;font-size:14px;line-height:1.55;max-width:62ch}

.bord-tableau{margin-top:20px;overflow-x:auto}
.bo-page table{width:100%;min-width:720px;border-collapse:collapse;font-size:13.5px}
/* Quatre colonnes : la référence de parution a la sienne depuis le
   document 40 - c'est ce qu'un abonné recopie pour retrouver le texte au
   Journal officiel, et elle se cherchait en sous-titre du nom. La date de
   parution, elle, reste retirée : dans une vue d'une seule journée, elle
   portait la même valeur sur toutes les lignes (document 15, décision T5). */
.bo-page col.c1{width:16%}.bo-page col.c2{width:32%}.bo-page col.c3{width:18%}.bo-page col.c4{width:34%}

/* La colonne du témoin de lecture n'existe que si le témoin est allumé :
   les autres se resserrent d'autant, plutôt que de laisser un vide
   là où l'abonné l'a éteint. */
.bo-page col.c5{width:52px}
.bo-page table:has(col.c5) col.c1{width:15%}
.bo-page table:has(col.c5) col.c2{width:31%}
.bo-page table:has(col.c5) col.c3{width:17%}
.bo-page table:has(col.c5) col.c4{width:33%}

/* Une référence par annonce, l'édition et le numéro empilés : la colonne est
   étroite, et chaque numéro se sélectionne d'un double-clic. */
.bo-page td.reference{font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.bord-ref{display:block}
.bord-ref span{display:block}
.bord-ref+.bord-ref{margin-top:8px}

.bo-page th{
  padding:12px 10px;text-align:left;border-bottom:1px solid var(--bord);
  color:var(--texte-doux);font-size:11.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
}
.bo-page td{padding:15px 10px;border-bottom:1px solid var(--bord-clair);vertical-align:top;line-height:1.5}
.bo-page tbody tr:last-child td{border-bottom:0}
.bo-page tbody tr:hover{background:var(--bord-clair)}
/* La nature de l'annonce se lit d'un seul tenant : l'icône devant son
   intitulé, sur la même ligne. Empilée, elle donnait à la colonne deux
   hauteurs de ligne pour un seul renseignement. */
.bo-page td.type{color:var(--nuit);white-space:nowrap}
.bo-page td.type .ico{
  display:inline-block;vertical-align:-3px;
  width:17px;height:17px;margin:0 7px 0 0;color:var(--rose);
}
.bo-page td.nom{font-weight:700;color:var(--nuit)}
.bo-page td.nom a{color:var(--nuit)}
.bo-page td.nom a:hover{color:var(--rose)}
.bo-page td:not(.type):not(.nom){color:var(--texte-doux)}
.bo-page td.limite{color:var(--rose);font-weight:700}

/* Le nombre d'annonces d'une même entreprise ce jour-là. Il ne paraît qu'au
   pluriel : « Création 1 » n'apprendrait rien. */
.bord-compte{
  display:inline-block;margin-left:7px;padding:1px 7px;border-radius:999px;
  background:var(--rose-clair);color:var(--rose);
  font-size:11px;font-weight:800;vertical-align:1px;
}
/* Les faits d'une entreprise s'empilent, un par ligne : mis bout à bout et
   séparés par des points, ils se lisaient comme une seule phrase confuse. */
.bord-fait{display:block}
.bord-fait+.bord-fait{margin-top:4px}
/* Le sous-titre sous le nom. Il ne porte plus que la date de parution, sur
   un intervalle - la référence a sa colonne depuis le document 40. */
/* La ligne qui mène à une fiche. Le curseur et le fond au survol sont tout
   ce qui l'annonce : un tableau dont chaque ligne serait soulignée comme un
   lien deviendrait illisible. */
.bord-cliquable{cursor:pointer}
.bord-cliquable:hover{background:var(--rose-clair)}
.bord-cliquable:focus-visible{
  outline:2px solid var(--rose);outline-offset:-2px;background:var(--rose-clair);
}
.bord-reference{
  display:block;margin-top:3px;
  font-size:12px;font-weight:400;color:var(--texte-doux);
  font-variant-numeric:tabular-nums;
}
/* La date de parution se lit dans le même axe que le reste de la ligne :
   alignée à gauche, comme les trois autres colonnes. Rangée à droite,
   elle ouvrait un vide au milieu de la colonne et son intitulé ne
   tombait plus sur ses valeurs. Elle garde seulement de ne pas se
   couper en deux lignes. */
.bo-page td.fin{white-space:nowrap}
.bo-page .rien{
  margin-top:24px;padding:26px;border:1px dashed var(--bord);
  border-radius:var(--r-m);color:var(--texte-doux);text-align:center;
}
.bord-suite{margin-top:16px;font-size:13.5px;color:var(--texte-doux)}
.bord-suite a{color:var(--rose);font-weight:600}

/* Le corps du relevé pendant qu'il se renouvelle : il s'estompe, il ne
   disparaît pas - une zone qui se vide fait sauter la page. */

/* ---------------- Pavé de filtres ----------------
   Trois écrans du compte s'en servent - la recherche, le relevé du jour,
   le journal. Il vivait dans journal.css, à l'ancienne charte : intitulés
   en capitales espacées de 0,1 em au-dessus de champs de 15,5 px, sur un
   fond de papier. Ici, une carte comme les autres. Les pages publiques
   chargent app.css après cette feuille et gardent leur propre version. */
.filtres{
  display:flex;flex-wrap:wrap;gap:14px 20px;align-items:flex-end;
  margin:18px 0 22px;padding:16px 18px;
  background:var(--surface);border:1px solid var(--bord);border-radius:var(--r-m);
}
.filtres label{
  display:flex;flex-direction:column;gap:5px;
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--texte-doux);
}
.filtres label.large{flex:1 1 260px;min-width:0}
.filtres input[type="search"],
.filtres input[type="text"]{
  width:100%;padding:10px 12px;
  font:inherit;font-size:14px;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--nuit);background:var(--surface);
  border:1px solid var(--bord);border-radius:var(--r-s);
  outline:0;transition:border-color .14s,box-shadow .14s;
}
.filtres input:hover{border-color:#DDE1E9}
.filtres input:focus{border-color:var(--rose);box-shadow:var(--anneau)}
.filtres .champ-saisie{width:100%}
/* Le sélecteur et le calendrier portent déjà leur mise en forme : la règle
   des intitulés ne doit pas déteindre sur eux. */
.filtres .selecteur{min-width:190px}
.filtres .bouton{margin-bottom:0}
@media (max-width:640px){
  .filtres{flex-direction:column;align-items:stretch}
  .filtres .bouton{width:100%}
}

/* ---------------- Mon abonnement ---------------- */
.abo-etat{
  display:grid;grid-template-columns:52px 1fr auto;gap:18px;align-items:center;
  margin-top:22px;padding:20px 22px;
  background:var(--rose-clair);border:1px solid var(--rose-pale);border-radius:var(--r-m);
}
.abo-etat.alerte{background:#FFF1F4}
.abo-etat h2{font-size:18px}
.abo-etat p{margin:3px 0 0;font-size:14px;color:var(--texte)}
.abo-titre{margin:34px 0 12px;font-size:17px}
.abo-traits{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;margin-bottom:6px}
.abo-traits li{display:grid;grid-template-columns:18px 1fr;gap:11px;align-items:start;font-size:14px}
.abo-traits .ico{width:18px;height:18px;color:var(--rose);margin-top:2px}
.abo-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.bo-page .rien{margin-top:0}
/* Un état vide occupe toute la largeur de sa rubrique : la limite de
   lecture posée sur les paragraphes vaut pour du texte suivi, pas pour un
   cadre qui tient lieu de tableau. */
.bo-page .rien{max-width:none}
@media (max-width:760px){
  .abo-etat{grid-template-columns:52px 1fr;gap:14px}
  .abo-etat .bouton{grid-column:1/-1}
  .abo-traits{grid-template-columns:1fr}
}

/* ============================================================
   Squelettes de chargement
   ------------------------------------------------------------
   Pendant qu'un écran se charge, on ne montre ni page vide ni
   contenu périmé : on montre la forme exacte de ce qui arrive.
   Chaque vue a son modèle - le relevé n'a pas la silhouette
   d'un formulaire.

   Le miroitement n'est pas un gris qui passe : c'est un voile
   rose, celui de la charte, qui traverse une trame bleutée.
   ============================================================ */

/* Le reflet n'est pas une barre qui glisse : c'est une lueur.

   Trois couches superposées, et c'est ce qui fait la différence -
   une lueur blanche en tête, un voile rose qui la suit avec un
   léger retard, et dessous une trame qui respire. Le décalage
   entre les deux premières donne la profondeur : l'oeil lit un
   éclairage qui passe, pas un dégradé qui défile. */

@keyframes miroite{
  0%  {background-position:-130% 0, -165% 0, 0 0}
  100%{background-position: 235% 0,  270% 0, 0 0}
}
@keyframes respire{
  0%,100%{opacity:1}
  50%    {opacity:.88}
}

.os{
  display:block;
  background-color:#E7EAF1;
  background-image:
    radial-gradient(115% 175% at 0% 50%,
      rgba(255,255,255,.98) 0%,
      rgba(255,250,252,.62) 20%,
      rgba(255,255,255,0)   44%),
    radial-gradient(95% 165% at 0% 50%,
      rgba(217,76,106,.20) 0%,
      rgba(217,76,106,.07) 26%,
      rgba(217,76,106,0)   52%),
    linear-gradient(103deg, #E5E9F0 0%, #EBEEF4 48%, #E5E9F0 100%);
  background-size:210% 100%, 210% 100%, 100% 100%;
  background-repeat:no-repeat;
  background-position:-130% 0, -165% 0, 0 0;
  animation:miroite 2.1s cubic-bezier(.42,.04,.32,1) infinite,
            respire 4.2s ease-in-out infinite;
  border-radius:6px;
}
@media (prefers-reduced-motion:reduce){
  .os{animation:none;background-image:none;background-color:#E7EAF1}
}

/* Les formes élémentaires, aux dimensions du vrai contenu.
   Toutes portent des angles arrondis ordinaires : ni pilule, ni
   cercle. Un squelette annonce l'emplacement d'un contenu, il ne
   mime pas sa découpe - et une forme trop ronde attire l'oeil sur
   elle-même au lieu de s'effacer devant ce qui arrive. */
.os-titre  {height:27px;width:44%;border-radius:var(--r-s)}
.os-sous   {height:15px;width:38%}
.os-date   {height:12px;width:24%;margin-top:-4px}
.os-ligne  {height:12px}
.os-ligne.pleine  {width:100%}
.os-ligne.longue  {width:78%}
.os-ligne.moyenne {width:56%}
.os-ligne.courte  {width:32%}
.os-ligne.brève   {width:18%}
.os-pilule {height:33px;border-radius:var(--r-s)}
.os-champ  {height:44px;border-radius:var(--r-s)}
.os-carte  {height:88px;border-radius:var(--r-m)}
.os-pastille{height:48px;width:48px;border-radius:var(--r-m)}
.os-bouton {height:44px;width:172px;border-radius:var(--r-s)}

.squelette{display:grid;gap:12px;animation:apparait .18s ease-out}
/* Quand le titre reste en place et que seul le corps se recharge, le
   squelette commence juste sous lui : il lui faut le même dégagement que
   le sous-titre qu'il remplace, sans quoi les deux se touchent. */
#signal-vue .squelette{margin-top:16px}
@keyframes apparait{from{opacity:0}to{opacity:1}}
.squelette .rangs{display:grid;gap:9px}
.squelette .cote{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.squelette .duo{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px}
.squelette .trio{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px 22px}
/* La mosaïque du tableau de bord : douze colonnes, des cartes de largeurs
   inégales. C'est la silhouette du canevas de widgets (document 36), et le
   squelette n'a rien d'autre à dire de lui - il ignore la disposition de
   l'abonné, et une mosaïque approchante vaut mieux qu'une promesse fausse. */
.squelette-mosaique{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:16px;margin-top:20px;
}
@media (max-width:1080px){
  .squelette-mosaique{grid-template-columns:repeat(6,minmax(0,1fr))}
  .squelette-mosaique .os-carte{grid-column:span 6 !important}
}
.squelette .encadre-os{
  padding:20px 22px;border-radius:var(--r-m);
  background:#FDF7F9;border:1px solid var(--rose-pale);
  display:grid;gap:10px;
}
.squelette .filet{height:1px;background:var(--bord);margin:6px 0}

/* Le tableau : mêmes colonnes que celui qui va le remplacer. */
.squelette-tableau{display:grid;margin-top:20px}
.squelette-tableau .rangee{
  display:grid;gap:18px;align-items:center;
  padding:16px 10px;border-bottom:1px solid var(--bord-clair);
}
.squelette-tableau .rangee:last-child{border-bottom:0}
.squelette-tableau.col4 .rangee{grid-template-columns:17% 33% 33% 17%}
.squelette-tableau.col6 .rangee{grid-template-columns:30% 12% 16% 12% 15% 15%}
.squelette-tableau .entete{border-bottom:1px solid var(--bord);padding-bottom:12px}
.squelette-tableau .entete .os{height:9px}

#signal-vue,.bo-corps{transition:opacity .14s}
#signal-vue[aria-busy],.bo-corps[aria-busy]{opacity:.4;pointer-events:none}

/* L'onglet en cours de chargement : le même reflet que les squelettes,
   posé sur lui. Il est déjà actif - l'écran ne fait pas attendre le
   réseau pour répondre au clic - mais il miroite tant que son contenu
   n'est pas arrivé.

   **Les entrées du panneau ne miroitent pas.** Une ligne de menu qui
   scintille à chaque clic anime la seule partie de l'écran qui, elle, ne
   change pas ; et le corps porte déjà son squelette pendant l'attente. Le
   reflet reste aux onglets, dont c'est le contenu propre qui se recharge. */
@keyframes miroite-entree{
  from{background-position:-130% 0}
  to  {background-position: 230% 0}
}
#signal-vue .onglet.chargement{
  position:relative;overflow:hidden;
}
#signal-vue .onglet.chargement::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(
    100deg,
    rgba(255,255,255,0)   0%,
    rgba(255,255,255,0)   38%,
    rgba(255,255,255,.55) 48%,
    rgba(255,255,255,.85) 52%,
    rgba(255,255,255,.55) 56%,
    rgba(255,255,255,0)   66%,
    rgba(255,255,255,0)   100%
  );
  background-size:230% 100%;
  background-repeat:no-repeat;
  animation:miroite-entree 1.1s cubic-bezier(.42,.04,.32,1) infinite;
}
@media (prefers-reduced-motion:reduce){
  #signal-vue .onglet.chargement::after{animation:none;background-image:none}
}

/* ---------------- Reprise de lecture (document 15, A6) ----------------
   Ce qui a été versé depuis la consultation précédente. La marque emprunte
   Elle porte le nombre de journées manquées, et non une marque par ligne :
   à l'intérieur d'une parution tout est également neuf, et une marque qui
   s'allume sur toutes les lignes ne désigne plus rien. */
.bord-reprise{
  display:grid;grid-template-columns:20px 1fr;gap:11px;align-items:start;
  margin-top:18px;padding:13px 16px;
  background:var(--rose-clair);border:1px solid var(--rose-pale);
  border-radius:var(--r-s);font-size:13.5px;line-height:1.55;
}
.bord-reprise .ico{width:20px;height:20px;color:var(--rose);margin-top:1px}
.bord-reprise strong{color:var(--nuit)}
.bord-reprise a{color:var(--rose);font-weight:600}

/* ============================================================
   Page des fonctionnalités (document 20, décision S3)

   Elle ne réinvente rien : pastille, carte blanche sur liseré, trait rose,
   les mêmes rayons et les deux mêmes ombres. Ce qui lui est propre tient en
   quatre grilles - les fonctions, les réglages, les sources, le comparatif -
   et un seul bloc de couleur, l'appel final.
   ============================================================ */

.entete-actions-page{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:28px}

/* --- Les six fonctions --- */
.fonctions{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.fonction{
  padding:30px 28px;background:var(--surface);
  border:1px solid var(--bord);border-radius:var(--r-l);
  box-shadow:var(--ombre-douce);
}
.fonction .pastille{margin-bottom:20px}
.fonction h3{font-size:19px;margin-bottom:10px}
.fonction>p{font-size:14.5px;line-height:1.6}

/* La liste des traits sert aussi au comparatif : même dessin, même gouttière,
   pour que les deux grilles se lisent comme une seule idée. */
.fonction-traits{display:grid;gap:9px;margin-top:20px;padding-top:18px;border-top:1px solid var(--bord)}
.fonction-traits li{display:grid;grid-template-columns:17px 1fr;gap:10px;align-items:start;font-size:13.5px;line-height:1.45}
.fonction-traits .ico{width:17px;height:17px;color:var(--rose);margin-top:1px}

/* --- Ce que vous réglez --- */
/* Le bandeau reprend « .portail » mais dans l'autre sens : le texte à gauche,
   la carte à droite. Une page entière de blocs image-à-gauche fatigue. */
.portail-inverse{grid-template-columns:1fr 1.05fr}
.chapo-court{margin-top:16px;margin-bottom:24px;font-size:16px;line-height:1.6;color:var(--texte)}
.carte-reglage{
  display:grid;gap:22px;padding:30px 28px;
  background:var(--surface);border:1px solid var(--bord);
  border-radius:var(--r-l);box-shadow:var(--ombre);
}
.reglage-ligne{display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:start}
.reglage-ligne h3{font-size:16px;margin-bottom:5px}
.reglage-ligne p{font-size:14px;line-height:1.55}

/* --- Les sources --- */
.sources{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.source{
  padding:28px 26px;background:var(--surface);
  border:1px solid var(--bord);border-radius:var(--r-l);text-align:center;
}
.source .pastille{margin:0 auto 18px}
.source h3{font-size:17px;margin-bottom:9px}
.source p{font-size:14px;line-height:1.6}
.sources-note{
  display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start;
  max-width:760px;margin:34px auto 0;padding:18px 22px;
  background:var(--rose-clair);border:1px solid var(--rose-pale);
  border-radius:var(--r-m);font-size:14px;line-height:1.6;
}
.sources-note .ico{width:22px;height:22px;color:var(--rose);margin-top:2px}
.sources-note a{color:var(--rose);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* --- Le comparatif des formules --- */
.section-tinte{background:var(--fond-tinte);border-top:1px solid var(--bord);border-bottom:1px solid var(--bord)}
.comparatif{display:grid;grid-template-columns:repeat(2,minmax(0,420px));gap:28px;justify-content:center;align-items:start}
.comparatif-carte{
  position:relative;padding:30px 28px;background:var(--surface);
  border:1px solid var(--bord);border-radius:var(--r-l);
}
.comparatif-carte.vedette{border-color:var(--rose-pale);box-shadow:var(--ombre)}
.comparatif-carte h3{font-size:19px}
.comparatif-carte .offre-entete p{font-size:13.5px;color:var(--texte-doux);line-height:1.45}
.comparatif-carte .fonction-traits{margin-bottom:24px}

/* --- L'appel final --- */
/* Le seul aplat sombre de la page. Il ferme la lecture au lieu de la
   relancer : un bloc de couleur au milieu couperait le fil. */
.appel{background:var(--nuit);color:#fff;padding:70px 0;text-align:center}
.appel h2{color:#fff;font-size:clamp(24px,2.8vw,32px)}
.appel p{margin-top:14px;color:rgba(255,255,255,.72);font-size:16px}
.appel-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:28px}
.bouton-clair{background:var(--rose);color:#fff;border-color:var(--rose)}
.bouton-transparent{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.bouton-transparent:hover{background:rgba(255,255,255,.08);color:#fff}

@media (max-width:980px){
  .fonctions,.sources{grid-template-columns:repeat(2,1fr)}
  .portail-inverse{grid-template-columns:1fr}
  .comparatif{grid-template-columns:minmax(0,460px)}
}
@media (max-width:640px){
  .fonctions,.sources{grid-template-columns:1fr}
  .fonction,.source,.carte-reglage,.comparatif-carte{padding:24px 22px}
  .appel{padding:52px 0}
}

/* ============================================================
   Confirmation de l'adresse (document 20, décision S10)

   Le code à quatre chiffres se lit de loin : il est saisi une fois, souvent
   d'une main, l'autre tenant le téléphone où il vient d'arriver. D'où le
   corps, l'espacement des caractères et la cible large.
   ============================================================ */

.champ-code{
  width:100%;padding:16px 18px;
  font-family:inherit;font-size:30px;font-weight:800;letter-spacing:.4em;
  text-align:center;color:var(--nuit);text-indent:.4em;
  background:var(--bord-clair);border:1px solid var(--bord);border-radius:var(--r-s);
}
.champ-code::placeholder{color:var(--texte-doux);font-weight:600}
.champ-code:focus{outline:0;border-color:var(--rose);box-shadow:var(--anneau);background:var(--surface)}

/* Un bouton qui doit se lire comme un lien : le geste est bien un envoi de
   formulaire - il porte un jeton - mais il n'a pas à en avoir l'air. */
.lien-bouton{
  background:none;border:0;padding:0;font:inherit;font-weight:600;
  color:var(--rose);text-decoration:underline;text-underline-offset:2px;cursor:pointer;
}
.lien-bouton:hover{color:var(--rose-sombre)}
.forme-renvoi{margin-top:-14px;text-align:center}
.formulaire-lien{margin-top:8px}


/* ====================================================================
   La fiche d'une annonce du Journal officiel

   Elle restitue ce que l'annonce déclare, champ par champ, et renvoie au
   texte qui fait foi. Sa mise en page suit celle de la fiche d'entreprise
   dont elle partage la feuille : même largeur, même respiration.
   ==================================================================== */

.annonce-ecran .fic-fil{margin:0 0 18px;font-size:13px}
.annonce-ecran .fic-fil a{color:var(--texte-doux);text-decoration:none}
.annonce-ecran .fic-fil a:hover{color:var(--rose)}
.annonce-ecran .fic-surtitre{
  margin:0 0 4px;font-size:13px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--rose);
}

/* La provenance ouvre la fiche : c'est elle qui autorise à se fier au
   reste. Encadrée, pour qu'on ne la prenne pas pour du contenu. */
/* Les champs déclarés. Une étiquette étroite à gauche, la valeur à droite :
   l'objet social court sur quinze lignes, il lui faut la largeur. */
.annonce-champs{margin:0 0 26px}
.annonce-champ{
  display:grid;grid-template-columns:210px 1fr;gap:18px;
  padding:12px 0;border-top:1px solid var(--trait,#e9ecf1);
}
.annonce-champ:last-child{border-bottom:1px solid var(--trait,#e9ecf1)}
.annonce-champ dt{font-size:13px;font-weight:700;color:var(--texte-doux)}
.annonce-champ dd{margin:0;font-size:15px;line-height:1.6;color:var(--nuit)}
/* Une section d'avis de marché n'a pas d'étiquette : sa valeur prend la
   ligne entière, au lieu de la colonne étroite réservée aux intitulés. Le
   gabarit posait la classe depuis toujours, la feuille ne la connaissait
   pas, et le texte d'un avis se lisait dans 210 pixels de large. */
.annonce-champ-libre{grid-template-columns:1fr}

.annonce-cles{
  display:flex;flex-wrap:wrap;gap:10px 20px;margin:0 0 24px;
  font-size:13px;color:var(--texte-doux);
}
.annonce-cles strong{color:var(--nuit);font-variant-numeric:tabular-nums}

.annonce-avertissement{
  margin:26px 0 0;padding-top:16px;border-top:1px solid var(--trait,#e9ecf1);
  font-size:13px;line-height:1.6;color:var(--texte-doux);
}

/* Au doigt, la grille à deux colonnes ne tient pas : l'étiquette passe
   au-dessus de sa valeur. */
@media (max-width:760px){
  .annonce-champ{grid-template-columns:1fr;gap:4px}
}

/* Les sections de la fiche d'annonce. Un titre discret, un filet, et les
   champs dessous : quarante champs empilés sans rupture se lisaient comme
   un formulaire administratif. */
.annonce-section{margin:0 0 30px}
.annonce-section h2{
  margin:0 0 2px;font-size:12px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--rose);
}
.annonce-section .annonce-champs{margin:0}

/* Un poste modifié : son intitulé, puis l'avant et l'après côte à côte.
   C'est la seule information que ces annonces apportent réellement, et la
   voir d'un coup d'œil est tout l'intérêt de la fiche. */
.annonce-poste{
  padding:14px 0;border-top:1px solid var(--trait,#e9ecf1);
}
.annonce-poste:last-child{border-bottom:1px solid var(--trait,#e9ecf1)}
.annonce-poste-titre{
  margin:0 0 10px;font-size:15px;font-weight:700;color:var(--nuit);
}
.annonce-bascule{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.annonce-avant,.annonce-apres{
  padding:12px 14px;border-radius:8px;font-size:14px;line-height:1.55;
}
.annonce-avant{background:var(--fond-doux,#f6f7f9);color:var(--texte-doux)}
.annonce-apres{background:var(--rose-clair);color:var(--nuit)}
.annonce-etat{
  display:block;margin-bottom:5px;font-size:11px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;opacity:.7;
}

@media (max-width:760px){
  .annonce-bascule{grid-template-columns:1fr}
}

/* ====================================================================
   L'en-tête de la fiche : la pièce à gauche, sa référence à droite

   L'aperçu occupait une section entière en bas de page, haute de plusieurs
   centaines de pixels. Il valait comme preuve, non comme lecture : sa place
   est donc à côté de la référence qu'il atteste, en vignette, et la page
   entière s'ouvre à la demande.
   ==================================================================== */

/* « flex-start », non « stretch » : étirée sur la hauteur de la ligne, la
   vignette prenait celle du bandeau de provenance - une cinquantaine de
   pixels - et son « overflow:hidden » rognait tout le reste de la page. */
.annonce-entete{
  display:flex;gap:16px;align-items:flex-start;
  margin:18px 0 26px;
}

/* La vignette. 150 px de large, 200 de haut au plus : on y reconnaît le
   bandeau du Journal et le titre de l'annonce, ce qui suffit à savoir qu'on
   tient la bonne pièce. Le rognage se fait par débordement du cadre -
   « max-height » sur une image la redimensionnerait en timbre-poste. */
.annonce-vignette{
  position:relative;flex:0 0 140px;height:180px;overflow:hidden;
  border:1px solid var(--trait,#e9ecf1);border-radius:8px;background:#fff;
  text-decoration:none;
}
.annonce-vignette img{display:block;width:100%;height:auto}
.annonce-vignette::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:64px;
  background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);
  pointer-events:none;
}
.annonce-vignette-geste{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:7px 10px;text-align:center;
  font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--rose);
}
.annonce-vignette:hover{border-color:var(--rose)}
.annonce-vignette:hover .annonce-vignette-geste{text-decoration:underline}

/* La provenance, à droite de la vignette : elle occupe toute la hauteur
   restante plutôt que de flotter en haut d'un bloc vide. */
/* « align-self:stretch » aligne le bandeau sur la hauteur de la vignette :
   sans lui, deux lignes de texte flottaient en haut d'un bloc de deux cents
   pixels, et l'en-tête paraissait bancal. Le contenu se centre alors. */
.annonce-provenance{
  flex:1;align-self:stretch;
  display:flex;gap:12px;align-items:center;
  margin:0;padding:14px 18px;border-radius:10px;
  background:var(--fond-doux,#f6f7f9);
  font-size:14px;line-height:1.55;color:var(--texte-doux);
}
.annonce-provenance svg{flex:0 0 auto;width:20px;height:20px}
.annonce-provenance strong{color:var(--nuit);font-variant-numeric:tabular-nums}

.annonce-echeance{color:var(--rose)}

/* Au doigt, la vignette passe au-dessus de la référence. */
@media (max-width:640px){
  .annonce-entete{flex-direction:column}
  .annonce-vignette{flex:0 0 auto;width:100%;height:150px}
}


/* ====================================================================
   La visionneuse

   L'aperçu d'une page du Journal officiel se regarde par-dessus la fiche,
   sans la quitter. Fond assombri, barre de titre, image au centre - et la
   page en dessous cesse de défiler, faute de quoi on la retrouvait ailleurs
   en refermant.
   ==================================================================== */

.visionneuse{
  position:fixed;inset:0;z-index:2000;
  display:flex;flex-direction:column;
  background:rgba(16,18,27,.86);
  backdrop-filter:blur(3px);
  animation:visionneuse-entree .16s ease-out;
}
@keyframes visionneuse-entree{from{opacity:0}to{opacity:1}}

.visionneuse-barre{
  flex:0 0 auto;display:flex;align-items:center;gap:16px;
  padding:14px 20px;color:#fff;
}
.visionneuse-titre{
  flex:1;font-size:14px;font-weight:600;opacity:.9;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.visionneuse-fermer{
  flex:0 0 auto;width:36px;height:36px;border-radius:999px;
  border:1px solid rgba(255,255,255,.25);background:transparent;
  color:#fff;font-size:22px;line-height:1;cursor:pointer;
}
.visionneuse-fermer:hover{background:rgba(255,255,255,.12)}
.visionneuse-fermer:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* La scène défile : une page de journal est plus haute que l'écran, et la
   réduire pour la faire tenir la rendrait illisible - ce qui est
   exactement ce qu'on venait éviter en l'ouvrant. */
.visionneuse-scene{
  flex:1;overflow:auto;padding:0 20px 28px;
  display:flex;justify-content:center;align-items:flex-start;
}
.visionneuse-scene img{
  max-width:min(920px,100%);height:auto;
  border-radius:6px;background:#fff;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}

@media (max-width:640px){
  .visionneuse-scene{padding:0 10px 16px}
}


/* L'ancienneté à côté du titre de l'écran : « hier », « il y a 3 jours ».
   Elle accompagne la date, elle ne lui dispute pas la vedette - d'où la
   taille et l'alignement, calés sur la ligne de base du titre. */
.bo-page h1 .bord-age{
  margin-left:12px;vertical-align:middle;
  font-size:13px;font-weight:600;letter-spacing:0;
}

/* Sans la date entre elles, les flèches se lisent comme un pager : elles se
   rapprochent, et le lien de retour s'en détache. */




/* Le choix de la journée, ou de l'intervalle. Deux champs sur une ligne,
   posés au-dessus des flèches : on choisit une date, ou l'on avance d'un
   jour - deux gestes pour deux besoins. */
.bord-choix{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:10px 0 6px;
}
.bord-choix label{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13px;color:var(--texte-doux);
}
/* Rien à dessiner sur le champ : « champDate » masque l'input natif et pose
   son propre bouton « .date-champ », que la feuille des composants habille.
   Une règle sur « .bord-choix input » ne touchait que l'élément caché.
   On ne règle donc ici que la place qu'ils occupent dans la ligne. */
@media (max-width:560px){
  .bord-choix label{flex:1 1 100%}
  .bord-choix .date-champ{width:100%}
}


/* Le jour et le mois, dans le titre du Signal. Le reste du titre - « Le
   Signal du », « au », l'année - passe en graisse normale : ce sont les
   deux bornes qu'on cherche du regard, non la phrase qui les relie. */
.bo-page h1 strong{font-weight:800}
.bo-page h1{font-weight:600}


/* L'en-tête du Signal : ce qu'on regarde à gauche, de quoi en changer à
   droite. Empilés, ils prenaient deux lignes pour une seule idée et
   repoussaient les tuiles d'autant. */
.bord-entete{
  display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:14px 24px;
}
.bord-entete h1{margin:0}
/* « Mon Signal du… » : le nom du module porte l'accent de la marque,
   comme le titre de l'accroche publique. */
.bord-entete h1 .accent{color:var(--rose)}
.bord-entete .bord-choix{margin:0}

/* Sous une certaine largeur, le sélecteur repasse dessous : deux champs de
   date en toutes lettres ne tiennent pas à côté d'un titre. */
@media (max-width:900px){
  .bord-entete{justify-content:flex-start}
  .bord-entete .bord-choix{flex:1 1 100%}
}


/* L'attente d'un fragment. Le relevé reste lisible - on ne le remplace plus
   par un squelette - et signale seulement qu'il travaille. La transition
   n'existe qu'à l'aller : au retour, le contenu neuf doit paraître net tout
   de suite. */
#signal-vue[aria-busy="true"]{opacity:.55;transition:opacity .12s ease-out}
#signal-vue{transition:opacity 0s}

/* Le curseur dit que le clic est pris en compte, sans bloquer la lecture. */
#signal-vue[aria-busy="true"] .onglet,
#signal-vue[aria-busy="true"] .date-champ{cursor:progress}


/* ============================================================
   « En savoir plus » (document 38)

   La page était écrite dans le gabarit des mentions légales - une colonne
   de 840 px, des titres soulignés d'un filet, un tableau. C'est le bon
   dessin pour un texte qu'on subit ; c'était le mauvais pour la page qui
   explique le service à qui hésite encore. Elle reprend donc le vocabulaire
   de l'accueil et de « fonctionnalites.php » : sections alternées, cartes,
   pastilles. Rien n'est inventé ici qui existe déjà là-bas.

   Ce bloc ne déclare que ce que les deux autres pages n'avaient pas : la
   chaîne de traitement, le catalogue des fonctions, et de quoi rendre un
   lien visible hors de « .contenu ».
   ============================================================ */

/* Hors « .contenu », un lien hérite de « color:inherit » et de
   « text-decoration:none » : il est invisible. Les pages de sections n'en
   portaient pas ; celle-ci en porte partout, et la règle doit suivre. */
.page-savoir a:not(.bouton){
  color:var(--rose);font-weight:600;
  text-decoration:underline;text-underline-offset:2px;
}
.page-savoir a:not(.bouton):hover{color:var(--rose-sombre)}
.page-savoir .sources-note a{font-weight:600}

/* La mesure de lecture, pour les blocs de texte suivi posés dans une
   section large : une phrase de 1140 px ne se lit pas. */
.bloc-mesure{max-width:800px;margin:0 auto}
.bloc-mesure p{margin:0 0 15px}
.bloc-mesure p:last-child{margin-bottom:0}
.bloc-mesure .puces{margin-top:4px}

/* ---------------- Les sources diffusées ---------------- */
/* La grille des sources est calée sur trois, parce que l'accueil en montre
   trois. Ici le nombre vient du régime d'exposition et peut valoir un : une
   carte seule dans une grille de trois se range à gauche et paraît
   abandonnée. Le compte est donc porté par un attribut, et la grille s'y
   ajuste au lieu de laisser deux colonnes vides. */
/* Sous 980 px, les règles de « fonctionnalites.php » reprennent la main -
   deux colonnes, puis une. Ces deux-là sont donc bornées au grand écran :
   sans la borne, leur sélecteur d'attribut l'emporterait sur la grille
   repliée, et deux pistes de 420 px déborderaient d'une fenêtre de 640. */
@media (min-width:981px){
  .sources[data-nombre="1"]{grid-template-columns:minmax(0,540px);justify-content:center}
  .sources[data-nombre="2"]{grid-template-columns:repeat(2,minmax(0,420px));justify-content:center}
}
.source-editeur{
  display:block;margin:2px 0 14px;
  font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--texte-doux);
}
.source-reprise{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--bord);
  font-size:13.5px;line-height:1.5;color:var(--texte-doux);
}

/* ---------------- La chaîne de traitement ---------------- */
/* Cinq maillons, et non quatre : « .etapes » de l'accueil est figé à quatre
   colonnes, et une cinquième y ouvrirait un rang orphelin. La chaîne se lit
   donc de haut en bas, ce qui convient mieux à un enchaînement où chaque
   maillon suppose le précédent - une rangée horizontale suggère des étapes
   parallèles. */
.chaine{display:grid;gap:0;max-width:820px;margin:0 auto}
.chaine li{
  position:relative;display:grid;grid-template-columns:44px 1fr;
  gap:22px;padding:0 0 30px;
}
.chaine li:last-child{padding-bottom:0}
/* Le fil qui relie les maillons. Il part du bas de la pastille et s'arrête
   au maillon suivant ; le dernier n'en porte pas, sinon la chaîne pendrait
   dans le vide. */
.chaine li:not(:last-child)::before{
  content:'';position:absolute;left:21px;top:44px;bottom:8px;
  width:2px;background:var(--rose-pale);
}
.chaine-num{
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--rose-clair);border:1px solid var(--rose-pale);
  color:var(--rose);font-weight:800;font-size:15px;
}
.chaine h3{font-size:17px;margin:11px 0 7px}
.chaine p{font-size:14.5px;line-height:1.6}

/* ---------------- Le catalogue des fonctions ---------------- */
/* Onze modules aux hauteurs très inégales : une grille les aurait tous
   étirés sur la hauteur du plus grand de leur rang, et le blanc ainsi
   fabriqué se lit comme un contenu qui manque. Les colonnes de texte
   remplissent, elles, ce qu'on leur donne. */
.catalogue{columns:3;column-gap:24px}
.catalogue-groupe{
  break-inside:avoid;-webkit-column-break-inside:avoid;
  margin:0 0 24px;padding:26px 24px;
  background:var(--surface);border:1px solid var(--bord);
  border-radius:var(--r-l);box-shadow:var(--ombre-douce);
}
.catalogue-tete{display:grid;grid-template-columns:44px 1fr;gap:15px;align-items:center}
.catalogue-tete .pastille{width:44px;height:44px;border-radius:var(--r-m)}
.catalogue-tete .pastille svg{width:21px;height:21px}
.catalogue-tete h3{font-size:17px}
.catalogue-resume{margin-top:14px;font-size:14px;line-height:1.55}
.catalogue-traits{
  display:grid;gap:10px;margin-top:16px;padding-top:15px;
  border-top:1px solid var(--bord);
}
.catalogue-traits li{
  display:grid;grid-template-columns:16px 1fr;gap:10px;align-items:start;
  font-size:13.5px;line-height:1.45;
}
.catalogue-traits .ico{width:16px;height:16px;color:var(--rose);margin-top:2px}
/* La mention de formule est portée par le trait qu'elle restreint, et non
   par une colonne à part : un lecteur qui parcourt une liste ne va pas
   chercher la réserve trois centimètres plus loin. */
.marque-formule{
  display:inline-block;margin-left:6px;vertical-align:1px;
  padding:1px 7px;border-radius:5px;
  background:var(--rose-clair);border:1px solid var(--rose-pale);color:var(--rose);
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;
}
.catalogue-pied{
  max-width:800px;margin:38px auto 0;text-align:center;
  font-size:14px;line-height:1.6;color:var(--texte-doux);
}

@media (max-width:980px){
  .catalogue{columns:2}
}
@media (max-width:640px){
  .catalogue{columns:1}
  .catalogue-groupe{padding:22px 20px}
  .chaine li{grid-template-columns:38px 1fr;gap:16px}
  .chaine-num{width:38px;height:38px;font-size:14px}
  .chaine li:not(:last-child)::before{left:18px;top:38px}
  .chaine h3{margin-top:8px}
}


/* ---------------------------------------------------------------------------
   Le titre de la maquette du portail.

   La maquette de l'accueil rejoue l'écran de l'abonné, titre compris - et ce
   titre était un <h1>. L'accueil en portait donc deux, dont l'un appartenait
   à un décor (document 38, défaut U14, décision R13) : un moteur y lit deux
   sujets de premier rang et n'en retient aucun.

   Le titre de la maquette est désormais un paragraphe, et reprend ici
   l'habillage du vrai titre d'écran - « .bo-corps h1 » et « .bo-page h1 » -
   pour que le décor reste identique au pixel près.
   --------------------------------------------------------------------------- */
.bo-titre{margin:0;color:var(--nuit);font-weight:700;line-height:1.18;letter-spacing:-.035em}
.bo-corps .bo-titre{font-size:25px}
.bo-page .bo-titre{font-weight:600}