/* ============================================================================
   OPAQ — tarifs.css
   ----------------------------------------------------------------------------
   La page des formules et tarifs (plan §E.2, modifié par R.7 : direction
   claire). Chargée après jetons.css et base.css, dont elle reprend les
   jetons, les rôles et les composants (.wrap, .reperes, .filet, .btn,
   .actions, .lien, .une, .sr, .bloc-sombre, data-app).
      1. Jetons de la page             6. Blocs (compris, engagement…)
      2. En-tête                       7. Option « Mon espace »
      3. Bascule (onglets)             8. Renvoi vers l'achat
      4. Les deux parties              9. À l'achat
      5. Les trois offres (cartes)    10. Fin (début du bloc sombre)
   Grille : 4 colonnes sous 768 px, 8 jusqu'à 1199, 12 au-delà. Les trois
   cartes des offres sont la seule grille de trois de la page.
   Règles : seuls transform, opacity et clip-path s'animent ; les couleurs
   changent d'un coup ; tout survol est sous @media (hover:hover) and
   (pointer:fine) ; aucune ombre, aucun flou, aucun dégradé ; jamais de
   texte cuivre sur crème (le cuivre n'y sert qu'en aplat ou en filet).
   ============================================================================ */

/* 1. Jetons de la page -------------------------------------------------------------
   La carte : un crème à peine éclairci (le même voile blanc que les champs
   du formulaire), sur lequel le rendu de la pièce, posé sur le crème exact,
   se détache en rectangle arrondi. */
.tarifs{
  --carte-fond:rgb(255 255 255 / .5);
  /* Grands prix : Inter 800, très serré (plan R.2). */
  --prix-graisse:var(--g-chiffre);
  --prix-approche:var(--ap-chiffre);
  /* Écart entre la bascule (au-delà de 1200 px : l'en-tête) et les parties
     (48 px à partir de 768 px, voir §2). */
  --ecart-modes:var(--e-6);
}

/* 2. En-tête ------------------------------------------------------------------------
   Repère, titre, puis la colonne « à côté » (.tarifs-cote) : la phrase hors
   taxes et la bascule. Sous 1200 px, tout s'empile. À partir de 1200 px, le
   titre occupe les colonnes 1–8 et la colonne d'à côté les colonnes 9–12,
   son bas (la bascule) aligné sur le bas du titre.
   Elle couvre aussi la rangée du repère : si elle est plus haute que le
   titre (1200 px, phrase sur quatre lignes), l'excédent se répartit sur les
   deux rangées au lieu d'écarter le titre de son repère.
   Une page de tarifs montre un prix sans qu'on ait à défiler : l'en-tête est
   plus serré que celui des autres pages (32 à 48 px d'air sous la barre au
   lieu de 48 à 120), les écarts jusqu'aux cartes aussi, et chaque carte
   commence par son prix (§5). Bas du premier prix : 572 px à 390 × 844,
   581 px à 1440 × 900, 556 px à 1280 × 720. */
.tarifs-tete{
  padding-top:calc(var(--nav-h) + var(--e-6));
}
.tarifs-tete h1{ max-width:12ch; margin-top:var(--e-5); }
.tarifs-lead{
  max-width:var(--mesure-lead);
  margin-top:var(--e-5);
  font-size:var(--fs-lead); line-height:1.5;
  color:var(--texte-2);
}
@media (min-width:768px){
  .tarifs{ --ecart-modes:var(--e-7); }
  .tarifs-tete{ padding-top:calc(var(--nav-h) + var(--e-7)); }
}
@media (min-width:1200px){
  .tarifs-tete{
    display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:var(--gouttiere);
    align-items:end;
  }
  .tarifs-tete .reperes{ grid-column:1 / span 8; grid-row:1; }
  .tarifs-tete h1{ grid-column:1 / span 8; grid-row:2; max-width:none; }
  .tarifs-cote{ grid-column:9 / span 4; grid-row:1 / span 2; min-width:0; }
  .tarifs-lead{ margin-top:0; }
}

