/* platform.css — styles propres aux pages plateforme (landing, onboarding,
   super-admin). Complète base.css + le thème generic. */

.hero--landing{padding:44px 32px 38px}
.lead{font-size:1.15rem;line-height:1.5;margin:0;max-width:48ch;color:var(--hero-ink);opacity:.95}

.steps{margin:0;padding-left:1.2em;display:grid;gap:8px}
.steps li{padding-left:4px}

.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.offer{border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--bg)}
.offer--feature{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.offer h3{margin:0 0 6px;font-family:var(--font-display)}
.offer-price{font-family:var(--font-data);font-weight:700;font-size:1.25rem;margin:0 0 8px;color:var(--accent)}
.offer p{margin:0;font-size:.92rem}

.site-links{margin:22px 0 8px;text-align:center;font-size:.9rem;color:var(--muted)}
.site-links a{color:var(--accent);text-decoration:none;font-weight:600}
.site-links a:hover{text-decoration:underline}

/* Bandeau légal « non vérifié » */
.legal-banner{
  margin-top:18px;padding:12px 16px;border-radius:12px;font-size:.86rem;line-height:1.45;
  background:color-mix(in srgb, var(--automate) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--automate) 40%, transparent);
  color:var(--text);
}
.badge--verified{background:color-mix(in srgb, var(--open) 20%, transparent);border-color:color-mix(in srgb, var(--open) 45%, transparent);cursor:help}

/* Formulaire onboarding / admin plateforme */
/* Les colonnes sont en minmax(0,1fr), PAS en 1fr : « 1fr » vaut minmax(auto,1fr)
   et une colonne ne descend jamais sous le min-content de son contenu. Or un
   <select> a pour largeur minimale celle de sa plus longue option — « Artisan
   du bâtiment (plombier, électricien, chauffagiste, peintre, menuisier) »,
   588 px en Fraunces — ce qui forçait la colonne de gauche à 588 px, poussait
   la colonne de droite hors du cadre (mesuré le 11/09/2026 : +29 px sur marco,
   +43 px sur 428, de 760 px de large à l'infini) et, sous 680 px, élargissait
   la carte entière derrière l'overflow-x:hidden du body. Même principe que
   .grid dans base.css. Les champs prennent 100 % de leur cellule et peuvent
   rétrécir (min-width:0) : le select tronque lui-même son option affichée. */
.form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.form-grid>*{min-width:0}
.form-grid label{display:flex;flex-direction:column;gap:5px;font-size:.9rem;color:var(--muted)}
.form-grid .col-2{grid-column:1 / -1}
.form-grid input,.form-grid select,.form-grid textarea{
  width:100%;min-width:0;
  padding:10px;border:1px solid var(--line);border-radius:9px;font-size:.95rem;font-family:inherit;background:var(--card);color:var(--text)
}
.subdomain-row{display:flex;align-items:center;gap:0}
.subdomain-row input{flex:1 1 0;width:auto;min-width:0;border-radius:9px 0 0 9px;text-align:right}
.subdomain-row .suffix{padding:10px 12px;border:1px solid var(--line);border-left:0;border-radius:0 9px 9px 0;background:var(--bg);color:var(--muted);white-space:nowrap}