/* 3. Bascule « En abonnement / À l'achat » -------------------------------------------
   Une piste en pilule ; dedans, deux onglets à parts égales et l'indicateur :
   une pilule anthracite qui glisse sous l'onglet choisi (translateX, 500 ms,
   --douce). Elle porte une copie des libellés, en crème, qui glisse en sens
   inverse : à l'écran, les mots restent fixes et l'anthracite passe dessous.
   Rien ne change de couleur pendant le trajet. Intention : s'orienter.
   Sans JavaScript, la bascule n'existe pas (les deux parties se suivent). */
/* Deux colonnes réellement égales (minmax(0, 1fr) : un libellé long n'impose
   pas sa largeur à la sienne), les mêmes pour les onglets et pour la copie
   des libellés que porte l'indicateur : les deux tombent l'une sur l'autre
   à toutes les largeurs. Téléphone : pleine largeur. 768–1199 : à la largeur
   de ses libellés (24rem au moins). 1200 et plus : la largeur de la colonne
   d'à côté, sous la phrase hors taxes. */
.bascule{
  --piste:4px;  /* jour entre la piste et l'indicateur */
  position:relative;
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  width:100%;
  margin-top:var(--e-5);
  padding:var(--piste);
  border:1px solid var(--bord-controle);
  border-radius:var(--rayon-pilule);
}
/* JavaScript présent : la place de la bascule est réservée dès la première
   image (tarifs.js la rend visible), rien ne saute à son arrivée. Si le
   module ne se charge pas (onerror de sa balise) ou échoue (tarifs.js),
   .sans-onglets rend la forme sans JavaScript : plus de place réservée. */
.js .bascule[hidden]{ display:grid !important; visibility:hidden; }
@media (min-width:768px) and (max-width:1199.98px){
  .bascule{ display:inline-grid; width:auto; min-width:24rem; margin-top:var(--e-6); }
  .js .bascule[hidden]{ display:inline-grid !important; }
}
@media (min-width:1200px){
  .bascule{ margin-top:var(--e-6); }
}
.sans-onglets .bascule, .js.sans-onglets .bascule[hidden]{ display:none !important; }
.bascule [role="tab"], .bascule-reflet > span{
  display:flex; align-items:center; justify-content:center;
  min-width:0; min-height:48px; padding:0 16px;
  border-radius:var(--rayon-pilule);
  font-size:.9375rem; font-weight:550; line-height:1.2; letter-spacing:-.005em;
  white-space:nowrap;
}
/* Petits téléphones (320–374 px) : 135 à 162 px par onglet ; « En abonnement »
   en mesure 112. Le jour latéral se resserre, le corps du texte reste le même. */
@media (max-width:374.98px){
  .bascule [role="tab"], .bascule-reflet > span{ padding:0 8px; }
}
.bascule [role="tab"]{
  color:var(--texte-2);
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.bascule [role="tab"][aria-selected="true"]{ color:var(--texte); cursor:default; }
@media (hover:hover) and (pointer:fine){
  .bascule [role="tab"][aria-selected="false"]:hover{ color:var(--texte); }
}
.bascule-curseur{
  position:absolute; top:var(--piste); bottom:var(--piste); left:var(--piste); z-index:1;
  width:calc(50% - var(--piste));
  border-radius:var(--rayon-pilule);
  overflow:hidden;
  background:var(--anthracite);
  pointer-events:none;
}
.bascule-reflet{
  position:absolute; inset:0 auto 0 0;
  width:200%;
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  color:var(--creme);
}
.bascule[data-actif="1"] .bascule-curseur{ transform:translateX(100%); }
.bascule[data-actif="1"] .bascule-reflet{ transform:translateX(-50%); }
/* Les transitions ne s'installent qu'une fois l'état initial posé (.est-prete) :
   arriver sur #achat ne fait pas glisser l'indicateur. */
.bascule.est-prete :is(.bascule-curseur, .bascule-reflet){ transition:transform 500ms var(--douce); }
/* Focus clavier : l'anneau entoure toute la piste et en suit l'arrondi
   (l'indicateur couvrirait celui de l'onglet). L'onglet qui a le focus est
   toujours celui qui est choisi. */
@supports selector(:has(*)){
  .bascule [role="tab"]:focus-visible{ outline:none; }
  .bascule:has([role="tab"]:focus-visible){ outline:2px solid var(--focus); outline-offset:3px; }
}

/* 4. Les deux parties -----------------------------------------------------------------
   Sans JavaScript, elles se suivent. Avec les onglets (.tarifs-onglets, posée
   par tarifs.js), elles occupent la même case de grille : le fondu croisé se
   fait sur place ; la partie cachée porte l'attribut hidden. */
.modes{ margin-top:var(--ecart-modes); padding-bottom:var(--section); }
.mode + .mode{ margin-top:var(--section); }
.modes.tarifs-onglets{ display:grid; }
/* Une ancre qui nomme une partie (#achat, #abonnement) la fait arriver avec
   la bascule au-dessus d'elle, à l'écran : le visiteur voit quel onglet est
   ouvert. tarifs.js mesure cette marge (--ancre-marge) : du haut de ce qu'il
   faut montrer (la bascule ; au-delà de 1200 px, la rangée du titre, qu'elle
   partage) jusqu'au haut des parties. La valeur de secours vaut la hauteur
   de la bascule (onglet de 48 px, jour de 4 px de chaque côté, bord de 1 px)
   plus l'écart. Le navigateur l'applique lui-même, même quand il refait le
   saut d'ancre après le script. */
.modes.tarifs-onglets > .mode{
  grid-area:1 / 1; min-width:0; margin-top:0;
  scroll-margin-top:var(--ancre-marge, calc(48px + 2 * 4px + 2px + var(--ecart-modes)));
}
.modes.tarifs-onglets > .mode-entrant{ position:relative; z-index:1; }
.mode-sortant{ pointer-events:none; }

/* Le titre de chaque partie se lit comme un repère (le grand titre est le h1). */
.mode-titre{
  font-family:var(--sans); font-size:var(--fs-reperes); font-weight:500;
  line-height:1.4; letter-spacing:.14em; text-transform:uppercase;
  color:var(--reperes);
}

/* 5. Les trois offres : trois cartes arrondies ------------------------------------------
   Une page de tarifs se lit d'abord par ses prix. Chaque carte commence par
   le nom de la formule et son numéro, le prix en très grand, la phrase qui
   la résume ; puis le rendu de sa pièce (4:3, coins arrondis, en entier).
   Le premier prix tient ainsi dans le premier écran, au téléphone comme sur
   un portable, sans réduire les rendus. Vient ensuite le détail, dans l'ordre
   de ce que le client paie (lot 2, 19/10) : les pages, la liste (« Compris
   chaque mois » ; à l'achat, « Ce que vous recevez »), la fiche Google ou
   l'acompte, la création en petit (abonnement), le bouton.
     < 768      : les cartes s'empilent ; le rendu sur la largeur du texte.
     768–1199   : chaque carte en largeur. En haut, deux colonnes : le nom,
                  le prix et la phrase à gauche, le rendu à droite. Dessous,
                  le détail sur toute la largeur (en abonnement, la liste en
                  deux colonnes, les mêmes) ; en bas, la création à gauche,
                  le bouton à droite, sous le rendu (aucun grand vide sous
                  le rendu).
     ≥ 1200     : trois colonnes (4 sur 12) ; les rangées s'alignent d'une
                  carte à l'autre (subgrid) : prix, rendus, pages, listes,
                  fiche Google, création et boutons sur les mêmes lignes.
   La carte conseillée (.offre-conseil : Avancé, et le Pack Pro ; 10/10) :
   un filet cuivre de 1,5 px fait le tour de la carte (un trait, pas du
   texte), son bouton est le bouton plein, et une étiquette « Notre
   conseil » ouvre sa tête. Jamais « le plus choisi » : aucun chiffre. */
.offres{
  display:grid; row-gap:var(--e-4);
  margin-top:var(--e-4);
}
.offre{
  --dedans:20px;  /* marge intérieure de la carte */
  position:relative;
  display:flex; flex-direction:column;
  min-width:0;
  padding:var(--dedans);
  border-radius:var(--rayon);
  background:var(--carte-fond);
}
.offre-conseil::after{
  content:''; position:absolute; inset:0;
  border:1.5px solid var(--cuivre); border-radius:inherit;
  pointer-events:none;
}

.offre-tete{
  display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:baseline; column-gap:var(--e-4);
}
.offre-nom{ min-width:0; }
.offre-etiquette{
  grid-column:1 / -1; justify-self:start;
  margin-bottom:var(--e-3); padding:5px 10px;
  border:1px solid var(--cuivre); border-radius:999px;
  font-size:.75rem; font-weight:600; line-height:1.2; letter-spacing:.1em; text-transform:uppercase;
  color:var(--texte);
}
.offre-num{
  flex:none;
  font-family:var(--serif); font-style:italic; font-weight:400; font-optical-sizing:auto;
  font-size:clamp(1.375rem, 1.2rem + .5vw, 1.75rem); line-height:1;
  color:var(--texte-2);
}
.offre-prix{
  display:flex; flex-wrap:wrap; align-items:baseline; column-gap:10px;
  margin-top:var(--e-4);
  font-size:.9375rem; color:var(--texte-2);
}
.offre-apartir{ flex-basis:100%; }
/* Jamais plus gros que le titre de la page (lot 2) : au téléphone, --fs-prix (48 px) passerait le h1 (44 px). */
.offre-prix strong{
  font-family:var(--sans);
  font-size:min(var(--fs-prix), var(--fs-tete) * .92); font-weight:var(--prix-graisse);
  line-height:.9; letter-spacing:var(--prix-approche);
  color:var(--texte);
  font-variant-numeric:lining-nums;
}
/* Le prix à l'année, juste sous le prix mensuel : plus petit, sur sa propre ligne. */
.offre-annee{ flex-basis:100%; margin-top:var(--e-3); font-size:.8125rem; line-height:1.4; letter-spacing:0; color:var(--texte-2); }
.offre-desc{ margin-top:var(--e-4); max-width:24em; color:var(--texte-2); }

/* Le rendu : 4:3, en entier, coins arrondis, aligné sur le texte. Largeur
   imposée, aucun étirement : étirée à la hauteur de sa rangée (subgrid),
   l'image en déduisait une largeur minimale et élargissait la colonne de
   sa carte de quelques pixels. Le fond du cadre est le crème même des
   rendus : rien ne se voit pendant le chargement différé. */
.offre-image{
  display:block;
  width:100%; min-width:0; align-self:start;
  aspect-ratio:4 / 3;
  margin-top:var(--e-5);
  border-radius:var(--rayon);
  overflow:hidden; overflow:clip;
  background:var(--creme);
}
.offre-image img{ width:100%; height:100%; object-fit:cover; }

/* La liste des packs (masqués). */
.offre-points{ margin-top:var(--e-5); border-top:1px solid var(--filet-fort); }
.offre-points li{
  padding:12px 0;
  border-bottom:1px solid var(--filet);
  font-size:.9375rem; line-height:1.45; color:var(--texte-2);
}
/* Les lignes du détail : le nombre de pages (il ouvre le détail, à l'encre),
   la fiche Google, l'acompte. Un filet appuyé au-dessus, un filet fin
   dessous : le trait des listes de la page. */
.offre-ligne{
  margin-top:var(--e-5);
  padding:12px 0;
  border-top:1px solid var(--filet-fort);
  border-bottom:1px solid var(--filet);
  font-size:.9375rem; line-height:1.45; color:var(--texte-2);
}
.offre-pages{ font-weight:600; color:var(--texte); }
/* « Compris chaque mois », « Ce que vous recevez » : un repère (base.css),
   puis la liste à puces de la page (§6), au corps des cartes ; la puce suit
   l'interligne plus serré. */
.offre-bloc{ margin-top:var(--e-5); }
.offre-bloc .liste{ margin-top:var(--e-3); }
.offre-bloc .liste li{ font-size:.9375rem; line-height:1.45; text-wrap:pretty; }
.offre-bloc .liste li::before{ top:calc(12px + .725em - 3.5px); }
/* La création, en dernier et en petit : elle ne passe jamais devant le prix
   mensuel. Son intitulé à l'encre, sur sa ligne. */
.offre-creation{
  margin-top:var(--e-5);
  max-width:30em;
  font-size:var(--fs-petit); line-height:1.55; color:var(--texte-2);
}
.offre-creation-titre{ display:block; font-weight:600; color:var(--texte); }
.offre > .btn{ margin-top:var(--e-6); padding-inline:22px; }
/* « Parler d'un projet Ultra-Design » demande 307 px avec son trait final.
   Bouton étroit (téléphones jusqu'à 402 px de large ; colonne de droite des
   cartes de 768 à 859 px ; trois colonnes de 1200 à 1280 px) : il perd son
   trait et resserre ses marges (265 px). Plus étroit encore (téléphones de
   320 px), le libellé passe sur deux lignes, sans jamais couper
   « Ultra-Design » à son trait d'union. Requête sur l'écran et non sur la
   carte : une requête de conteneur imposerait à la carte un confinement
   qui désactive subgrid. */
@media (max-width:402.98px), (min-width:768px) and (max-width:859.98px), (min-width:1200px) and (max-width:1280.98px){
  .offre > .btn{ padding-inline:16px; }
  .offre > .btn::after{ display:none; }
}
.offre > .btn{ text-wrap:balance; }
.insecable{ white-space:nowrap; }

/* Apparitions : 90 ms d'une carte à l'autre (lire dans l'ordre) ; le prix
   monte sous son masque 150 ms après sa carte. */
.offre:nth-child(2){ --app-delai:90ms; }
.offre:nth-child(3){ --app-delai:180ms; }
.offre:nth-child(1) .offre-prix strong{ --app-delai:150ms; }
.offre:nth-child(2) .offre-prix strong{ --app-delai:240ms; }
.offre:nth-child(3) .offre-prix strong{ --app-delai:330ms; }

/* 768–1199 : en haut, deux colonnes. Le nom, le prix et la phrase à gauche ;
   le rendu à droite, sur leurs trois rangées (la troisième est souple : si
   le rendu est le plus haut, c'est sous la phrase que l'air se met). Dessous,
   le détail sur toute la largeur. En abonnement, les six points, courts,
   s'y rangent en deux colonnes, les mêmes que celles du haut
   (--colonnes-carte), remplies l'une après l'autre ; à l'achat, les sept
   points, plus longs, restent en une colonne (en deux, leurs rangées
   communes laissaient des trous), chacun sur une ligne. En bas, la création
   à gauche et le bouton à droite, sous le rendu ; à l'achat, le bouton
   seul, à droite. */
@media (min-width:768px) and (max-width:1199.98px){
  .offres{ row-gap:var(--gouttiere); }
  .offre{
    --dedans:28px;
    --colonnes-carte:minmax(0, 1.15fr) minmax(0, 1fr);
    display:grid;
    grid-template-columns:var(--colonnes-carte);
    grid-template-rows:auto auto 1fr;
    column-gap:var(--dedans);
  }
  .offre-tete{ grid-column:1; grid-row:1; }
  .offre-prix{ grid-column:1; grid-row:2; }
  .offre-desc{ grid-column:1; grid-row:3; }
  .offre-image{ grid-column:2; grid-row:1 / span 3; margin-top:0; }
  .offre > :is(.offre-ligne, .offre-bloc, .offre-points){ grid-column:1 / -1; }
  .offre-creation{ grid-column:1; }
  .offre > .btn{ grid-column:2; align-self:end; }
  .offres-formules .offre-bloc .liste{
    display:grid; grid-template-columns:var(--colonnes-carte); column-gap:var(--dedans);
    grid-auto-flow:column; grid-template-rows:repeat(3, auto);
  }
}
/* 960–1199 : en proportion, le rendu deviendrait bien plus haut que le nom,
   le prix et la phrase. Sa colonne garde une largeur de 310 à 360 px : il
   fait alors leur hauteur, et le bouton d'Ultra-Design garde la place de
   son trait (307 px). */
@media (min-width:960px) and (max-width:1199.98px){
  .offre{ --colonnes-carte:minmax(0, 1fr) clamp(310px, 30vw, 360px); }
}
@media (min-width:1200px){
  /* Une rangée par enfant de carte : 9 en abonnement (nom, prix, phrase,
     rendu, pages, « Compris chaque mois », fiche Google, création, bouton),
     8 à l'achat (l'acompte à la place de la fiche Google, pas de création),
     6 pour les packs. */
  .offres{
    --rangees:6;
    grid-template-columns:repeat(3, minmax(0, 1fr)); column-gap:var(--gouttiere);
    grid-template-rows:repeat(var(--rangees), auto); row-gap:0;
  }
  .offres-formules{ --rangees:9; }
  .offres-achat{ --rangees:8; }
  .offre{ --dedans:28px; grid-row:span var(--rangees); }
  /* Sans subgrid : colonnes souples, le bouton descend en bas de sa carte. */
  .offre > :nth-last-child(2){ margin-bottom:var(--e-6); }
  .offre > .btn{ margin-top:auto; }
  @supports (grid-template-rows:subgrid){
    .offre{ display:grid; grid-template-rows:subgrid; row-gap:0; }
    .offre > :nth-last-child(2){ margin-bottom:0; }
    .offre > .btn{ align-self:end; margin-top:var(--e-6); }
    /* les noms sur la même ligne d'une carte à l'autre ; l'étiquette de la
       carte conseillée se pose au-dessus */
    .offre-tete{ align-self:end; }
  }
  /* La formule conseillée (Avancé), plus grande que les deux autres (10/10) :
     sa colonne est plus large (son rendu aussi), et sa carte dépasse de 20 px
     en haut et en bas (marge négative compensée par le remplissage : les
     rangées communes ne bougent pas). Les rendus des deux autres cartes se
     centrent dans la rangée, désormais plus haute. */
  .offres-formules{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.18fr) minmax(0, 1fr); margin-top:calc(var(--e-4) + 20px); }
  .offres-formules > .offre-conseil{ margin-block:-20px; padding-block:calc(var(--dedans) + 20px); }
  .offres-formules > .offre:not(.offre-conseil) > .offre-image{ align-self:center; }
  /* Les packs : deux cartes de la largeur des formules, la précision dans
     la troisième colonne, en haut. */
  .packs-note{ grid-column:3; grid-row:1 / span 6; align-self:start; padding-top:var(--dedans, 28px); }
}