.admin-table{width:100%;border-collapse:collapse;font-size:.92rem}
.admin-table th,.admin-table td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line)}
.admin-table th{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
/* Colonne « Actions » : boutons compacts en rangée (le <form> est déjà flex-wrap).
   Scopé à .admin-table => n'affecte que la page super-admin ; les .btn partagés
   des autres pages gardent leur taille normale. */
.admin-table .btn{padding:6px 11px;font-size:13px;line-height:1.2;border-radius:8px;white-space:nowrap;flex:0 0 auto}
/* Élargit la colonne d'actions du tableau des tenants pour que les boutons se
   placent côte à côte (et wrappent proprement). Scopé à .admin-table--tenants =>
   n'affecte pas le tableau des signalements. Desktop only pour éviter le scroll mobile. */
/* Plancher de la colonne Actions. box-sizing:border-box (base.css) => min-width
   INCLUT le padding 9px 10px de la cellule. Il faut donc 100px de grille + 20px de
   padding = 120px, +4px de marge => 124px. L'ancienne valeur de 200px forçait la
   table hors de sa carte sur les viewports étroits. */
@media(min-width:681px){ .admin-table--tenants td:last-child{min-width:124px} }
/* Tableau « Domaines & e-mail » : la colonne d'édition doit prendre la place
   disponible sans jamais pousser la table hors de la carte. */
.admin-table--domains{table-layout:fixed;width:100%}
.admin-table--domains td,.admin-table--domains th{overflow-wrap:anywhere;vertical-align:top}
.admin-table--domains td>*{max-width:100%}
.admin-table--domains td:nth-child(3){width:46%}
@media(max-width:680px){
  /* Même repli en cartes empilées que le tableau des tenants : aucune colonne
     ne peut sortir de l'écran. */
  .admin-table--domains,.admin-table--domains tbody,
  .admin-table--domains tr,.admin-table--domains td{display:block;width:auto}
  .admin-table--domains thead{display:none}
  .admin-table--domains tr{border:1px solid var(--line);border-radius:12px;padding:8px 14px;margin:0 0 12px}
  .admin-table--domains td{border:0;padding:4px 0}
  .admin-table--domains td:nth-child(3){width:auto}
}
/* Boutons d'action en icônes (SVG inline). Desktop : icône seule + label en tooltip
   (survol/focus). Mobile : label visible à côté de l'icône (pas de survol possible). */
.act-icons{display:flex;gap:5px;flex-wrap:wrap}
/* Grille des 6 actions.
   RÈGLE DE BASE = LE COMPORTEMENT MOBILE (< 681px) : un <div> nu serait en
   display:block et empilerait les boutons verticalement. En dessous de 681px les
   boutons passent en largeur auto avec leur label visible, donc flex + wrap,
   exactement la disposition d'avant. Écrite en règle de base plutôt qu'en
   @media(max-width:680px) : aucune plage de largeur ne peut rester non couverte. */
.act-grid{display:flex;flex-wrap:wrap;gap:5px}
.icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;padding:0;border-radius:8px;cursor:pointer;
  background:var(--card,#fff);border:1px solid var(--line);color:var(--text);
  transition:background .15s,border-color .15s,color .15s}
.icon-btn:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);border-color:var(--accent);color:var(--accent)}
.icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.icon-btn svg{display:block;flex:0 0 auto}
.icon-btn__lbl{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(3px);
  background:#14181b;color:#fff;font-size:.7rem;font-weight:600;white-space:nowrap;
  padding:4px 8px;border-radius:6px;box-shadow:0 6px 18px -6px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s,transform .12s;z-index:30}