/* 5 bis. Les deux packs : sous les trois formules, mêmes cartes. Masqués pour
   l'instant (hidden sur .packs, tarifs.html). */
.packs{ margin-top:var(--e-8); }
.packs-titre{ font-size:var(--fs-h3); font-weight:650; letter-spacing:-.015em; }
.packs-note{ max-width:24em; font-size:.9375rem; line-height:1.5; color:var(--texte-2); }
@media (max-width:1199.98px){
  .packs-note{ margin-top:var(--e-2); }
}

/* 6. Blocs : compris, engagement, modification, délai -----------------------------------
   Deux colonnes (6 + 6 sur 12) dès 768 px, un filet qui se trace en haut
   (montrer la précision). La modification et le délai en grands chiffres. */
.blocs{
  display:grid; row-gap:var(--e-8);
  margin-top:var(--section);
}
@media (min-width:768px){
  .blocs{ grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:var(--gouttiere); row-gap:var(--e-9); }
}
.bloc{ position:relative; padding-top:var(--e-5); min-width:0; container:bloc / inline-size; }
.bloc > .filet, .espace > .filet{ position:absolute; inset:0 0 auto 0; }

.liste{ margin-top:var(--e-5); border-top:1px solid var(--filet); }
.liste li{
  position:relative;
  padding:12px 0 12px 26px;
  border-bottom:1px solid var(--filet);
  color:var(--texte-2);
}
/* Puce : le point cuivre du logo « opaq. » (un aplat, pas du texte), centré
   sur la première ligne. Un trait fin de 1,5 px se brouillait en gris aux
   positions fractionnaires ; un point de 7 px reste net partout.
   « Ce que l'achat ne comprend pas » : un trait anthracite discret. */
.liste li::before{
  content:''; position:absolute; left:2px; top:calc(12px + .775em - 3.5px);
  width:7px; height:7px; border-radius:50%;
  background:var(--cuivre);
}
.liste-sans li::before{
  left:0; top:calc(12px + .775em - 1px);
  width:12px; height:2px; border-radius:0;
  background:var(--texte-3);
}

.regles{ margin-top:var(--e-5); border-top:1px solid var(--filet); }
.regles > div{
  display:grid; grid-template-columns:minmax(0, 9.5em) minmax(0, 1fr); column-gap:20px;
  padding:13px 0;
  border-bottom:1px solid var(--filet);
}
.regles dt{ font-weight:600; color:var(--texte); }
.regles dd{ color:var(--texte-2); }
/* Bloc étroit (téléphone, tablette) : la condition au-dessus de son texte. */
@container bloc (max-width:479.98px){
  .regles > div{ grid-template-columns:1fr; row-gap:2px; }
}
@supports not (container-type:inline-size){
  @media (max-width:1199.98px){ .regles > div{ grid-template-columns:1fr; row-gap:2px; } }
}

.bloc-chiffre{
  margin-top:var(--e-5);
  display:flex; flex-wrap:wrap; align-items:baseline; column-gap:.18em;
  font-family:var(--sans);
  /* lot 2 : « 45 € » ne dépasse pas le titre de son bloc ; « 7 jours ouvrés », à côté, suit */
  font-size:var(--fs-h3); font-weight:var(--prix-graisse);
  line-height:.95; letter-spacing:var(--prix-approche);
  color:var(--texte);
}
/* « jours ouvrés » : l'unité à la taille d'un titre, sur la ligne du chiffre. */
.bloc-unite{
  font-size:var(--fs-h3); font-weight:var(--g-h3); letter-spacing:var(--ap-h3);
}
.bloc-texte{ margin-top:var(--e-4); color:var(--texte-2); }
.precision{
  max-width:var(--mesure-corps);
  margin-top:var(--e-5);
  font-size:var(--fs-petit); line-height:1.55; color:var(--texte-2);
}