.icon-btn:hover .icon-btn__lbl,.icon-btn:focus .icon-btn__lbl,.icon-btn:focus-within .icon-btn__lbl{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
@media(min-width:681px){
  /* Desktop : 3 colonnes fixes -> 3+3 déterministe, indépendant de la largeur de
     la colonne. 3 × 30px + 2 × 5px = 100px (le wrap dépendait de la place dispo). */
  .act-grid{display:grid;grid-template-columns:repeat(3,30px);gap:5px;justify-content:start}
  /* 2e ligne : tooltip EN DESSOUS, sinon il recouvrirait les boutons de la 1re ligne. */
  .act-grid>:nth-child(n+4) .icon-btn__lbl{bottom:auto;top:calc(100% + 6px);
    transform:translateX(-50%) translateY(-3px)}
  .act-grid>:nth-child(n+4):hover .icon-btn__lbl,
  .act-grid>:nth-child(n+4):focus .icon-btn__lbl,
  .act-grid>:nth-child(n+4):focus-within .icon-btn__lbl{transform:translateX(-50%) translateY(0)}
}
@media(max-width:680px){
  .icon-btn{width:auto;padding:6px 11px;gap:7px}
  .icon-btn__lbl{position:static;transform:none;opacity:1;visibility:visible;background:none;color:inherit;box-shadow:none;padding:0;font-size:.82rem;z-index:auto;white-space:normal}
}
/* Mobile : le tableau tenants (7 colonnes) devient une carte par ligne — pas de
   scroll horizontal, lignes courtes. Labels injectés en CSS (pas de data-label). */
@media(max-width:680px){
  .admin-table--tenants{display:block;width:100%}
  .admin-table--tenants thead{display:none}
  .admin-table--tenants tbody,.admin-table--tenants tr,.admin-table--tenants td{display:block}
  .admin-table--tenants tr{border:1px solid var(--line);border-radius:12px;padding:8px 14px;margin:0 0 12px}
  /* Empilé label/valeur (block) : le texte s'enroule toujours dans le conteneur -> aucun débordement. */
  .admin-table--tenants td{border:0;padding:4px 0;text-align:left;overflow-wrap:anywhere;word-break:break-word}
  .admin-table--tenants td>*{max-width:100%}
  .admin-table--tenants td::before{content:attr(data-lbl);display:block;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700;margin-bottom:1px}
  .admin-table--tenants td:nth-of-type(1)::before{content:"Sous-domaine"}
  .admin-table--tenants td:nth-of-type(2)::before{content:"Statut"}
  .admin-table--tenants td:nth-of-type(3)::before{content:"Offre"}
  .admin-table--tenants td:nth-of-type(4)::before{content:"E-mail"}
  .admin-table--tenants td:nth-of-type(5)::before{content:"Revalidation"}
  .admin-table--tenants td:nth-of-type(6)::before{content:"Signalements"}
  .admin-table--tenants td:last-child{display:block;text-align:left;margin-top:6px;padding-top:10px;border-top:1px solid var(--line)}
  .admin-table--tenants td:last-child::before{content:"Actions";display:block;margin-bottom:8px}
}
/* Icône d'action « danger » (corbeille) : même gabarit que les autres, teinte rouge au survol. */
.icon-btn--danger:hover{background:color-mix(in srgb,var(--closed) 14%,transparent);border-color:var(--closed);color:var(--closed)}
.icon-btn--danger:focus-visible{outline-color:var(--closed)}

/* Onglets super-admin (tablist ARIA) — style « pilules », onglet actif nettement distinct. */
.tabs{min-width:0}
.tablist{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;min-width:0}
.tab{appearance:none;background:none;border:1px solid transparent;
  padding:9px 16px;font:inherit;font-weight:600;font-size:.95rem;color:var(--muted);cursor:pointer;
  border-radius:10px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  transition:background .15s,color .15s,border-color .15s}
.tab:hover{color:var(--text);background:color-mix(in srgb,var(--accent) 9%,transparent)}
.tab[aria-selected="true"]{color:var(--on-accent);background:var(--accent);border-color:var(--accent);box-shadow:0 6px 16px -8px var(--accent)}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tab-count{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);
  border-radius:999px;padding:1px 8px;font-size:.78rem;font-weight:700}
.tab[aria-selected="true"] .tab-count{background:rgba(255,255,255,.28);color:var(--on-accent)}
.tabpanel[hidden]{display:none}
.tabpanel:focus-visible{outline:none}
@media(max-width:680px){
  /* Onglets : on WRAPPE (au lieu de nowrap+scroll) — le long onglet passe à la ligne,
     jamais de largeur forcée hors écran. */
  .tablist{flex-wrap:wrap;gap:6px}
  .tab{padding:8px 13px;font-size:.9rem}
  .topbar{flex-wrap:wrap;gap:4px 12px}
}