/* 7. Option « Mon espace » ---------------------------------------------------------------
   À partir de 1200 px : le titre et sa phrase en colonnes 1–4, le tableau et
   sa précision en colonnes 5–12. En dessous, tout s'empile. Sous 768 px,
   chaque ligne du tableau devient : niveau et contenu à gauche, prix à
   droite (aucun débordement). */
.espace{ position:relative; margin-top:var(--section); padding-top:var(--e-5); }
.espace-tete p{ max-width:30em; margin-top:var(--e-4); color:var(--texte-2); }
@media (min-width:1200px){
  .espace{
    display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:var(--gouttiere);
    align-items:start;
  }
  .espace-tete{ grid-column:1 / span 4; grid-row:1 / span 2; }
  .espace .tableau{ grid-column:5 / -1; margin-top:0; }
  .espace-precision{ grid-column:5 / -1; }
}

.tableau{ display:block; width:100%; margin-top:var(--e-7); font-variant-numeric:lining-nums tabular-nums; }
.tableau thead, .tableau tbody{ display:block; }
.tableau tr{
  display:grid; grid-template-columns:minmax(0, 1fr) auto; column-gap:var(--gouttiere);
  align-items:baseline;
  padding:18px 0;
  border-bottom:1px solid var(--filet);
}
.tableau th, .tableau td{ display:block; padding:0; text-align:left; }
.tableau tbody th{ font-weight:600; color:var(--texte); }
.tableau td{ color:var(--texte-2); }
.tableau td:last-child{
  font-size:var(--fs-h3); font-weight:var(--prix-graisse); /* au plus la taille du titre « Options » */
  line-height:1; letter-spacing:-.04em;
  color:var(--texte); white-space:nowrap; text-align:right;
}
.tableau tbody tr:first-child{ border-top:1px solid var(--filet-fort); }
/* Apparitions : 50 ms d'une ligne à l'autre. */
.tableau tbody tr:nth-child(2){ --app-delai:50ms; }
.tableau tbody tr:nth-child(3){ --app-delai:100ms; }

/* Téléphone : en-têtes de colonnes lus mais non affichés ; prix à droite,
   sur la hauteur des deux lignes. */
@media (max-width:767.98px){
  .tableau thead{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
  }
  .tableau tbody th{ grid-column:1; grid-row:1; }
  .tableau tbody td:nth-child(2){ grid-column:1; grid-row:2; margin-top:2px; font-size:.9375rem; }
  .tableau tbody td:last-child{ grid-column:2; grid-row:1 / span 2; align-self:center; }
}
@media (min-width:768px){
  .tableau tr{ grid-template-columns:minmax(0, 3fr) minmax(0, 3fr) minmax(0, 2fr); padding:22px 0; }
  .tableau thead tr{ padding:0 0 14px; border-bottom:0; }
  .tableau thead th{
    font-family:var(--sans); font-size:var(--fs-reperes); font-weight:500;
    line-height:1.4; letter-spacing:.14em; text-transform:uppercase;
    color:var(--reperes);
  }
  .tableau thead th:last-child{ text-align:right; }
}

/* 8. Renvoi vers l'achat, en fin de partie abonnement ------------------------------------- */
.renvoi{
  display:flex; flex-wrap:wrap; align-items:center; column-gap:.4em;
  margin-top:var(--section); padding-top:var(--e-5);
  border-top:1px solid var(--filet-fort);
  font-size:var(--fs-lead); line-height:1.4;
  color:var(--texte-2);
}