/* Modale de suppression (overlay centré — n'affecte JAMAIS la grille du tableau) */
.btn--danger{background:var(--closed);color:#fff;border:0;padding:9px 14px;border-radius:9px;font-weight:600;font-size:.9rem;cursor:pointer}
.btn--danger:hover{filter:brightness(.93)}
.btn--danger:disabled{opacity:.5;cursor:not-allowed;filter:none}
.modal-overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(8,16,22,.55)}
.modal-overlay[hidden]{display:none}
.modal{background:var(--card,#fff);color:var(--text);border-radius:16px;padding:22px 22px 20px;
  width:100%;max-width:420px;box-shadow:0 30px 80px -30px rgba(0,0,0,.6);border:1px solid var(--line)}
.modal-title{margin:0 0 10px;font-size:1.1rem;font-weight:700;color:var(--closed)}
.modal p{margin:0 0 14px;font-size:.92rem;line-height:1.5;overflow-wrap:anywhere}
#del-confirm{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--line);border-radius:9px;font-size:15px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px;flex-wrap:wrap}

.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.78rem;font-weight:600}
.pill--active{background:color-mix(in srgb,var(--open) 18%,transparent);color:var(--open)}
.pill--suspended{background:color-mix(in srgb,var(--closed) 16%,transparent);color:var(--closed)}
.pill--pending_email,.pill--pending{background:color-mix(in srgb,var(--automate) 16%,transparent);color:var(--automate)}
.pill--banned{background:#444;color:#fff}

@media(max-width:680px){
  .offers{grid-template-columns:1fr}
  .form-grid{grid-template-columns:minmax(0,1fr)}
}

/* ---- Onglet « Thème » : réglages + aperçu de l'animation de l'apex ---- */
.theme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.theme-grid label{display:flex;flex-direction:column;gap:3px;font-size:.88rem;font-weight:600}
.theme-grid input,.theme-grid select{padding:9px 10px;border:1px solid var(--line);
  border-radius:9px;font:inherit;font-size:.92rem;font-weight:400;background:#fff;color:var(--text)}
@keyframes apPrev{ from{opacity:0;transform:translateY(var(--ap-shift,8px));} to{opacity:1;transform:none;} }
.anim-preview{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:12px;
  background:#fff;padding:26px 20px 16px;min-height:230px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;text-align:center}
.anim-preview .ap-badge{position:absolute;top:10px;left:-30px;transform:rotate(-45deg);
  background:rgba(90,100,112,.9);color:#fff;font-size:.5rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;padding:2px 34px}
.anim-preview .ap-logo{font-weight:800;letter-spacing:-.04em;font-size:2.6rem;line-height:1}
.anim-preview .ap-q{color:#7a1e2b;font-weight:700;font-size:1rem;align-self:flex-start}
.anim-preview .ap-a{color:#7a1e2b;font-weight:700;font-size:1rem;align-self:flex-end}
.anim-preview .ap-cta{display:flex;flex-direction:column;gap:6px;align-items:center;margin-top:4px}
.anim-preview .ap-cta span{font-size:.76rem;color:var(--muted)}
.anim-preview .ap-cta em{background:#7a1e2b;color:#fff;font-style:normal;font-weight:600;
  font-size:.78rem;padding:7px 16px;border-radius:8px}
.anim-preview .ap-foot{font-size:.68rem;color:var(--muted);border-top:1px solid var(--line);
  width:100%;padding-top:8px;margin-top:6px}

/* ---- Colonne « Offre & paiement » (onglet Domaines & e-mail) ---- */
.offer-form{display:grid;gap:4px}
.offer-lbl{font-size:.8rem;color:var(--muted)}
.offer-form select,.offer-form input[type=date]{width:100%;padding:8px;border:1px solid var(--line);
  border-radius:8px;font:inherit;font-size:.85rem;background:#fff;color:var(--text)}
.offer-actions{display:flex;gap:6px;margin-top:6px}
.offer-actions .btn{flex:1 1 auto;justify-content:center}
.offer-cancel{background:var(--card,#fff);border:1px solid var(--line);color:var(--muted)}
.offer-cancel:hover{border-color:var(--accent);color:var(--accent)}
.admin-table--domains td:nth-child(3){width:34%}
.admin-table--domains td:nth-child(4){width:26%}
@media(max-width:680px){ .admin-table--domains td:nth-child(4){width:auto} }

/* ---- Cartes d'offre côté client (admin, lecture seule) ---- */

/* ── Annonce Wero (habillage générique de la plateforme) ─────────────────────
   Même rôle que la version marco : informer sans inviter à cliquer. Le style
   est posé ici et non dans base.css, parce que l'annonce ne concerne que les
   écrans de paiement de la plateforme, jamais une vitrine cliente. */
.wero-teaser {
  margin: 16px 0 0;
  padding: 11px 14px;
  border: 1px dashed var(--line, #cfd8dd);
  border-radius: 8px;
  background: rgba(0, 0, 0, .02);
  font-size: 14px;
  line-height: 1.6;
}
.wero-badge {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--accent, #0e7c7b);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Case « ne pas reconduire » du formulaire de création (marques payantes).
   Case et texte alignés en haut : l'étiquette fait plusieurs lignes, et un
   alignement centré ferait flotter la case au milieu du paragraphe. */
.reconduction {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid var(--line, #cfd8dd);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.55;
  cursor: pointer;
}
.reconduction input { margin-top: 3px; width: 18px; height: 18px; cursor: pointer; }

/* ── Les deux formules de création (marques à essai) ─────────────────────────
   Deux cartes de poids ÉGAL, l'une sous l'autre. Chacune se lit de haut en
   bas : ce qu'on obtient, puis ce qu'on accepte, puis le bouton. L'ordre
   inverse — bouton d'abord — obligeait à cliquer avant d'avoir lu.

   Le bouton payant était en `btn--ghost`, donc effacé à côté du bouton
   d'essai : le choix qui rapporte était le moins visible des deux. Les deux
   sont désormais en `btn--primary`, et c'est la carte qui porte la nuance.

   L'essai reste en premier : c'est l'entrée la moins engageante. */
.formules {
  display: grid;
  grid-template-columns: 1fr;   /* une colonne, toujours — voir la note en bas */
  gap: 18px;
  margin-top: 18px;
}
/* ACCORDÉON : chaque formule est un <details>. « display: flex » sur un
   <details> casse le repli natif — le contenu reste visible fermé — donc on
   remet le flux normal ici et on reporte la mise en colonne sur le contenu,
   via « .formule > *:not(summary) ». Le piège ne se voit pas à la relecture
   du HTML : c'est le CSS qui décide si le repli fonctionne. */
.formule {
  display: block;
  padding: 18px;
  border: 1px solid var(--line, #cfd8dd);
  border-radius: 10px;
  background: var(--card, #fff);
}

/* La carte payante se distingue par un filet d'accent, pas par un bouton plus
   gros : on met en avant sans crier. */
.formule--payer {
  border-color: var(--accent, #0e7c7b);
  box-shadow: inset 0 0 0 1px var(--accent, #0e7c7b);
}

/* Le titre devient la poignée : curseur, marqueur, et la même respiration que
   les <p> qui suivaient l'ancien <h3>. */
.formule > summary.formule-titre {
  cursor: pointer;
  list-style: none;                 /* on dessine notre propre marqueur */
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}
.formule > summary.formule-titre::-webkit-details-marker { display: none; }
.formule > summary.formule-titre::before {
  content: "";
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}
.formule[open] > summary.formule-titre::before {
  transform: rotate(45deg) translate(-1px, -3px);
}
.formule > summary.formule-titre:focus-visible {
  outline: 2px solid var(--accent, #0e7c7b);
  outline-offset: 3px;
  border-radius: 4px;
}
/* L'espacement que « gap: 12px » assurait avant, rendu au contenu déplié. */
.formule[open] > *:not(summary) { margin-top: 12px; }

/* ANIMATION DU DÉPLIAGE, sans une ligne de JavaScript.
   Un <details> s'ouvre d'un coup par défaut : la hauteur saute, et sur un bloc
   de cinq cents pixels ça se voit. Trois choses la rendent animable :
     · « interpolate-size: allow-keywords » autorise une transition VERS
       « auto », que le CSS refusait jusqu'ici ;
     · « ::details-content » désigne le contenu replié, qui n'avait pas de
       sélecteur ;
     · « allow-discrete » fait durer la visibilité le temps de la fermeture,
       sans quoi le contenu disparaîtrait d'un coup avant que la hauteur
       n'ait fini de se réduire.
   Posé sur « .formules » et non sur « :root » : « interpolate-size » s'hérite,
   et rien n'oblige à changer le comportement des animations de tout le site
   pour trois volets.
   0,28 s : la durée déjà employée pour le survol des cartes d'offres.
   Navigateur qui ne connaît pas « ::details-content » : la règle entière est
   ignorée, l'accordéon s'ouvre d'un coup — exactement comme avant. */
.formules { interpolate-size: allow-keywords; }
.formule::details-content {
  block-size: 0;
  overflow: hidden;
  opacity: 0;
  transition: block-size .28s ease, opacity .2s ease, content-visibility .28s allow-discrete;
}
.formule[open]::details-content {
  block-size: auto;
  opacity: 1;
}
/* Mouvement réduit demandé par le système : le volet s'ouvre et se ferme, sans
   la transition. On ne retire pas la fonction, seulement l'animation. */
@media (prefers-reduced-motion: reduce) {
  .formule::details-content { transition: none; }
}

.formule-titre {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
  font-family: var(--font-display, inherit);
}

.formule-note {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted, #5a6b76);
}

/* Le bouton est poussé en bas : les deux cartes n'ont pas la même quantité de
   texte, et sans cela les boutons se retrouvaient à deux hauteurs différentes. */
.formule-action { margin: auto 0 0; padding-top: 4px; }
.formule .btn { width: 100%; text-align: center; }

/* Les cases vivent DANS la carte payante : on annule les marges hautes prévues
   pour un usage isolé, l'espacement est déjà donné par le `gap` de la carte. */
.formule .reconduction,
.formule .cgv-case { margin-top: 0; }

/* L'avertissement sur l'affichage de Stripe. Discret mais lisible : il désamorce
   une contradiction que le client verrait sinon sans explication. */
.formule-avertissement {
  margin: -4px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--accent, #0e7c7b);
  background: rgba(0, 0, 0, .025);
  border-radius: 0 6px 6px 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted, #5a6b76);
}
.formule-avertissement strong { color: var(--ink, #0f1b24); }

/* ── Les cartes restent EMPILÉES à toute largeur ─────────────────────────────
   Décision du 04/09/2026, après deux essais de plage intermédiaire : plus de
   bascule du tout. Chaque carte prend toute la largeur disponible, du mobile
   à l'écran large.

   Aucune media query ici, et c'est le but : il n'y a plus de seuil à retenir,
   plus de largeur où la mise en page change sous les doigts, et plus de carte
   payante comprimée en colonne étroite. Le conteneur .wrap étant de toute
   façon plafonné à --maxw (880 px), une carte ne dépasse jamais cette largeur
   même sur un très grand écran. */
}

/* Bandeau « essai en cours », en tête de l'espace client. */
.essai-bandeau {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--line, #cfd8dd);
  border-left: 4px solid var(--accent, #0e7c7b);
  border-radius: 8px;
  font-size: 14.5px;
  line-height: 1.6;
}
.essai-bandeau .btn { margin-top: 10px; }

/* Case d'acceptation des conditions, sur les écrans qui déclenchent un paiement.
   Jamais pré-cochée : c'est le geste du client qui vaut consentement, pas un
   attribut posé par nous. Case et texte alignés en haut, l'étiquette faisant
   plusieurs lignes. */
.cgv-case {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid var(--line, #cfd8dd);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.55;
  cursor: pointer;
}
.cgv-case input { margin-top: 3px; width: 18px; height: 18px; cursor: pointer; }
.cgv-case a { text-decoration: underline; white-space: nowrap; }

/* ── Défi précédant l'identité de l'éditeur (page /mentions/) ────────────────
   Volontairement sobre : ce n'est pas une étape valorisante du parcours, c'est
   un péage. Il doit se voir, se comprendre et se franchir sans réfléchir. */
.identite-defi {
  margin: 10px 0 0;
  padding: 14px 16px;
  border: 1px dashed var(--line, #cfd8dd);
  border-radius: 8px;
  background: rgba(0, 0, 0, .02);
}
.identite-intro { margin: 0 0 10px; font-size: 14px; line-height: 1.6; color: var(--muted, #5a6b76); }
.identite-q { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 15px; }
.identite-q input {
  padding: 8px 10px;
  border: 1px solid var(--line, #cfd8dd);
  border-radius: 6px;
  font-size: 16px;          /* 16px : en dessous, iOS zoome à la saisie */
  width: 5rem;
}
.identite-err { margin: 10px 0 0; font-size: 14px; color: var(--closed, #cf3b2e); }

.identite-titre { margin: 18px 0 6px; font-size: 1rem; }
.identite-dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(11rem, auto) 1fr;
  gap: .45rem 1.4rem;
  font-size: 15px;
  line-height: 1.6;
}
.identite-dl dt { color: var(--muted, #5a6b76); }
.identite-dl dd { margin: 0; }
@media (max-width: 560px) {
  .identite-dl { grid-template-columns: 1fr; gap: .15rem; }
  .identite-dl dd { margin-bottom: .6rem; }
}

/* Bouton propre à chaque carte d'offre, poussé en bas : les descriptions n'ont
   pas la même longueur, et sans cela les boutons se retrouvaient à trois
   hauteurs différentes. La carte devient une colonne pour que `margin-top:auto`
   ait un effet. */
.offer { display: flex; flex-direction: column; }
.offer > p:not(.offer-action) { margin-bottom: 0; }

/* DEUX classes, et ce n'est pas de la coquetterie : « .offer p{margin:0} »
   (ligne 15) pèse (0,1,1) et l'emportait sur « .offer-action » (0,1,0). Le
   `margin-top:auto` n'a donc JAMAIS été appliqué — margin-top calculé mesuré à
   0px dans le navigateur — et les trois boutons restaient à trois hauteurs.
   Écrire la règle ne suffit pas, il faut qu'elle gagne. */
.offer .offer-action { margin: auto 0 0; padding-top: 14px; }
.offer .offer-action .btn { width: 100%; text-align: center; }

/* Mention de délai sous le prix (offre à instruction manuelle). Même piège de
   spécificité que ci-dessus : « .offer p » l'emporterait sur une seule classe. */
.offer .offer-delai { margin: 0 0 8px; font-size: .82rem; line-height: 1.35; opacity: .72; }

/* SURVOL DES CARTES. Restreint à « .offers--payant », classe posée par la vue
   uniquement quand la marque vend plusieurs offres : 428.lu ne doit rien voir
   changer. Élévation de 3 px et ombre douce — l'ambiance est le papier, pas le
   néon. 0,28 s : perceptible sans traîner.

   POURQUOI PAS « @media (hover: hover) », qui serait le réflexe : le banc
   d'essai headless de ce poste répond `false` à cette requête (mesuré : hover,
   any-hover et pointer:fine tous faux, et `Emulation.setEmulatedMedia` ne les
   force pas). La règle aurait donc été INVÉRIFIABLE ici — annoncée sans preuve.
   On applique donc le survol par défaut et on le neutralise sur le tactile
   RÉEL, qui se reconnaît à la conjonction `hover:none` ET `pointer:coarse`.
   Le banc, lui, n'a pas de pointeur grossier : la mesure reste possible. */
.offers--payant .offer {
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.offers--payant .offer:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .38);
}
/* L'offre mise en avant porte déjà un liseré inset : le réécrire, sinon le
   survol l'effacerait le temps du survol. */
.offers--payant .offer--feature:hover {
  box-shadow: 0 0 0 1px var(--accent) inset, 0 10px 22px -14px rgba(0, 0, 0, .38);
}
/* Écran tactile : un :hover y reste collé après le toucher et laisse une carte
   figée en l'air. On garde le changement de bordure, on retire l'élévation. */
@media (hover: none) and (pointer: coarse) {
  .offers--payant .offer { transition: border-color .28s ease; }
  .offers--payant .offer:hover { transform: none; box-shadow: none; }
  .offers--payant .offer--feature:hover { box-shadow: 0 0 0 1px var(--accent) inset; }
}
/* Mouvement réduit demandé par le système : on garde ce qui informe (la
   bordure), on retire ce qui décore (le déplacement). */
@media (prefers-reduced-motion: reduce) {
  .offers--payant .offer { transition: border-color .28s ease; }
  .offers--payant .offer:hover { transform: none; }
}

/* Séparateur entre les blocs de /mentions/, habillage 428. L'habillage marco a
   déjà le sien (« .m-trait », défini dans brands/marco.css) : on reprend ici la
   même géométrie — un filet court, en dégradé, centré sur sa couleur d'accent —
   pour que les deux marques se lisent pareil sans partager de feuille. */
.doc-trait {
  width: clamp(80px, 22vw, 190px);
  height: 2px;
  margin: clamp(22px, 4vw, 32px) 0 clamp(20px, 4vw, 28px);
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* TAILLE DES BOUTONS D'OFFRE — deux écarts, deux causes distinctes.

   1) DEUX PIXELS, à TOUTES les largeurs, y compris quand les trois tiennent sur
      une ligne : « .btn--ghost » porte « border: 1px solid » et « .btn--primary »
      n'en a pas. Mesuré 48 px contre 50. On rend la bordure du bouton plein
      présente mais transparente — le fond déborde dessous (background-clip vaut
      border-box par défaut), donc rien ne change à l'œil, seule la boîte s'aligne.
      On la pose sur « --primary » seul : écrire la règle sur « .offer-action .btn »
      effacerait le contour visible des deux autres, qui est leur identité.

   2) UNE LIGNE CONTRE DEUX, tant que les cartes sont côte à côte : « Nous écrire »
      tient sur une ligne là où « Essayer 24 h gratuitement » en demande deux. À
      254 px de carte il n'y a pas de largeur pour les mettre tous sur une ligne
      sans rapetisser le texte — on réserve donc DEUX lignes pour les trois, et le
      texte se centre dans le gabarit (« .btn » est déjà un flex centré).
      Uniquement au-dessus de 680 px : en dessous, la grille passe à une colonne,
      les trois tiennent sur une ligne et sont déjà identiques — leur imposer là
      un gabarit de deux lignes ne ferait que des boutons inutilement hauts. */
.offer-action .btn--primary { border: 1px solid transparent; }
@media (min-width: 681px) {
  .offer-action .btn {
    line-height: 1.5;                      /* posé, pas hérité : le calcul en dépend */
    min-height: calc(3em + 26px);          /* 2 lignes + 12+12 de padding + 2 de bordure */
  }
}