/* 9. À l'achat -----------------------------------------------------------------------------
   Mêmes cartes qu'en abonnement (section 5), sans mise en avant ; les deux
   blocs dessous. Le prix monte de 0 à son montant (tarifs.js) : il garde
   une largeur stable (chiffres tabulaires) le temps du compte. */
.offres-achat .compte{ font-variant-numeric:lining-nums tabular-nums; }
.blocs-achat{ margin-top:var(--section); }

/* 10. Fin : « Une question avant de choisir ? » ---------------------------------------------
   Le début du bloc sombre (rôles inversés, coins du haut arrondis par
   base.css), que le pied de page prolonge sans couture. Le titre à la
   taille de la une (.une). */
.tarifs-fin{
  padding-top:var(--section);
  padding-bottom:var(--e-8);
}
.fin-titre{ max-width:11ch; }
.fin-texte{
  max-width:var(--mesure-lead);
  margin-top:var(--e-6);
  font-size:var(--fs-lead); line-height:1.5; color:var(--texte-2);
  --app-delai:150ms;
}
.tarifs-fin .actions{ margin-top:var(--e-7); --app-delai:var(--suite); }
/* Le lien de la phrase : en crème plein (le texte autour est en --texte-2),
   avec la même zone d'appui de 46 px et le même anneau de focus que sur les
   autres pages (pages.css, que cette page ne charge pas). */
.tarifs-fin .fin-texte a{ color:var(--texte); padding-block:calc(23px - .6em); }
.tarifs-fin .fin-texte a:focus-visible{ outline:none; }
.tarifs-fin .fin-texte a:focus-visible > span{
  outline:2px solid var(--focus); outline-offset:3px; border-radius:2px;
}