/* Odratta : site public (refonte du 06/11/2026 : deux offres à prix fixe, Mon Site par Odratta, page Odratta Studio).
   Blanc, encre marine, un seul accent : le bleu #2E57E7 et ses nuances décidées par Joseph.

   Ordre du fichier :
   1. Jetons (palette, typographie, espacements, rayons, filets)
   2. Base (corps, titres, liens, surfaces du navigateur)
   3. Composants, chacun avec son balisage type en commentaire
   4. Héritage : règles des pages pas encore refaites (à retirer page par page)
   5. Blocs réservés aux pages (offre-site, mon-site, studio, offre-app, domaine-mail, aide-legal, parcours) */

/* ==========================================================================
   1. Jetons
   ========================================================================== */
:root {
  /* Palette */
  --papier: #ffffff;
  --encre: #121a33;          /* texte, filets forts : 17:1 sur blanc */
  --ardoise: #4b5470;        /* texte secondaire : 7,5:1 sur blanc */
  --ardoise-2: #5c6480;      /* gris atténué : légendes, mentions, icônes au repos ; 5,9:1 sur blanc, 5,4:1 sur le gris */
  --filet: #e2e6ef;          /* séparations fines */
  --filet-fort: #c6ccdb;     /* cadres, contrôles au repos */
  --gris-fond: #f5f7fb;      /* seule teinte de section (.section-grise) et fond des zones de service */
  --bleu: #2e57e7;           /* seul accent : boutons, liens, focus, formule mise en avant */
  --bleu-survol: #2549c9;
  --bleu-appui: #1835b3;
  --calque: #eff4ff;         /* fond pâle de l'accent : formule conseillée, survols, pastilles (jamais une section) */
  --calque-2: #dfeaff;
  --bord-bleu: #b5cdff;
  --bleu-texte: #294288;     /* texte bleu foncé : 8,5:1 sur le calque */
  --bleu-nuit: #8dafff;      /* bleu sur fond sombre : 8,3:1 sur la nuit */
  --nuit: #0d1534;           /* section sombre, marine dérivé du bleu */
  --nuit-filet: #26325e;
  --nuit-texte: #b9c3e0;     /* texte secondaire sur la nuit : 10:1 */
  --sur-bleu: #e6edff;       /* texte secondaire sur le bleu : 4,9:1 */

  /* Couleurs de contexte : les composants les lisent, la section sombre les redéfinit. */
  --c-texte: var(--encre);
  --c-texte-2: var(--ardoise);
  --c-filet: var(--filet);
  --c-filet-fort: var(--filet-fort);
  --c-trait: var(--encre);
  --c-accent: var(--bleu);
  --c-fond: var(--papier);

  /* Typographie : six pas, pas un de plus. Titres en Bricolage Grotesque (famille de la marque), texte en Hanken Grotesk. */
  --police-titre: 'Bricolage Grotesque', 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  --police-texte: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --t-1: clamp(2.25rem, 1.55rem + 2.7vw, 3.75rem);    /* 36 à 60 : h1, appel final */
  --t-2: clamp(1.875rem, 1.45rem + 1.2vw, 2.625rem);  /* 30 à 42 : h2, prix, numéros d'article, téléphone */
  --t-3: 1.375rem;                                    /* 22 : h3, mots de la bande */
  --t-4: 1.1875rem;                                   /* 19 : chapeau, questions */
  --t-5: 1.0625rem;                                   /* 17 : texte courant */
  --t-6: 0.9375rem;                                   /* 15 : menu, listes denses, légendes, pied */

  /* Espacements */
  --e-1: 8px;
  --e-2: 16px;
  --e-3: 24px;
  --e-4: 40px;
  --e-5: 64px;
  --e-section: clamp(72px, 8vw, 112px);

  /* Rayons et filets */
  --r-petit: 6px;            /* captures, vignettes, pastilles */
  --r-bouton: 10px;          /* boutons, bascule */
  --r-bloc: 14px;            /* cartouche, cadres de panneau */
  --trait: 1px solid var(--encre);          /* ouvre une liste ou un tableau */
  --trait-fin: 1px solid var(--filet);      /* sépare deux lignes */

  /* Gabarit */
  --largeur: 1320px;
  --marge: clamp(20px, 3.4vw, 48px);
  --haut-entete: 76px;
  --facile: cubic-bezier(0.16, 1, 0.3, 1);

  /* Noms hérités, lus par les pages pas encore refaites et par socle.css */
  --texte-2: var(--ardoise);
  --texte-3: var(--ardoise-2);
  --fond-gris: var(--gris-fond);
  --encre-sombre: var(--nuit);
  --encre-surface: #16204a;
  --encre-filet: var(--nuit-filet);
  --texte-sombre-2: var(--nuit-texte);
  --texte-sombre-3: #9fb0e0;
  --ombre-douce: 0 1px 2px rgb(18 26 51 / 0.05), 0 22px 44px -26px rgb(18 26 51 / 0.3);

  scrollbar-color: var(--filet-fort) var(--papier);
}
@media (max-width: 767px) { :root { --haut-entete: 68px; } }
@media (max-width: 375px) { :root { --marge: 14px; } }

/* ==========================================================================
   2. Base
   ========================================================================== */
html { scroll-padding-top: calc(var(--haut-entete) + 16px); }
body { background: var(--papier); color: var(--encre); font-size: var(--t-5); line-height: 1.6; font-kerning: normal; caret-color: var(--bleu); }
::selection { background: var(--calque-2); color: var(--encre); }
main:focus { outline: none; }
h1, h2, h3, h4 { font-family: var(--police-titre); color: inherit; text-wrap: balance; }
h1 { font-weight: 680; line-height: 1.02; letter-spacing: -0.035em; }
h2 { font-weight: 640; line-height: 1.08; letter-spacing: -0.028em; }
h3, h4 { font-weight: 600; line-height: 1.22; letter-spacing: -0.012em; }
p { text-wrap: pretty; }
sup { font-size: 0.72em; line-height: 0; }
.nombre { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sans-coupure { white-space: nowrap; }

/* Deux styles de lien, pas plus.
   Dans une phrase : <a href="…">…</a>, bleu souligné (règle ci-dessous ; :where la garde faible).
   Autonome, après une phrase ou à côté d'un bouton : <a class="lien-fort">, encre en graisse 600 (§3.1). */
main :where(p, li, dd, td, figcaption, span) > a:where(:not([class])) { color: var(--bleu); text-decoration-color: var(--bord-bleu); text-underline-offset: 0.2em; }
main :where(p, li, dd, td, figcaption, span) > a:where(:not([class])):hover { color: var(--bleu-survol); text-decoration-color: currentColor; }

/* Le « œ » (gros œuvre, cœurs) reste dans le fichier latin déjà chargé : déclarée après polices.css,
   cette face l'emporte pour U+0152-0153 sur la face latin-ext, qui n'est alors plus téléchargée. */
@font-face {
  font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/hanken-grotesk-latin.woff2') format('woff2'); unicode-range: U+0152-0153;
}

/* ==========================================================================
   3. Composants
   ========================================================================== */

/* ---------- 3.1 Boutons et liens ----------
   <a class="btn" href="#formules">Choisir ma formule</a>            bouton plein (bleu), action principale
   <a class="btn btn-contour" href="…">Choisir Hébergement</a>       bouton secondaire, filet gris
   <a class="lien-fort" href="#reprise">Faire reprendre mon site</a> lien autonome : à côté d'un bouton ou après une phrase
   Les boutons (.btn, socle.css) gardent 48 px de haut et prennent ici le rayon de 10 px de l'en-tête.
   À l'appui, le bouton s'enfonce (0,97) en 160 ms ; sur un écran tactile, le survol ne reste pas collé après le geste. */
.btn { border-radius: var(--r-bouton); transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.btn:active:not([aria-disabled="true"]), .entete-client:active { transform: scale(0.97); }
@media (hover: none) { .btn:hover:not(:active) { background: var(--fond); } }
@media (prefers-reduced-motion: reduce) { .btn:active:not([aria-disabled="true"]), .entete-client:active { transform: none; } }
.btn-contour { border-color: var(--filet-fort); }
.lien-fort {
  font-weight: 600; color: var(--encre); white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--filet-fort);
  transition: color 150ms ease, text-decoration-color 150ms ease;
}
.lien-fort:hover { color: var(--bleu); text-decoration-color: currentColor; }
.section-sombre .lien-fort { color: var(--c-texte); text-decoration-color: var(--c-filet-fort); }
.section-sombre .lien-fort:hover { color: var(--c-accent); text-decoration-color: currentColor; }

/* ---------- 3.2 En-tête (aligné sur Odratta Studio) ----------
   Partiel src/partiels/entete.html : logo Odratta, cinq liens texte (Créez votre site, Hébergez votre site, Hébergez
   votre app, Nom de domaine, E-mails), bouton « Odratta Studio » en contour avec un sous-menu des métiers du Studio
   (liens vers studio.odratta.com, ouvert au survol, au clic ou au clavier par site.js), bouton « Panneau d'hébergement »
   bleu de 46 px (44 et en contour sous 768 px, pour laisser l'action principale au contenu), menu mobile sous 1200 px
   (et non 1024 depuis le 06/11/2026 : cinq liens et deux boutons ne tiennent pas plus étroit) avec les mêmes liens,
   le Studio y devenant une ligne qui se déplie (site.js lit la même limite).
   La barre porte .conteneur : le logo tombe sur le bord gauche du contenu, le bouton sur son bord droit. */
.entete { position: sticky; top: 0; z-index: 50; background: var(--papier); border-bottom: var(--trait-fin); }
.entete-barre { display: flex; align-items: center; gap: 10px; height: var(--haut-entete); }
.entete-logo { display: inline-flex; flex: none; margin-right: 18px; border-radius: var(--r-petit); }
.menu { flex: 1; display: flex; align-items: center; min-width: 0; }
.menu-liste { flex: 1; display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.menu-lien {
  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 10px; border-radius: 8px;
  color: var(--ardoise); font-size: var(--t-6); font-weight: 500; white-space: nowrap; text-decoration: none;
  transition: color 150ms ease, background-color 150ms ease;
}
.menu-lien .ic { width: 17px; height: 17px; color: var(--ardoise-2); transition: color 150ms ease; }
.menu-lien:hover { background: var(--calque); color: var(--encre); }
.menu-lien:hover .ic, .menu-lien[aria-current="page"] .ic { color: var(--bleu); }
.menu-lien[aria-current="page"] { color: var(--encre); box-shadow: inset 0 -2px 0 var(--bleu); border-radius: 8px 8px 0 0; }
.entete-actions { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }
/* Odratta Studio : bouton en contour au bord droit du menu, juste avant « Panneau d'hébergement ». */
.menu-studio { position: relative; margin-left: auto; padding-left: 12px; }
.menu-studio-bouton {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 12px 0 16px;
  border: 1px solid var(--filet-fort); border-radius: var(--r-bouton); background: var(--papier); color: var(--encre);
  font: inherit; font-size: var(--t-6); font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.menu-studio-bouton .ic { width: 16px; height: 16px; color: var(--ardoise); transition: transform 200ms var(--facile); }
.menu-studio-bouton:hover, .menu-studio-bouton[aria-expanded="true"] { border-color: var(--encre); }
.menu-studio-bouton[aria-expanded="true"] .ic { transform: rotate(180deg); }
.sous-menu {
  display: none; position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: 376px; padding: 8px;
  border: 1px solid var(--filet); border-radius: var(--r-bloc); background: var(--papier);
  box-shadow: 0 1px 2px rgb(18 26 51 / 0.06), 0 24px 48px -20px rgb(18 26 51 / 0.28);
}
/* Le pont invisible couvre l'écart sous le bouton : la souris passe du bouton au sous-menu sans le refermer. */
.sous-menu::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 12px; }
.sous-menu.est-ouvert { display: block; animation: sous-menu-entree 180ms var(--facile); }
.sous-menu.est-ouvert.sans-animation { animation: none; }
@keyframes sous-menu-entree { from { opacity: 0; transform: translateY(-4px); } }
.sous-menu a { color: var(--encre); text-decoration: none; }
.sous-menu-tete {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; padding: 12px 12px 14px;
  border-bottom: var(--trait-fin); border-radius: 10px 10px 0 0;
}
.sous-menu-tete strong { display: block; font-family: var(--police-titre); font-size: 1.0625rem; font-weight: 600; }
.sous-menu-tete strong + span { display: block; margin-top: 2px; font-size: 0.875rem; color: var(--ardoise); }
.sous-menu-tete .ic { flex: none; width: 18px; height: 18px; color: var(--ardoise); transition: color 150ms ease, transform 200ms var(--facile); }
.sous-menu-tete:hover .ic { color: var(--bleu); transform: translate(2px, -2px); }
.sous-menu-liens { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.sous-menu-liens a { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 10px; transition: background-color 150ms ease; }
.sous-menu-liens a:hover { background: var(--calque); }
.sous-menu-liens .ic { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--bleu); }
.sous-menu-liens strong { display: block; font-size: var(--t-6); font-weight: 600; line-height: 1.3; }
.sous-menu-liens strong + span { display: block; margin-top: 2px; font-size: 0.875rem; line-height: 1.4; color: var(--ardoise); }
.sous-menu-pied { display: flex; gap: 4px; margin-top: 6px; padding-top: 6px; border-top: var(--trait-fin); }
.sous-menu-pied a {
  flex: 1; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px; border-radius: 10px;
  font-size: 0.875rem; font-weight: 600; white-space: nowrap; transition: background-color 150ms ease, color 150ms ease;
}
.sous-menu-pied a:first-child { flex: none; }
.sous-menu-pied a:hover { background: var(--calque); color: var(--bleu-texte); }
.sous-menu-pied .ic { flex: none; width: 17px; height: 17px; color: var(--ardoise); }
@media (prefers-reduced-motion: reduce) {
  .sous-menu.est-ouvert { animation: none; }
  .menu-studio-bouton .ic, .sous-menu-tete .ic { transition: none; }
}
.entete-client {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 16px;
  border: 1px solid var(--bleu); border-radius: var(--r-bouton); background: var(--bleu); color: #fff;
  font-size: var(--t-6); font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none;
  box-shadow: 0 1px 2px rgb(18 26 51 / 0.12);
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.entete-client .ic { width: 19px; height: 19px; }
.entete-client:hover { background: var(--bleu-survol); border-color: var(--bleu-survol); }
.entete-client:active { background: var(--bleu-appui); border-color: var(--bleu-appui); }
.entete-burger {
  display: none; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--filet-fort); border-radius: 8px; background: var(--papier); color: var(--encre); cursor: pointer;
}
.entete-burger:hover { border-color: var(--encre); }
@media (min-width: 1200px) and (max-width: 1439px) {
  .menu-lien { gap: 6px; padding: 0 7px; font-size: 0.875rem; }
  .menu-studio-bouton { padding: 0 10px 0 14px; font-size: 0.875rem; }
}
@media (min-width: 1200px) and (max-width: 1279px) {
  /* Cinq liens et deux boutons sur une ligne : le texte des liens se resserre, l'icône du panneau cède la place. */
  .entete-logo { margin-right: 10px; }
  .menu-lien { padding: 0 6px; }
  .menu-studio { padding-left: 6px; }
  .entete-client { padding-inline: 14px; }
  .entete-client .ic { display: none; }
}
@media (max-width: 1199px) {
  .entete-barre { gap: 12px; }
  .entete-logo { margin-right: 0; }
  .entete-burger { display: inline-grid; }
  .menu {
    position: fixed; inset: var(--haut-menu, var(--haut-entete)) 0 0 0; z-index: 49;
    display: none; flex-direction: column; align-items: stretch; gap: 12px;
    padding: 8px var(--marge) 40px; background: var(--papier); border-top: var(--trait-fin);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .menu.est-ouvert { display: flex; }
  .menu-liste { flex: none; flex-direction: column; align-items: stretch; gap: 0; }
  .menu-liste > li { border-bottom: var(--trait-fin); }
  .menu-studio { margin-left: 0; padding-left: 0; }
  .menu-studio-bouton {
    justify-content: space-between; width: 100%; min-height: 58px; padding: 0 2px; border: 0; border-radius: 0;
    background: transparent; font-size: 1.125rem;
  }
  .menu-studio-bouton .ic { width: 20px; height: 20px; }
  .menu-studio-bouton:hover { color: var(--bleu); }
  .sous-menu { position: static; width: auto; margin: 0 0 14px; padding: 4px; box-shadow: none; }
  .sous-menu::before { content: none; }
  .sous-menu-liens a { padding: 12px 10px; }
  .sous-menu-pied { flex-direction: column; }
  .menu-lien { width: 100%; gap: 14px; height: 58px; padding: 0 2px; border-radius: 0; color: var(--encre); font-size: 1.125rem; font-weight: 600; }
  .menu-lien .ic { width: 20px; height: 20px; }
  .menu-lien:hover { background: transparent; color: var(--bleu); }
  .menu-lien[aria-current="page"] { box-shadow: inset 3px 0 0 var(--bleu); padding-left: 14px; }
  body.menu-ouvert { overflow: hidden; }
}
@media (max-width: 767px) {
  .entete-client { min-height: 44px; padding-inline: 12px; gap: 7px; font-size: 0.875rem; background: var(--papier); color: var(--encre); border-color: var(--filet-fort); box-shadow: none; }
  .entete-client:hover { background: var(--papier); border-color: var(--encre); }
  .entete-client:active { background: var(--calque); border-color: var(--encre); }
  .entete-client .ic { width: 18px; height: 18px; }
}
@media (max-width: 479px) {
  /* « Panneau d'hébergement » reste écrit en entier : l'icône cède la place. */
  .entete-client .ic { display: none; }
}
@media (max-width: 375px) {
  .entete-barre { gap: 8px; }
  .entete-actions { gap: 8px; }
  .entete-burger { width: 40px; height: 40px; }
}
@media (max-width: 339px) {
  .entete-client { padding-inline: 9px; font-size: 0.8125rem; letter-spacing: -0.01em; }
}

/* ---------- 3.3 Figure de capture (cadre) ----------
   Une vraie capture d'un site, dans un cadre d'un filet, sans barre d'adresse dessinée.
   <figure class="capture">
     <div class="cadre"><img src="/assets/img/sites/…-960.webp" srcset="…" sizes="…" width="1280" height="800" alt="…" loading="lazy"></div>
     <figcaption><strong>Nom</strong> <span>Métier, ville</span> <a href="https://…" target="_blank" rel="noopener">domaine.fr<span class="visuellement-cache"> (nouvel onglet)</span></a></figcaption>
   </figure>
   --cadre-ratio règle le recadrage (16 / 10 par défaut, haut de page conservé). */
.capture { min-width: 0; margin: 0; }
.cadre { display: block; overflow: hidden; border: 1px solid var(--c-filet-fort); border-radius: var(--r-petit); background: var(--papier); }
.cadre img { width: 100%; height: auto; aspect-ratio: var(--cadre-ratio, 16 / 10); object-fit: cover; object-position: top; }
.capture figcaption { margin-top: 12px; font-size: var(--t-6); line-height: 1.45; color: var(--c-texte-2); }
.capture figcaption strong { color: var(--c-texte); font-weight: 600; }
.capture figcaption a { color: var(--c-accent); text-underline-offset: 3px; text-decoration-color: currentColor; }

/* ---------- 3.4 Héros d'accueil ----------
   <section class="heros-accueil"><div class="conteneur heros-accueil-grille">
     <h1>…</h1><p class="heros-accueil-texte">…</p><p class="heros-prix">L'hébergement à <strong>17 € HT</strong> par mois…</p>
     <div class="heros-accueil-actions"><a class="btn" href="#formules">Voir les offres</a></div>{{> barre-domaine}}
   </div></section>
   Le titre sur toute la largeur ; dessous, à gauche le texte, les deux prix et le seul bouton plein du héros, à droite
   la recherche de domaine (à partir de 1024 px ; en une colonne en dessous). La bande des quatre mots suit. */
.heros-accueil { padding: clamp(36px, 4.4vw, 64px) 0 clamp(44px, 4.8vw, 72px); overflow-x: clip; }
.heros-accueil h1 { max-width: 14em; font-size: var(--t-1); font-weight: 680; letter-spacing: -0.025em; }
.heros-accueil-texte { max-width: 50ch; margin: 18px 0 0; font-size: var(--t-4); line-height: 1.5; color: var(--ardoise); }
.heros-accueil-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 28px; }
.heros-accueil-actions + .barre-domaine { margin-top: 36px; }
@media (min-width: 1024px) {
  .heros-accueil-grille {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: var(--e-5);
    grid-template-areas: "titre titre" "texte domaine" "prix domaine" "actions domaine";
  }
  .heros-accueil-grille > h1 { grid-area: titre; }
  .heros-accueil-texte { grid-area: texte; }
  .heros-accueil .heros-prix { grid-area: prix; }
  .heros-accueil-actions { grid-area: actions; }
  /* La recherche de domaine, dans un cadre pâle, tient la moitié droite ; son bas s'aligne sur le bouton. */
  .heros-accueil .heros-accueil-actions + .barre-domaine {
    grid-area: domaine; align-self: end; max-width: none; margin-top: 0;
    padding: 26px 28px 28px; border-radius: var(--r-bloc); background: var(--calque);
  }
  .heros-accueil .barre-domaine-titre { margin-bottom: 12px; font-family: var(--police-titre); font-size: var(--t-4); letter-spacing: -0.01em; }
  .heros-accueil .barre-domaine .champ-domaine { border-color: var(--bord-bleu); }
}
/* Le prix d'appel, sous le texte : le montant dans la police des titres, le reste en texte courant. */
.heros-prix { max-width: 60ch; margin: 22px 0 0; font-size: var(--t-4); color: var(--ardoise); }
/* Accueil : deux prix dans la même phrase, au pas t-3 pour qu'elle se lise d'une traite. */
.heros-accueil .heros-prix { max-width: 52em; line-height: 1.5; }
.heros-accueil .heros-prix strong { font-size: var(--t-3); letter-spacing: -0.015em; }
.heros-prix strong { font-family: var(--police-titre); font-size: var(--t-2); font-weight: 640; letter-spacing: -0.025em; color: var(--encre); white-space: nowrap; }

/* ---------- 3.5 Héros de page intérieure ----------
   <section class="heros-produit"><div class="conteneur">
     <nav aria-label="Fil d'Ariane"><ol class="fil-ariane"><li><a href="/">Accueil</a></li><li aria-current="page">…</li></ol></nav>
     <div class="heros-produit-grille"><div><h1>…</h1><p class="heros-texte">…</p><div class="heros-actions">…</div></div>
     <div>…une fiche, une capture ou une liste à filets…</div></div>
   </div></section>
   La classe .fil-ariane se pose sur l'<ol>, pas sur le <nav>. Deux colonnes égales sur toutes les pages,
   calées en haut : le titre tombe à la même hauteur d'une page à l'autre. Sous 600 px, le bouton principal
   prend toute la largeur et le lien secondaire passe dessous (accueil compris). */
.heros-produit { padding: clamp(28px, 4vw, 52px) 0 clamp(56px, 6vw, 88px); background: var(--papier); border-bottom: var(--trait-fin); }
.heros-produit-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.heros-produit h1 { max-width: 15ch; font-size: var(--t-1); }
.heros-texte { max-width: 36em; margin: 20px 0 0; font-size: var(--t-4); line-height: 1.55; color: var(--ardoise); }
.heros-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 28px; }
.fil-ariane { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 24px; padding: 0; list-style: none; font-size: var(--t-6); color: var(--ardoise-2); }
.fil-ariane li { display: inline-flex; align-items: center; gap: 6px; }
.fil-ariane li + li::before { content: '/'; color: var(--filet-fort); }
.fil-ariane a { text-decoration: none; }
.fil-ariane a:hover { text-decoration: underline; color: var(--bleu); }
@media (max-width: 899px) { .heros-produit-grille { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) { :is(.heros-produit, .heros-accueil, .perdu) :is(.heros-actions, .heros-accueil-actions) .btn { width: 100%; } }

/* ---------- 3.6 Bande des quatre mots (demande de Joseph, 02/11) ----------
   Juste sous le héros, mots et emojis imposés ; bande claire entre deux filets, aucun mouvement, 2 × 2 sous 800 px.
   <section class="bande" aria-label="…"><ul class="conteneur bande-liste">
     <li><img src="/assets/img/emojis/twemoji-1f1eb-1f1f7-20261106.svg" width="32" height="32" alt=""><span class="bande-mot">Souverain</span><span class="bande-preuve">…</span></li> …
   </ul></section> */
.bande { background: var(--papier); color: var(--encre); --focus: var(--bleu); border-block: 1px solid var(--filet); }
.bande-liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block: 0; padding: 0; list-style: none; }
.bande-liste li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; align-content: start; padding: 18px 20px 20px; }
.bande-liste li + li { border-left: 1px solid var(--filet); }
.bande-liste li:first-child { padding-left: 0; }
.bande-liste img { grid-row: 1 / span 2; width: 32px; height: 32px; }
.bande-mot { font-family: var(--police-titre); font-size: var(--t-3); font-weight: 620; line-height: 1.15; letter-spacing: -0.015em; }
.bande-preuve { font-size: var(--t-6); line-height: 1.35; color: var(--ardoise); }
@media (max-width: 1100px) { .bande-liste li { padding-inline: 16px; column-gap: 12px; } }
@media (max-width: 799px) {
  .bande-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bande-liste li { padding: 16px 10px 18px 14px; column-gap: 10px; align-items: start; }
  .bande-liste li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .bande-liste li:nth-child(n + 3) { border-top: 1px solid var(--filet); }
  .bande-liste img { width: 26px; height: 26px; margin-top: 2px; }
  .bande-mot { font-size: var(--t-4); }
  .bande-preuve { font-size: 0.875rem; }
}

/* ---------- 3.7 Section standard ----------
   <section class="section" aria-labelledby="t"><div class="conteneur">
     <div class="entete-section"><h2 class="titre-section" id="t">…</h2><p>Chapeau.</p></div>
     …
   </div></section>
   Variantes : .section-grise (la seule teinte de section), .section-filet (filet en tête), .section-sombre (§3.11).
   Les titres se calent à gauche ; l'espace au-dessus d'un titre est toujours plus grand qu'en dessous.
   Grille : 12 colonnes et deux découpes seulement. « Titre à gauche, contenu à droite » : 1 / span 5 puis 7 / -1
   (seconde colonne à 732 px sur un écran de 1440). Héros : deux moitiés égales (§3.5). */
.section { padding: var(--e-section) 0; }
.section-grise { background: var(--gris-fond); }
.section-filet { border-top: var(--trait-fin); }
.titre-section { font-size: var(--t-2); }
.entete-section { max-width: 760px; margin: 0 0 48px; }
.entete-section > p { max-width: 60ch; margin: 16px 0 0; font-size: var(--t-4); line-height: 1.55; color: var(--c-texte-2); }
.entete-section > .btn { margin-top: 28px; }
.chapeau { max-width: 60ch; font-size: var(--t-4); line-height: 1.55; color: var(--c-texte-2); }

/* ---------- 3.8 Les offres ----------
   Partiel src/partiels/formules.html (accueil, tarifs) : deux cartes dans un même cadre à filet d'encre, l'une sur papier
   (offre-hebergement.html), l'autre sur nuit (offre-mon-site.html), puis .formules-pied. Hébergez votre site n'inclut que
   la première : <div class="formules formules-une">{{> offre-hebergement}}</div>.
   <article class="formule formule-nuit" id="formule-mon-site">
     <h3>Mon Site par Odratta</h3><p class="formule-accroche">…</p><p class="formule-vision">…</p><p class="formule-pour">…</p>
     <p class="formule-prix"><span class="formule-chiffre">47 €</span> <span class="formule-unite">HT par mois</span></p>
     <p class="formule-equivalent">soit 56,40 € TTC par mois</p>
     <a class="btn" href="/creez-votre-site/">Créer mon site</a><p class="formule-note">…</p>
     <ul class="formule-liste"><li><strong>Un site</strong><span>…</span></li>…</ul>
   </article>
   Le prix est l'élément le plus gros de la carte ; le bouton le suit, la note de réassurance colle au bouton. */
.formules {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border: var(--trait); border-radius: var(--r-bloc); overflow: hidden;
}
.formules-une { grid-template-columns: minmax(0, 1fr); max-width: 600px; }
.formule { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 36px 40px 40px; background: var(--c-fond); color: var(--c-texte); scroll-margin-top: 120px; }
.formule + .formule { border-left: var(--trait-fin); }
.formule:target { box-shadow: inset 0 0 0 2px var(--c-accent); }
.formule h3 { font-size: var(--t-3); }
.formule-accroche { margin: 14px 0 0; font-family: var(--police-titre); font-size: var(--t-4); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.formule-vision { max-width: 60ch; margin: 6px 0 0; font-size: var(--t-5); line-height: 1.5; color: var(--c-texte-2); }
.formule-pour { max-width: 60ch; margin: 14px 0 0; font-size: var(--t-6); line-height: 1.5; color: var(--c-texte-2); }
.formule-prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 26px 0 0; }
.formule-chiffre { font-family: var(--police-titre); font-size: var(--t-1); font-weight: 640; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.formule-unite { font-size: var(--t-6); font-weight: 500; }
.formule-equivalent { margin: 8px 0 0; font-size: var(--t-6); color: var(--c-texte-2); font-variant-numeric: tabular-nums; }
.formule .btn { width: 100%; min-height: 52px; margin-top: 24px; }
.formule-note { margin: 10px 0 0; font-size: var(--t-6); line-height: 1.45; color: var(--c-texte-2); }
.formule-liste { margin: 26px 0 0; padding: 0; list-style: none; font-size: var(--t-6); line-height: 1.45; }
.formule-liste li { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--c-filet); }
.formule-liste strong { font-weight: 650; }
.formule-liste span { color: var(--c-texte-2); }
.formules-pied { max-width: 72ch; margin: 18px 0 0; font-size: var(--t-6); color: var(--ardoise-2); }
/* Côte à côte, les deux cartes partagent leurs lignes : le prix, le bouton et la liste tombent à la même hauteur. */
@supports (grid-template-rows: subgrid) {
  .formules { grid-template-rows: repeat(9, auto); }
  .formule { display: grid; grid-row: span 9; grid-template-rows: subgrid; align-content: start; }
  .formule > * { align-self: start; }
  .formule-prix { align-self: end; }
}
/* La carte de nuit : contexte sombre (§3.11) et bouton blanc, seule carte mise en avant, par sa surface. */
.formule-nuit .btn { --fond: #fff; --texte: var(--encre); --fond-survol: var(--calque-2); --fond-appui: var(--bord-bleu); border-color: #fff; }
.formule-nuit .formule-chiffre { color: #fff; }
@media (max-width: 859px) {
  .formules { grid-template-columns: minmax(0, 1fr); }
  .formule + .formule { border-left: 0; border-top: var(--trait-fin); }
}
@media (max-width: 599px) {
  .formule { padding: 28px 20px 32px; }
}

/* ---------- 3.9 Bande « Hébergez votre app » : un parcours en trois temps ----------
   <section class="bande-app" aria-labelledby="titre-app">
     <div><h2 id="titre-app">Hébergez votre app</h2><p>App métier, espace client ou outil interne : …</p></div>
     <p class="bande-app-devis"><strong>Sur devis</strong><span>proposition chiffrée avant tout engagement</span></p>
     <a class="btn btn-contour" href="/hebergez-votre-app/">Voir l'offre app</a>
   </section> */
.bande-app {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) auto; align-items: center; gap: 20px 40px;
  margin-top: 56px; padding: 28px 0; border-top: var(--trait); border-bottom: var(--trait-fin);
}
.bande-app :is(h2, h3) { font-size: var(--t-3); }
.bande-app p { margin: 6px 0 0; max-width: 60ch; font-size: var(--t-6); color: var(--ardoise); }
.bande-app .bande-app-devis { display: grid; gap: 2px; margin: 0; padding-left: 32px; border-left: var(--trait-fin); }
.bande-app-devis strong { font-family: var(--police-titre); font-size: var(--t-3); font-weight: 620; line-height: 1.15; letter-spacing: -0.015em; color: var(--encre); }
@media (max-width: 1023px) {
  .bande-app { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .bande-app .bande-app-devis { padding: 14px 0 0; border-left: 0; border-top: var(--trait-fin); }
  .bande-app .btn { justify-self: start; }
}
@media (max-width: 599px) { .bande-app .btn { width: 100%; } }
/* La troisième marche, sous les deux offres à prix : Odratta Studio, sur proposition (partiel marche-studio.html). */
.marche-studio { margin-top: 28px; }

/* ---------- 3.11 Section sombre ----------
   Une seule par page. Les composants qui la lisent (fiche, atouts, liste à filets) passent seuls en clair sur marine.
   <section class="section section-sombre">…</section> */
.section-sombre, .formule-nuit {
  --c-texte: #fff; --c-texte-2: var(--nuit-texte); --c-filet: var(--nuit-filet); --c-filet-fort: rgb(141 175 255 / 0.42);
  --c-trait: var(--bleu-nuit); --c-accent: var(--bleu-nuit); --c-fond: var(--nuit); --focus: var(--bleu-nuit);
  background: var(--nuit); color: #fff;
}
.section-sombre a:where(:not([class])), .formule-nuit a:where(:not([class])) { color: var(--bleu-nuit); }

/* ---------- 3.12 Fiche technique ----------
   <div class="fiche"><dl><div><dt>Le prix</dt><dd>…</dd></div>…</dl></div> */
.fiche h3 { padding-bottom: 12px; font-size: var(--t-3); border-bottom: 1px solid var(--c-trait); }
.fiche dl { margin: 0; }
.fiche dl > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--c-filet); }
.fiche dt { padding-top: 2px; font-size: var(--t-6); color: var(--c-texte-2); }
.fiche dd { margin: 0; font-family: var(--police-titre); font-size: var(--t-5); font-weight: 500; line-height: 1.45; letter-spacing: -0.005em; color: var(--c-texte); }
@media (max-width: 479px) { .fiche dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* ---------- 3.15 Liste à filets ----------
   <ul class="liste-filets"><li><strong>Titre court</strong><span>Précision.</span></li>…</ul> */
.liste-filets { margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--c-trait); }
.liste-filets li { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--c-filet); color: var(--c-texte); }
.liste-filets strong { font-weight: 600; }
.liste-filets span { font-size: var(--t-6); color: var(--c-texte-2); }

/* ---------- 3.15 bis Tout est compris (partiel src/partiels/atouts.html) ----------
   <ul class="atouts"><li>{{i:globe}}<h3>Nom de domaine compris</h3><p>…</p></li>…</ul>
   Huit points en quatre colonnes, un filet au-dessus de chacun ; l'icône prend l'accent du contexte (bleu, ou bleu nuit sur la section sombre). */
.atouts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px var(--e-3); margin: 0; padding: 0; list-style: none; }
.atouts li { padding-top: 20px; border-top: 1px solid var(--c-filet-fort); }
.atouts .ic { width: 24px; height: 24px; color: var(--c-accent); }
.atouts h3 { margin-top: 14px; font-size: var(--t-4); color: var(--c-texte); }
.atouts p { margin: 6px 0 0; max-width: 30ch; font-size: var(--t-6); line-height: 1.5; color: var(--c-texte-2); }
@media (max-width: 1023px) { .atouts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .atouts { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* ---------- 3.16 Étapes (une vraie séquence) ----------
   <ol class="etapes"><li><h3>Titre</h3><p>…</p></li>…</ol>
   La reprise du site en quatre étapes est un partiel unique (src/partiels/reprise-etapes.html), inclus partout.
   Le numéro vient du compteur CSS ; un trait (le filet fort) relie les étapes sur ordinateur. */
.etapes { counter-reset: etape; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.etapes > li { counter-increment: etape; position: relative; padding: 0 28px 0 0; }
.etapes > li::before {
  content: counter(etape); position: relative; z-index: 1; display: grid; place-items: center;
  width: 36px; height: 36px; margin-bottom: 16px; border: 1.5px solid var(--c-accent); border-radius: 50%; background: var(--c-fond);
  font-family: var(--police-titre); font-size: 1rem; font-weight: 600; line-height: 1; color: var(--c-accent); font-variant-numeric: tabular-nums;
}
.etapes > li::after { content: ''; position: absolute; top: 18px; left: 44px; right: 8px; height: 1.5px; background: var(--c-filet-fort); }
.etapes > li:last-child::after { display: none; }
.etapes h3 { margin-bottom: 6px; font-size: var(--t-4); }
.etapes p { margin: 0; font-size: var(--t-6); line-height: 1.5; color: var(--c-texte-2); }
.etapes h3 + p { color: var(--c-texte-2); }
.etapes > li > p:only-child { color: var(--c-texte); }
@media (max-width: 899px) {
  .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .etapes > li:nth-child(2n)::after { display: none; }
}
@media (max-width: 559px) {
  .etapes { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .etapes > li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 16px; align-content: start; padding: 0 0 22px; }
  .etapes > li::before { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
  .etapes > li > * { grid-column: 2; }
  .etapes > li > :first-child { margin-top: 6px; }
  .etapes > li::after, .etapes > li:nth-child(2n)::after { display: block; top: 40px; bottom: 4px; left: 17px; right: auto; width: 1.5px; height: auto; }
  .etapes > li:last-child::after { display: none; }
}

/* ---------- 3.17 Coordonnées et reprise ----------
   <dl class="contacts"><div class="contacts-principal"><dt>{{i:mail}}E-mail</dt><dd><a href="mailto:contact@odratta.com">contact@odratta.com</a></dd></div>…</dl>
   (Assistance, serveur privé) ; <p class="reprise-note"> sous les étapes de la reprise. */
.contacts { margin: 6px 0 0; border-top: var(--trait); }
.contacts > div { display: grid; gap: 2px; padding: 14px 0 16px; border-bottom: var(--trait-fin); }
.contacts dt { display: flex; align-items: center; gap: 8px; font-size: var(--t-6); color: var(--ardoise); }
.contacts dt .ic { width: 16px; height: 16px; }
.contacts dd { margin: 0; font-size: var(--t-5); font-weight: 500; overflow-wrap: anywhere; }
.contacts dd a { color: var(--encre); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--filet-fort); }
.contacts dd a:hover { color: var(--bleu); text-decoration-color: currentColor; }
.contacts .contacts-principal dd { font-family: var(--police-titre); font-size: var(--t-2); font-weight: 620; line-height: 1.15; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow-wrap: normal; }
.contacts .contacts-principal dd a { text-decoration-thickness: 2px; text-underline-offset: 7px; }
@media (max-width: 419px) { .contacts .contacts-principal dd { font-size: var(--t-3); } }
.reprise-note { margin: 22px 0 0; font-size: var(--t-6); color: var(--ardoise); }

/* ---------- 3.18 Vous restez libre (ce que garantissent les conditions, sans numéro d'article) ----------
   <ul class="promesses"><li><h3>Votre domaine est à vous</h3><p>…</p></li>…</ul><p class="promesses-source"><a class="lien-fort">…</a></p>
   Trois engagements côte à côte (accueil, Odratta Studio), un filet d'encre au-dessus de chacun. */
.promesses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--e-3); margin: 40px 0 0; padding: 0; list-style: none; }
.promesses li { padding: 20px 0 0; border-top: 1px solid var(--c-trait); }
.promesses h3 { font-size: var(--t-3); }
.promesses p { margin: 8px 0 0; max-width: 32ch; font-size: var(--t-6); color: var(--c-texte-2); }
.promesses-source { margin: 32px 0 0; font-size: var(--t-6); }
@media (max-width: 799px) { .promesses { grid-template-columns: minmax(0, 1fr); row-gap: 24px; } }
.entete-section + .promesses { margin-top: 0; }

/* ---------- 3.19 Questions fréquentes ----------
   <div class="faq"><div class="faq-tete"><h2 class="titre-section">…</h2><p>…</p></div>
   <div class="faq-liste"><details><summary>Question ?{{i:plus}}</summary><p>Réponse.</p></details>…</div></div> */
.faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-3); align-items: start; }
.faq-tete { grid-column: 1 / span 5; position: sticky; top: calc(var(--haut-entete) + 32px); }
.faq-tete p { margin: 16px 0 0; color: var(--ardoise); }
.faq-tete p a { white-space: nowrap; }
.faq-liste { grid-column: 7 / -1; border-top: var(--trait); }
.faq-liste details { border-bottom: var(--trait-fin); }
.faq-liste summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 20px 0;
  font-family: var(--police-titre); font-size: var(--t-4); font-weight: 600; line-height: 1.35; letter-spacing: -0.008em;
  list-style: none; cursor: pointer; transition: color 150ms ease;
}
.faq-liste summary::-webkit-details-marker { display: none; }
.faq-liste summary:hover { color: var(--bleu); }
.faq-liste summary .ic { flex: none; margin-top: 3px; color: var(--ardoise); transition: transform 220ms var(--facile), color 150ms ease; }
.faq-liste summary:hover .ic { color: var(--bleu); }
.faq-liste details[open] summary .ic { transform: rotate(45deg); color: var(--encre); }
.faq-liste summary:focus-visible { outline-offset: 2px; }
.faq-liste details p { max-width: 64ch; margin: 0; padding: 0 48px 22px 0; color: var(--ardoise); }
.faq-liste details p + p { margin-top: -10px; }
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .faq-liste { interpolate-size: allow-keywords; }
    .faq-liste details::details-content { block-size: 0; overflow: clip; transition: block-size 280ms var(--facile), content-visibility 280ms allow-discrete; }
    .faq-liste details[open]::details-content { block-size: auto; }
  }
}
@media (max-width: 1023px) {
  .faq { display: block; }
  .faq-tete { position: static; }
  .faq-liste { margin-top: 32px; }
  .faq-liste summary { font-size: var(--t-5); }
  .faq-liste details p { padding-right: 0; }
}

/* ---------- 3.20 Appel final (surface bleue, anneau de la marque) ----------
   <section class="appel"><div class="conteneur appel-interieur"><h2>…</h2><p>…</p>
   <div class="appel-actions"><a class="btn" href="/panier/?formule=assistance">Commander l'hébergement</a>
   <a class="btn btn-contour" href="mailto:contact@odratta.com">{{i:mail}}Nous écrire</a></div></div></section>
   Dans .appel, .btn devient blanc et .btn-contour un filet blanc. L'anneau (::before) est défini plus bas, avec la connexion. */
.appel { padding: clamp(72px, 8vw, 112px) 0; background: var(--bleu); color: #fff; --focus: #fff; --anneau-x: 100%; }
.appel-interieur { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0 64px; align-items: end; }
.appel-interieur > h2 { grid-row: 1 / span 3; align-self: center; }
.appel-interieur > :not(h2) { grid-column: 2; }
.appel h2 { max-width: 13ch; font-size: var(--t-1); line-height: 1.02; letter-spacing: -0.035em; color: #fff; }
.appel p { max-width: 52ch; margin: 0; font-size: var(--t-4); color: var(--sur-bleu); }
.appel-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.appel .btn { --fond: #fff; --texte: var(--bleu-appui); --fond-survol: var(--calque); --fond-appui: var(--calque-2); border-color: transparent; }
.appel .btn-contour { --fond: transparent; --texte: #fff; --fond-survol: rgb(255 255 255 / 0.1); --fond-appui: rgb(255 255 255 / 0.16); border-color: rgb(255 255 255 / 0.6); font-variant-numeric: tabular-nums; }
.appel .btn-contour:hover { border-color: #fff; }
.appel p a { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgb(255 255 255 / 0.6); }
.appel p a:hover { text-decoration-color: #fff; }
@media (max-width: 899px) {
  .appel { --anneau-x: 86%; --anneau-l: 56cqw; padding-bottom: calc(28vw + 32px); }
  .appel-interieur { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .appel-interieur > h2 { grid-row: auto; margin-bottom: 18px; }
  .appel-interieur > :not(h2) { grid-column: auto; }
}
@media (max-width: 599px) { .appel-actions .btn { width: 100%; } }

/* ---------- 3.21 Pied en cartouche ----------
   Partiel src/partiels/pied.html. Comme le cartouche d'un plan : la marque, trois colonnes de liens,
   puis une ligne d'identité en cases (société, SIRET, TVA, e-mail, paiement). Sur mobile, plus de cadre. */
.pied { padding: 72px 0 40px; border-top: var(--trait-fin); font-size: var(--t-6); color: var(--encre); }
.cartouche {
  display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 2.6fr) minmax(0, 3fr) minmax(0, 3fr) minmax(0, 3.2fr);
  border: 1px solid var(--encre); border-radius: var(--r-bloc); overflow: hidden;
}
.cartouche-marque { grid-column: span 2; padding: 26px 26px 28px; }
.cartouche-marque .marque-hosting { width: 130px; }
.cartouche-marque p { max-width: 40ch; margin: 16px 0 0; color: var(--ardoise); line-height: 1.55; }
.cartouche-marque a { color: var(--encre); text-underline-offset: 3px; text-decoration-color: var(--filet-fort); }
.cartouche-marque a:hover { color: var(--bleu); text-decoration-color: currentColor; }
/* Pastille Odratta Studio : le logo officiel blanc sur noir, comme le fichier fourni par Joseph, vers studio.odratta.com. */
.cartouche-marque .pastille-studio {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 20px; padding: 7px 16px 7px 8px;
  border-radius: 999px; background: #000; color: #fff; text-decoration: none;
  transition: background-color 160ms ease, transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pastille-studio img { flex: none; width: auto; height: 40px; }
.pastille-studio span { padding-left: 12px; border-left: 1px solid rgb(255 255 255 / 0.26); font-size: 0.875rem; font-weight: 600; line-height: 1.25; }
.pastille-studio .ic { flex: none; width: 16px; height: 16px; color: rgb(255 255 255 / 0.72); transition: transform 200ms var(--facile), color 150ms ease; }
.cartouche-marque .pastille-studio:hover { background: #1f1f1f; color: #fff; }
.pastille-studio:hover .ic { color: #fff; transform: translate(2px, -2px); }
.pastille-studio:active { transform: scale(0.98); }
@media (prefers-reduced-motion: reduce) { .pastille-studio, .pastille-studio .ic { transition: none; } .pastille-studio:active { transform: none; } }
.cartouche-col { padding: 26px 24px 28px; border-left: var(--trait-fin); }
.cartouche-titre { margin: 0; font-weight: 650; color: var(--encre); }
.cartouche-col ul { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.cartouche-col a { color: var(--ardoise); text-decoration: none; white-space: nowrap; }
.cartouche-col a:hover { color: var(--bleu); text-decoration: underline; text-underline-offset: 3px; }
.cartouche-identite { display: contents; }
.cartouche-identite > div { padding: 14px 24px 16px; border-top: var(--trait); border-left: var(--trait-fin); }
.cartouche-identite > div:first-child { border-left: 0; padding-left: 26px; }
.cartouche-identite dt { font-size: 0.8125rem; color: var(--ardoise-2); }
.cartouche-identite dd { margin: 2px 0 0; font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums; }
.cartouche-identite a { color: var(--encre); text-decoration: none; }
.cartouche-identite a:hover { color: var(--bleu); text-decoration: underline; text-underline-offset: 3px; }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; margin-top: 18px; font-size: 0.8125rem; color: var(--ardoise-2); }
.pied-bas p { margin: 0; }
@media (max-width: 1023px) {
  .cartouche { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cartouche-marque { grid-column: 1 / -1; border-bottom: var(--trait-fin); }
  .cartouche-col:nth-child(2) { border-left: 0; }
  .cartouche-identite > div:nth-child(4) { border-left: 0; padding-left: 26px; }
  .cartouche-identite > div:nth-child(n + 4) { border-top: var(--trait-fin); }
  .cartouche-paiement { grid-column: span 2; }
}
@media (max-width: 679px) {
  .pied { padding: 56px 0 32px; }
  .cartouche { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 0; border-top: var(--trait); border-radius: 0; overflow: visible; }
  .cartouche-marque { padding: 22px 0 24px; }
  .cartouche-col { padding: 20px 12px 22px 0; border-left: 0; }
  .cartouche-col:nth-child(3) { padding-left: 16px; border-left: var(--trait-fin); }
  .cartouche-col:nth-child(4) { grid-column: 1 / -1; border-top: var(--trait-fin); }
  .cartouche-identite > div:nth-child(n) { padding: 12px 12px 14px 0; border-left: 0; border-top: var(--trait-fin); }
  .cartouche-identite > div:nth-child(2), .cartouche-identite > div:nth-child(4) { padding-left: 16px; border-left: var(--trait-fin); }
  .cartouche-identite > div:nth-child(1), .cartouche-identite > div:nth-child(2) { border-top: var(--trait); }
  .cartouche-paiement { grid-column: 1 / -1; border-bottom: var(--trait-fin); }
}
/* Sous 420 px, les colonnes de liens passent en une seule : un libellé du pied ne se coupe jamais. */
@media (max-width: 419px) {
  .cartouche-col, .cartouche-col:nth-child(3) { grid-column: 1 / -1; padding: 18px 0 20px; border-left: 0; }
  .cartouche-col:nth-child(n + 3) { border-top: var(--trait-fin); }
}
@media (max-width: 359px) {
  .cartouche { grid-template-columns: minmax(0, 1fr); }
  .cartouche-identite > div:nth-child(n) { padding-left: 0; border-left: 0; }
  .cartouche-identite > div:nth-child(2) { border-top: var(--trait-fin); }
}

/* ---------- 3.22 Accueil : réglages propres à la page ---------- */
.page-accueil #formules { padding-bottom: var(--e-5); }

/* ---------- 3.23 Recherche de domaine du héros (partiel barre-domaine.html) ----------
   Envoie en GET vers /nom-de-domaine/?domaine=…, où site.js lance la vérification auprès des registres.
   <div class="barre-domaine"><label class="barre-domaine-titre" for="domaine-barre">…</label>
   <form class="champ-domaine" action="/nom-de-domaine/" method="get" role="search">{{i:search}}<input …><button class="btn btn-petit">Vérifier</button></form></div> */
.barre-domaine { max-width: 640px; margin-top: 28px; }
.barre-domaine-titre { display: block; margin: 0 0 8px; font-size: var(--t-6); font-weight: 600; color: var(--encre); }
.barre-domaine .champ-domaine {
  max-width: none; height: 60px; padding: 0 6px 0 18px;
  border: 1px solid var(--filet-fort); border-radius: var(--r-bouton); background: var(--papier);
  box-shadow: 0 1px 2px rgb(18 26 51 / 0.06);
}
.barre-domaine .champ-domaine:focus-within { border-color: var(--bleu); box-shadow: 0 1px 2px rgb(18 26 51 / 0.06); }
.barre-domaine .champ-domaine:has(input:focus-visible) { outline: 3px solid var(--bleu); outline-offset: 3px; }
.barre-domaine .champ-domaine > .ic { color: var(--ardoise-2); }
.barre-domaine .champ-domaine input { padding: 0 12px; color: var(--encre); font-size: max(16px, var(--t-5)); }
.barre-domaine .champ-domaine input::placeholder { color: var(--ardoise-2); opacity: 1; }
.barre-domaine .champ-domaine .btn { min-height: 48px; padding: 0 22px; border-radius: 7px; font-size: var(--t-6); }
@media (hover: hover) and (pointer: fine) { .barre-domaine .champ-domaine:hover { border-color: var(--ardoise-2); } }
@media (max-width: 479px) {
  .barre-domaine .champ-domaine { flex-wrap: wrap; height: auto; padding: 0; border: 0; box-shadow: none; background: transparent; }
  .barre-domaine .champ-domaine:focus-within { box-shadow: none; }
  .barre-domaine .champ-domaine:has(input:focus-visible) { outline: 0; }
  .barre-domaine .champ-domaine > .ic { position: absolute; top: 18px; left: 16px; pointer-events: none; }
  .barre-domaine .champ-domaine input {
    flex: 1 1 100%; height: 56px; padding: 0 14px 0 46px;
    border: 1px solid var(--filet-fort); border-radius: var(--r-bouton); background: var(--papier);
  }
  .barre-domaine .champ-domaine input:focus-visible { border-color: var(--bleu); outline: 3px solid var(--bleu); outline-offset: 2px; }
  .barre-domaine .champ-domaine .btn { flex: 1 1 100%; min-height: 48px; margin-top: 10px; border-radius: var(--r-bouton); font-size: 1rem; }
  /* Sous le bouton plein du héros, « Vérifier » passe en contour : une seule action principale à l'écran. */
  .barre-domaine .champ-domaine .btn { --fond: var(--papier); --texte: var(--encre); --fond-survol: var(--calque); --fond-appui: var(--calque-2); border-color: var(--filet-fort); }
}

/* ---------- 3.24 Déroulé (une vraie séquence, en lignes à filets) ----------
   <div class="conteneur deroule-grille"><div class="deroule-tete"><h2>…</h2><p>…</p></div>
   <ol class="deroule"><li><h3>…</h3><p>…</p></li>…</ol></div>
   Titre collant à gauche (5/12), étapes à droite (7/12), comme les questions ; le numéro vient du compteur. */
.deroule-grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-3); align-items: start; }
.deroule-tete { grid-column: 1 / span 5; position: sticky; top: calc(var(--haut-entete) + 32px); }
.deroule-tete p { max-width: 40ch; margin: 16px 0 0; font-size: var(--t-4); line-height: 1.55; color: var(--ardoise); }
.deroule { grid-column: 7 / -1; counter-reset: deroule; margin: 0; padding: 0; list-style: none; border-bottom: var(--trait-fin); }
.deroule li { counter-increment: deroule; display: grid; grid-template-columns: 56px minmax(0, 1fr); padding: 22px 0; border-top: 1px solid var(--filet); }
.deroule li:first-child { border-top: var(--trait); }
.deroule li::before { content: counter(deroule); grid-row: 1 / span 2; font-family: var(--police-titre); font-size: var(--t-2); font-weight: 600; line-height: 1; letter-spacing: -0.03em; color: var(--encre); font-variant-numeric: tabular-nums; }
.deroule h3 { grid-column: 2; font-size: var(--t-4); }
.deroule p { grid-column: 2; max-width: 60ch; margin: 6px 0 0; font-size: var(--t-5); line-height: 1.55; color: var(--ardoise); }
@media (max-width: 1023px) {
  .deroule-grille { display: block; }
  .deroule-tete { position: static; }
  .deroule { margin-top: 32px; }
}
@media (max-width: 479px) {
  .deroule li { grid-template-columns: 40px minmax(0, 1fr); padding: 18px 0; }
  .deroule p { font-size: var(--t-6); }
}
.page-accueil main p > a { white-space: nowrap; }

/* ==========================================================================
   4. Héritage : pages pas encore refaites
   Chaque bloc ci-dessous sert des pages précises ; le retirer quand l'agent de la page l'a remplacé.
   ========================================================================== */

/* Champ de recherche de domaine (page Nom de domaine ; réglé dans le bloc domaine-mail) */
.champ-domaine {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  max-width: 760px;
  height: 56px;
  padding: 0 6px 0 16px;
  border: 1px solid var(--bord-champ);
  border-radius: 10px;
  background: var(--blanc);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.champ-domaine:hover { border-color: var(--texte-2); }
.champ-domaine:focus-within { outline: 2px solid transparent; outline-offset: 2px; border-color: var(--secondaire); box-shadow: 0 0 0 3px var(--secondaire-pale-2); transition: none; }
.champ-domaine > .ic { color: var(--texte-3); }
.champ-domaine input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 12px;
  border: 0;
  background: transparent;
  font-size: 1rem;
  outline: none;
}
.champ-domaine input::placeholder { color: var(--texte-3); }
.champ-domaine .btn { min-height: 44px; padding: 0 18px; }
@media (max-width: 767px) {
  .champ-domaine { height: 52px; padding-left: 12px; }
  .champ-domaine input { padding: 0 8px; }
  .champ-domaine .btn { padding: 0 14px; }
}



/* ---------- L'anneau de la marque ---------- */
/* Le « o » d'Odra en bleu foncé plein, à bords nets (capture validée par Joseph le 29/10/2026) : posé sur le bord bas
   d'une surface bleue, qui le rogne. --anneau-x place son centre ; son diamètre est borné par --anneau-h (part de la
   hauteur) et --anneau-l (part de la largeur). Le texte reste au-dessus, blanc sur #2549C9 : 6,5:1. */
.appel, .connexion-cote { position: relative; isolation: isolate; overflow: hidden; container-type: inline-size; }
.appel::before, .connexion-cote::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: var(--anneau-x, 86%);
  bottom: 0;
  height: min(var(--anneau-h, 115%), var(--anneau-l, 83cqw));
  aspect-ratio: 1;
  translate: -50% 50%;
  background: var(--secondaire-survol);
  -webkit-mask: url("/assets/img/anneau.svg") center / contain no-repeat;
  mask: url("/assets/img/anneau.svg") center / contain no-repeat;
  pointer-events: none;
}
@media (forced-colors: active), print { .appel::before, .connexion-cote::before { display: none; } }









/* Résultats de la recherche de domaine (écrits par site.js, réglés dans le bloc domaine-mail) */
.resultats-domaine { max-width: 820px; margin: 40px auto 0; text-align: left; }
.resultats-domaine[hidden] { display: none; }
.resultat-principal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px;
  border: 2px solid var(--secondaire);
  border-radius: 12px;
  background: var(--blanc);
}
.resultat-principal.est-pris { border-color: var(--filet-fort); }
.resultat-principal .nom { font-family: var(--police-titre); font-size: clamp(1.375rem, 1rem + 1.5vw, 1.875rem); font-weight: 600; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.resultat-principal p { margin: 4px 0 0; font-size: 0.9375rem; color: var(--texte-2); }
.liste-resultats { margin: 12px 0 0; padding: 0; list-style: none; border: 1px solid var(--filet-fort); border-radius: 12px; background: var(--blanc); overflow: hidden; }
.liste-resultats li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--filet); }
.liste-resultats li:last-child { border-bottom: 0; }
.liste-resultats .nom { font-weight: 600; overflow-wrap: anywhere; }
.liste-resultats .droite { display: flex; align-items: center; gap: 12px; }
.liste-resultats-etat { display: flex; align-items: center; gap: 12px; }
.resultats-domaine .mise-en-garde { margin: 0 0 12px; }
.resultats-note { margin: 16px 0 0; font-size: 0.875rem; color: var(--texte-2); }
.chargement { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--filet-fort); border-top-color: var(--secondaire); border-radius: 50%; animation: tourner 0.8s linear infinite; }
@keyframes tourner { to { transform: rotate(360deg); } }
.erreur-domaine { max-width: 720px; margin: 12px auto 0; text-align: left; }


.mise-en-garde { display: flex; gap: 14px; padding: 16px 18px; border-radius: 10px; background: var(--secondaire-pale); color: var(--secondaire-texte); font-size: 0.9375rem; }
.mise-en-garde .ic { margin-top: 2px; color: var(--secondaire); }

/* Lignes de formulaire (panier, inscription) */
.formulaire-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Une erreur sous un champ ne décale pas son voisin. */
.formulaire-ligne > .champ { align-content: start; }
.formulaire-note { margin: 0; font-size: 0.8125rem; color: var(--texte-3); }
@media (max-width: 599px) { .formulaire-ligne { grid-template-columns: 1fr; } }

/* Connexion et inscription : le formulaire à gauche, la bande bleue de la marque à droite. */
.connexion { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100svh - var(--haut-entete)); }
.connexion-formulaire { display: grid; place-items: center; padding: 48px var(--marge); }
.connexion-carte { width: min(100%, 420px); }
/* Titre de connexion : graisse et approche des titres de l'espace. */
.connexion-carte h1 { margin-bottom: 12px; font-size: clamp(2rem, 1.6rem + 1.2vw, 2.5rem); font-weight: 650; letter-spacing: -0.035em; }
.connexion-carte > p:not(.connexion-autre) { margin: 0 0 28px; color: var(--texte-2); }
.connexion-carte > div:not([hidden]) { display: grid; gap: 16px; margin-top: 20px; }
.connexion-carte > div > p { margin: 0; }
.connexion-carte form { display: grid; gap: 18px; }
.champ-mdp { position: relative; }
.champ-mdp .saisie { padding-right: 52px; }
.champ-mdp button { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--texte-2); cursor: pointer; }
.champ-mdp button:hover { background: var(--fond-gris); color: var(--encre); }
.ligne-options { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; font-size: 0.9375rem; }
.case { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.case input { width: 18px; height: 18px; accent-color: var(--secondaire); }
.connexion-avis { display: flex; gap: 12px; padding: 14px 16px; border: 1px solid var(--secondaire-bord); border-radius: 10px; background: var(--secondaire-pale); color: var(--secondaire-texte); font-size: 0.875rem; }
.connexion-avis .ic { margin-top: 1px; color: var(--secondaire); }
.connexion-info { margin: 0; color: var(--vert); font-size: 0.875rem; font-weight: 500; }
/* Avis sans réussite ni erreur (session terminée, déconnexion, facture à télécharger) : texte de la marque, pas le vert. */
.connexion-info.est-neutre { color: var(--secondaire-texte); }
.saisie-code { font-size: 1.375rem; letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }
.lien-bouton { padding: 0; border: 0; background: none; color: var(--secondaire); font: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: var(--secondaire-bord); text-decoration-thickness: 1px; text-underline-offset: 0.18em; cursor: pointer; }
.lien-bouton:hover { color: var(--secondaire-survol); text-decoration-color: currentColor; }
.lien-bouton[aria-disabled="true"] { color: var(--texte-3); text-decoration: none; cursor: default; }
.ligne-options .lien-bouton { min-height: 44px; }
.ligne-options a.lien-bouton { display: inline-flex; align-items: center; }
.connexion-autre { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--filet-fort); color: var(--texte-2); font-size: 0.9375rem; }
.connexion-autre a, .connexion-autre .lien-bouton { color: var(--secondaire); font-weight: 600; }
/* « Continuer avec Google » : le bouton tel que Google le demande (fond blanc, filet gris, logo
   en couleurs), puis « ou » entre deux filets. */
.connexion-carte > .connexion-google:not([hidden]) { display: grid; gap: 14px; margin: 0 0 22px; }
.btn-google { --fond: #fff; --texte: #1f1f1f; --fond-survol: #f3f4f5; --fond-appui: #e8eaed; gap: 12px; border-color: #747775; }
.btn-google .logo-google { flex: none; width: 20px; height: 20px; }
.btn.btn-google .chargement { border-color: rgb(31 31 31 / 0.2); border-top-color: currentColor; }
.connexion-ou { display: flex; align-items: center; gap: 14px; margin: 0; color: var(--texte-3); font-size: 0.875rem; }
.connexion-ou::before, .connexion-ou::after { content: ""; flex: 1; height: 1px; background: var(--filet-fort); }
.connexion-attente { display: flex; align-items: center; gap: 10px; }
/* Inscription : le champ piège reste hors de l'écran et hors du parcours au clavier ; un robot le remplit. */
.champ-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.connexion-carte .formulaire-note a { color: inherit; }
/* Le titre en haut, l'anneau de la marque en bas à droite (voir plus haut). */
.connexion-cote {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 56px;
  background: var(--secondaire);
}
.connexion-cote h2 { max-width: 14ch; font-size: clamp(1.75rem, 1.25rem + 1.2vw, 2.25rem); line-height: 1.06; letter-spacing: -0.032em; color: #fff; }
.connexion-cote ul { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; color: #e6edff; }
.connexion-cote li { display: flex; align-items: center; gap: 12px; text-wrap: pretty; }
.connexion-cote li .ic { flex: none; color: #fff; }
@media (max-width: 899px) {
  .connexion { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .connexion-cote { --anneau-l: 56cqw; padding: 40px var(--marge) calc(28vw + 32px); }
}

/* Panier */
.panier { padding: clamp(32px, 5vw, 56px) 0 clamp(72px, 9vw, 112px); background: var(--fond-gris); }
.panier h1 { margin-bottom: 28px; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); letter-spacing: -0.032em; }
.panier-grille { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: start; }
fieldset.panier-etape { min-width: 0; margin: 0; }
.panier-etape { padding: clamp(20px, 3vw, 32px); border: 1px solid var(--filet-fort); border-radius: 14px; background: var(--blanc); }
.panier-etape + .panier-etape { margin-top: 16px; }
.panier-etape h2 { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; font-family: var(--police-texte); font-size: 1.25rem; letter-spacing: -0.01em; }
.panier-etape h2 span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--secondaire); color: var(--blanc); font-size: 0.9375rem; font-family: var(--police-texte); font-weight: 700; }
.choix-formules { display: grid; gap: 10px; }
.choix-formule { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 18px 20px; border: 1px solid var(--filet-fort); border-radius: 10px; cursor: pointer; transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease; }
.choix-formule:hover { border-color: var(--texte-3); }
.choix-formule:has(input:checked) { border-color: var(--secondaire); box-shadow: 0 0 0 1px var(--secondaire); background: #f8faff; }
.choix-formule input { width: 20px; height: 20px; accent-color: var(--secondaire); }
.choix-formule strong { display: block; font-size: 1.0625rem; }
.choix-formule small { color: var(--texte-2); font-size: 0.875rem; }
.choix-formule .prix { font-weight: 700; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.choix-formule > span:empty { display: none; }
.choix-formule .prix small { display: block; font-weight: 400; }
.recapitulatif { position: sticky; top: calc(var(--haut-entete) + 24px); padding: 28px; border: 1px solid var(--filet-fort); border-radius: 14px; background: var(--blanc); box-shadow: var(--ombre-douce); }
.recapitulatif h2 { margin-bottom: 16px; font-family: var(--police-texte); font-size: 1.25rem; letter-spacing: -0.01em; }
.recapitulatif dl { display: grid; gap: 10px; margin: 0; }
.recapitulatif dl div { display: flex; justify-content: space-between; gap: 16px; font-size: 0.9375rem; }
.recapitulatif dt { color: var(--texte-2); }
.recapitulatif dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.recapitulatif .total { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--filet); font-size: 1.125rem; }
.recapitulatif .total dt { color: var(--encre); font-weight: 600; }
.recapitulatif .btn { margin-top: 20px; }
.recapitulatif-note { margin: 14px 0 0; font-size: 0.8125rem; color: var(--texte-3); }
.etat-domaine { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 24px; margin: 10px 0 0; font-size: 0.9375rem; }
.panier-avis { margin: -8px 0 24px; }
.panier-aide { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; font-size: 0.8125rem; color: var(--texte-2); }
.panier-aide .ic { flex: none; margin-top: 2px; }
.formulaire-ligne-cp { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.champ-recherche { position: relative; }
.champ-recherche > .ic { position: absolute; top: 50%; left: 14px; color: var(--texte-3); transform: translateY(-50%); pointer-events: none; }
.champ-recherche .saisie { padding-left: 40px; }
.recherche-entreprise > .aide { min-height: 1.4em; }
.resultats-entreprise { display: grid; gap: 2px; margin: 4px 0 0; padding: 6px; list-style: none; border: 1px solid var(--filet-fort); border-radius: 10px; background: var(--blanc); box-shadow: var(--ombre-2); }
.resultats-entreprise button { display: grid; gap: 2px; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--encre); font: inherit; text-align: left; cursor: pointer; }
.resultats-entreprise button:hover { background: var(--fond-gris); }
.resultats-entreprise button:focus-visible { background: var(--secondaire-pale); outline: 2px solid var(--secondaire); outline-offset: -2px; }
.resultats-entreprise strong { font-size: 0.9375rem; overflow-wrap: anywhere; }
.resultats-entreprise span { font-size: 0.8125rem; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.moyens-attente { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--texte-2); font-size: 0.9375rem; }
.case-conditions { display: flex; align-items: flex-start; gap: 12px; margin-top: 20px; font-size: 0.875rem; line-height: 1.45; color: var(--texte-2); }
.case-conditions input { flex: none; margin-top: 1px; accent-color: var(--secondaire); }
.case-conditions a { color: var(--secondaire); }
.panier-erreur { margin: 12px 0 0; }
.code-promo { display: grid; gap: 6px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--filet); }
.code-promo > label { font-weight: 500; font-size: 0.9375rem; }
.code-promo-ligne { display: flex; gap: 8px; }
.code-promo-ligne .saisie { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 0.04em; }
.code-promo-ligne .saisie:read-only { background: var(--fond-gris); color: var(--texte-2); }
.recapitulatif .code-promo .btn { flex: none; margin-top: 0; }
.code-promo-etat { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 0; font-size: 0.875rem; color: var(--texte-2); }
.code-promo-etat:empty { display: none; }
.code-promo-etat .ic { flex: none; margin-top: 2px; }
.code-promo-etat.est-ok { color: var(--vert); font-weight: 500; }
.code-promo-etat.est-erreur { color: var(--rouge); font-weight: 500; }
.btn .chargement { border-color: rgb(255 255 255 / 0.35); border-top-color: currentColor; }
@media (max-width: 959px) {
  .panier-grille { grid-template-columns: minmax(0, 1fr); }
  .recapitulatif { position: static; }
}
@media (max-width: 399px) {
  .choix-formule { grid-template-columns: auto minmax(0, 1fr); padding: 16px; }
  .choix-formule .prix { grid-column: 2; text-align: left; }
  .choix-formule .prix small { display: inline; margin-left: 0.4em; }
}

/* Retour de la page de paiement */
.merci { padding: clamp(40px, 7vw, 96px) 0 clamp(72px, 9vw, 112px); }
.merci-carte { max-width: 640px; margin: 0 auto; padding: clamp(28px, 4vw, 48px); border: 1px solid var(--filet-fort); border-radius: 14px; background: var(--blanc); box-shadow: var(--ombre-douce); }
.merci-carte h1 { margin-top: 20px; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem); line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; outline: none; }
.merci-carte > p { max-width: 60ch; margin: 12px 0 0; color: var(--texte-2); }
.merci-icone { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--fond-gris); color: var(--encre); }
.merci-icone .ic { width: 26px; height: 26px; }
.merci-icone-vert { background: var(--vert-pale); color: var(--vert); }
.merci-icone-rouge { background: var(--rouge-pale); color: var(--rouge); }
.chargement-grand { width: 24px; height: 24px; border-width: 3px; }
.merci-recap { display: grid; gap: 8px; margin: 24px 0 0; padding: 18px 20px; border-radius: 10px; background: var(--fond-gris); }
.merci-recap div { display: flex; justify-content: space-between; gap: 16px; font-size: 0.9375rem; }
.merci-recap dt { color: var(--texte-2); }
.merci-recap dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.merci-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.merci-carte > .merci-contact { max-width: none; margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--filet); font-size: 0.875rem; color: var(--texte-2); }
.merci-contact a { color: var(--secondaire); font-weight: 600; white-space: nowrap; }
@media (max-width: 479px) {
  .merci-recap div { flex-direction: column; gap: 0; }
  .merci-recap dd { text-align: left; }
  .merci-actions .btn { width: 100%; }
}





/* ==========================================================================
   5. Blocs réservés aux pages
   Chaque agent de page écrit ses règles propres entre ses deux commentaires, et nulle part ailleurs.
   ========================================================================== */
/* == PAGES:offre-site == */
/* Tarifs (.page-tarifs) et Hébergez votre site (.page-hebergez-site), la page de l'offre Hébergement.
   Composants du §3 ; ici seulement leur placement et les réglages propres à ces pages. */

/* Commun : un libellé cliquable ne se coupe pas ; les fiches en texte courant quand leurs valeurs sont des phrases. */
:is(.page-tarifs, .page-hebergez-site, .page-hebergement) main p > a { white-space: nowrap; }
:is(.page-tarifs, .page-hebergez-site) .fiche dl { border-top: 1px solid var(--c-trait); }
:is(.page-tarifs, .page-hebergez-site) .fiche dl > div { grid-template-columns: 11rem minmax(0, 1fr); gap: 20px; padding: 14px 0 15px; }
:is(.page-tarifs, .page-hebergez-site) .fiche dt { padding-top: 1px; font-weight: 600; color: var(--c-texte); }
:is(.page-tarifs, .page-hebergez-site) .fiche dd { font-family: var(--police-texte); font-size: var(--t-6); font-weight: 400; line-height: 1.55; letter-spacing: 0; color: var(--c-texte-2); }
@media (max-width: 479px) {
  :is(.page-tarifs, .page-hebergez-site) .fiche dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ---------- Tarifs ---------- */
.page-tarifs .tarifs-tete { padding-top: clamp(32px, 5vw, 56px); }
.page-tarifs .tarifs-tete .entete-section { max-width: 820px; margin-bottom: 32px; }
.page-tarifs .tarifs-tete h1 { max-width: 15em; font-size: var(--t-1); }

/* Ce qui se chiffre à part */
.tarifs-devis { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-3); align-items: start; }
.tarifs-devis-texte { grid-column: 1 / span 5; }
.tarifs-devis .liste-filets { grid-column: 7 / -1; margin-top: 6px; }
.tarifs-devis-texte .chapeau { margin: 20px 0 0; }
.tarifs-source { margin: 18px 0 0; font-size: var(--t-6); color: var(--ardoise); }
@media (max-width: 1023px) {
  .tarifs-devis { display: block; }
  .tarifs-devis .liste-filets { margin-top: 36px; }
}
#facturation .tarifs-source { margin-top: 22px; }

/* Fiche en cellules : une fiche en grille (facturation : 2 colonnes de texte).
   <dl class="fiche-cellules fiche-cellules-texte"><div><dt>…</dt><dd>…</dd></div>…</dl> */
.fiche-cellules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: var(--trait); }
.fiche-cellules > div { min-width: 0; padding: 18px 24px 22px; border-bottom: var(--trait-fin); border-left: var(--trait-fin); }
.fiche-cellules > div:nth-child(4n + 1) { padding-left: 0; border-left: 0; }
.fiche-cellules dt { font-size: var(--t-6); color: var(--ardoise); }
.fiche-cellules dd { margin: 8px 0 0; font-family: var(--police-titre); font-size: var(--t-3); font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; color: var(--encre); }
.fiche-cellules dd span { display: block; margin-top: 6px; font-family: var(--police-texte); font-size: var(--t-6); font-weight: 400; line-height: 1.45; letter-spacing: 0; color: var(--ardoise); }
.fiche-cellules-texte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fiche-cellules-texte > div:nth-child(4n + 1) { padding-left: 24px; border-left: var(--trait-fin); }
.fiche-cellules-texte > div:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
.fiche-cellules-texte dt { font-weight: 600; color: var(--encre); }
.fiche-cellules-texte dd { margin-top: 4px; max-width: 54ch; font-family: var(--police-texte); font-size: var(--t-5); font-weight: 400; line-height: 1.55; letter-spacing: 0; color: var(--ardoise); }
@media (max-width: 1023px) {
  .fiche-cellules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fiche-cellules > div:nth-child(4n + 1) { padding-left: 24px; border-left: var(--trait-fin); }
  .fiche-cellules > div:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
}
@media (max-width: 599px) {
  .fiche-cellules, .fiche-cellules-texte { grid-template-columns: minmax(0, 1fr); }
  .fiche-cellules > div, .fiche-cellules > div:nth-child(n) { padding: 14px 0 16px; border-left: 0; }
  .fiche-cellules dd { font-size: var(--t-4); }
  .fiche-cellules-texte dd { font-size: var(--t-6); }
}

/* ---------- Hébergez votre site ---------- */
.page-hebergez-site .heros-produit h1 { max-width: 20ch; }
/* La phrase de Joseph est déjà le titre et le texte du héros : la carte ne la répète pas sur cette page. */
.offre-seule :is(.formule-accroche, .formule-vision) { display: none; }

.page-hebergez-site .reprise-note + .reprise-note { margin-top: 8px; }
/* L'offre seule : le titre à gauche (5/12), la carte à droite, pour ne pas laisser une demi-page vide en grand écran. */
.offre-seule { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-3); align-items: start; }
.offre-seule .entete-section { grid-column: 1 / span 5; margin: 0; position: sticky; top: calc(var(--haut-entete) + 32px); }
.offre-seule .formules-une { grid-column: 7 / -1; max-width: none; }
.entete-section > p.offre-seule-note { font-size: var(--t-6); }
.offre-seule-note .lien-fort { display: inline-block; margin-top: 4px; }
@media (max-width: 1023px) {
  .offre-seule { display: block; }
  .offre-seule .entete-section { position: static; margin-bottom: 32px; }
  .offre-seule .formules-une { max-width: 600px; }
}


/* == FIN:offre-site == */

/* == PAGES:mon-site == */
/* Créez votre site (.page-mon-site) : l'offre Mon Site par Odratta, demandée par e-mail.
   Héros produit (§3.5) avec le prix, deux listes à filets côte à côte, le déroulé (§3.24), puis les questions. */
.page-mon-site .heros-produit h1 { max-width: 24ch; }
/* Le titre, plus long, prend une colonne plus large que la liste : deux lignes en grand écran. */
@media (min-width: 900px) { .page-mon-site .heros-produit-grille { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.page-mon-site main p > a { white-space: nowrap; }
.mon-site-compris { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 56px; }
.mon-site-compris h3 { font-size: var(--t-3); }
.mon-site-compris .liste-filets { margin-top: 16px; }
/* « Votre site reste à vous » suit les cinq étapes : sous elles dans la colonne de droite, et à la suite sur mobile. */
.mon-site-liberte { max-width: 52ch; margin: 40px 0 0; padding-top: 20px; border-top: 1px solid var(--filet-fort); }
.deroule-grille > .mon-site-liberte { grid-column: 7 / -1; }
.mon-site-liberte h3 { font-size: var(--t-4); }
.mon-site-liberte p { margin: 8px 0 0; font-size: var(--t-6); color: var(--ardoise); }
@media (max-width: 767px) { .mon-site-compris { grid-template-columns: minmax(0, 1fr); row-gap: 40px; } }
/* == FIN:mon-site == */

/* == PAGES:studio == */
/* Odratta Studio (.page-studio) : le studio créatif digital & IA d'Odratta, sur proposition.
   Même identité que les pages à prix, avec plus d'air : héros sur une colonne, titres plus légers, sections plus hautes,
   quatre métiers en 2 × 2 sous un filet d'encre, sans cadre ni icône, puis le déroulé d'un projet en trois temps (§3.24).
   Seule page à lier studio.odratta.com. */
.heros-studio { padding: clamp(28px, 4vw, 52px) 0 clamp(56px, 7vw, 112px); }
.heros-studio .fil-ariane { margin-bottom: clamp(28px, 5vw, 84px); }
.heros-studio h1 { max-width: 22ch; font-size: var(--t-1); font-weight: 560; letter-spacing: -0.03em; }
.heros-studio .heros-texte { max-width: 56ch; margin-top: 24px; font-size: var(--t-4); }
.heros-studio .heros-actions { margin-top: 36px; }
.page-studio .section { padding-block: calc(var(--e-section) * 1.2); }
.page-studio .titre-section { font-weight: 560; }
.page-studio main p > a { white-space: nowrap; }
.metiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 96px; margin: 48px 0 0; padding: 0; list-style: none; }
.metiers li { padding-top: 24px; border-top: var(--trait); }
.metiers h3 { font-size: var(--t-3); font-weight: 560; line-height: 1.2; letter-spacing: -0.02em; }
.metiers p { margin: 10px 0 18px; font-size: var(--t-5); color: var(--ardoise); }
.metiers-note { max-width: 60ch; margin: 56px 0 0; font-size: var(--t-6); color: var(--ardoise); }
.metiers-note .lien-fort { display: inline-block; margin-top: 4px; }
.studio-simple { margin: 20px 0 0; }
@media (max-width: 767px) { .metiers { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
@media (max-width: 599px) { .page-studio .heros-actions .btn { width: 100%; } }
/* == FIN:studio == */

/* == PAGES:offre-app == */
/* Parcours app : /hebergez-votre-app/ (.page-app-offre, le détail) et /serveur-prive/ (.page-app-devis, la demande).
   Les deux pages portent aussi .page-app. */
.page-app .heros-produit h1 { max-width: 13ch; }

/* Offre : le déroulé en quatre temps, à droite du titre, en colonne. */
.app-deroule { padding-top: 6px; }
.app-deroule > h2 { margin: 0 0 26px; padding-bottom: 14px; border-bottom: var(--trait); font-size: var(--t-3); }
.app-deroule .etapes { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
.app-deroule .etapes > li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 18px; align-content: start; padding: 0 0 26px; }
.app-deroule .etapes > li:last-child { padding-bottom: 0; }
.app-deroule .etapes > li::before { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
.app-deroule .etapes > li > * { grid-column: 2; }
.app-deroule .etapes h3 { margin: 6px 0 4px; }
.app-deroule .etapes > li::after { display: block; top: 42px; bottom: 6px; left: 17px; right: auto; width: 1.5px; height: auto; }
.app-deroule .etapes > li:last-child::after { display: none; }
.app-deroule .etapes p { max-width: 52ch; }

/* Offre : ce qui revient au serveur, ce qui revient à l'app. */
.app-partage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px clamp(40px, 6vw, 96px); }
.app-partage h3 { font-size: var(--t-3); }
.app-partage .liste-filets { margin-top: 18px; }
.app-renvoi { margin: 40px 0 0; }
@media (max-width: 899px) { .app-partage { grid-template-columns: minmax(0, 1fr); } }

/* Demande : lien de retour vers la démarche. */
.app-methode-lien { margin: 28px 0 0; }

/* Demande : le téléphone d'abord, à gauche ; à droite, ce que nous demanderons pendant l'appel.
   (Le formulaire par messagerie est retiré tant que contact@odratta.com rejette les messages.) */
.page-app-devis .contacts { max-width: 26rem; margin-top: 36px; }
.app-questions { padding-top: 6px; }
.app-questions > h2 { margin: 0; padding-bottom: 14px; border-bottom: var(--trait); font-size: var(--t-3); }
.app-questions .liste-filets { margin-top: 0; border-top: 0; }
.app-questions-note { margin: 18px 0 0; max-width: 52ch; font-size: var(--t-6); color: var(--ardoise); }

/* Demande : le contenu de la proposition, en fiche. */
.app-proposition { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-3); align-items: start; }
.app-proposition-intro { grid-column: 1 / span 5; }
.app-proposition-intro .chapeau { margin: 20px 0 0; }
.app-proposition-fiche { grid-column: 7 / -1; }
.app-proposition-fiche dl { border-top: 1px solid var(--c-trait); }
.app-proposition-fiche dd { font-family: var(--police-texte); font-weight: 400; letter-spacing: 0; }
.app-vitrine { margin-top: var(--e-5); }
@media (max-width: 1023px) {
  .app-proposition { display: block; }
  .app-proposition-fiche { margin-top: 40px; }
}
/* == FIN:offre-app == */

/* == PAGES:domaine-mail == */
/* Nom de domaine (.page-domaine), E-mail pro (.page-email) et reprise du site (.page-demenagement), 06/11/2026.
   Héros produit en deux colonnes : le texte, puis une pièce réelle (registres interrogés, schéma des adresses,
   trois points de la reprise). Ensuite une composition par page : duo (domaine), bande de cinq points (e-mail),
   paire de colonnes alignées (reprise), pour ne pas répéter le même moule d'une section à l'autre. */
:is(.page-domaine, .page-email, .page-demenagement) .heros-produit h1 { max-width: 16ch; }

/* Duo (nom de domaine) : <div class="conteneur duo"><div class="duo-tete"><h2>…</h2><p class="chapeau">…</p></div><ul class="liste-filets">…</ul></div>
   Paire (reprise) : deux colonnes titre, chapeau, liste, alignées ligne à ligne par subgrid. */
.page-domaine .duo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-3); align-items: start; }
.page-domaine .duo-tete { grid-column: 1 / span 5; }
.page-domaine .duo-tete .chapeau { margin: 20px 0 0; }
.page-domaine .duo > :last-child { grid-column: 7 / -1; margin-top: 6px; }
.page-demenagement .paire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: clamp(40px, 6vw, 96px); }
.page-demenagement .paire-col { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
.page-demenagement .paire-col .chapeau { margin: 18px 0 0; }
.page-demenagement .paire-col > :last-child { align-self: start; margin-top: 36px; }
:is(.page-domaine, .page-demenagement) :is(.duo, .paire) .liste-filets li { gap: 4px; padding: 18px 0 20px; }
:is(.page-domaine, .page-demenagement) :is(.duo, .paire) .liste-filets strong { font-family: var(--police-titre); font-size: var(--t-4); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
:is(.page-domaine, .page-demenagement) :is(.duo, .paire) .liste-filets span { max-width: 60ch; line-height: 1.5; }
.page-demenagement .paire .fiche dl { border-top: 1px solid var(--c-trait); }
.page-demenagement .paire .fiche dl > div { grid-template-columns: 9.5rem minmax(0, 1fr); padding: 15px 0; }
@media (max-width: 1023px) {
  .page-domaine .duo { display: block; }
  .page-domaine .duo > :last-child { margin-top: 36px; }
}
@media (max-width: 899px) {
  .page-demenagement .paire { display: block; }
  .page-demenagement .paire-col + .paire-col { margin-top: var(--e-5); }
}
@media (max-width: 479px) {
  .page-demenagement .paire .fiche dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* Nom de domaine : le champ de recherche (crochets de site.js inchangés) */
.page-domaine .champ-domaine {
  max-width: 640px; height: 60px; margin-top: 32px; padding: 0 6px 0 18px;
  border: 1px solid var(--filet-fort); border-radius: var(--r-bouton); background: var(--papier);
  box-shadow: 0 1px 2px rgb(18 26 51 / 0.06);
}
.page-domaine .champ-domaine:hover { border-color: var(--ardoise-2); }
.page-domaine .champ-domaine:focus-within { border-color: var(--bleu); box-shadow: 0 1px 2px rgb(18 26 51 / 0.06); }
.page-domaine .champ-domaine:has(input:focus-visible) { outline: 3px solid var(--bleu); outline-offset: 3px; }
.page-domaine .champ-domaine > .ic { color: var(--ardoise-2); }
.page-domaine .champ-domaine input { padding: 0 12px; color: var(--encre); font-size: var(--t-5); }
.page-domaine .champ-domaine input::placeholder { color: var(--ardoise-2); opacity: 1; }
.page-domaine .champ-domaine .btn { min-height: 48px; padding: 0 22px; border-radius: 7px; }
.page-domaine .erreur-domaine { max-width: 640px; margin: 10px 0 0; }

/* Nom de domaine : résultats (balisage écrit par site.js, initRechercheDomaine) */
.page-domaine .resultats-domaine { max-width: 640px; margin: 28px 0 0; }
.page-domaine .resultat-principal { gap: 14px 20px; padding: 20px 22px; border: 0; border-radius: var(--r-bouton); background: var(--calque); }
.page-domaine .resultat-principal.est-pris { background: var(--gris-fond); }
.page-domaine .resultat-principal .nom { font-size: var(--t-3); line-height: 1.2; }
.page-domaine .resultat-principal p { color: var(--ardoise); }
.page-domaine .liste-resultats { margin: 10px 0 0; border: 0; border-top: var(--trait); border-radius: 0; background: none; }
.page-domaine .liste-resultats li, .page-domaine .liste-resultats li:last-child { padding: 12px 0; border-bottom: var(--trait-fin); }
.page-domaine .liste-resultats .droite { gap: 10px; }
/* Un seul bouton plein : celui du domaine cherché ; les autres extensions prennent un filet bleu. */
.page-domaine .liste-resultats .btn:not(.btn-gris) { --fond: var(--papier); --texte: var(--bleu); --fond-survol: var(--calque); --fond-appui: var(--calque-2); border-color: var(--bord-bleu); }
.page-domaine .liste-resultats .btn:not(.btn-gris):hover { border-color: var(--bleu); }
.page-domaine .resultats-note { margin-top: 14px; font-size: var(--t-6); color: var(--ardoise-2); }
/* L'autre voie, sous le domaine cherché : Mon Site par Odratta, demandé par e-mail avec ce nom. */
.page-domaine .resultats-mon-site { margin: 12px 0 18px; font-size: var(--t-5); color: var(--encre); }
.page-domaine .resultats-domaine .mise-en-garde { margin: 0 0 14px; }

/* Nom de domaine : les registres interrogés (tirés de domaines.js) */
.page-domaine .registres { padding-top: 6px; }
.page-domaine .registres h2 { font-size: var(--t-3); }
.page-domaine .registres > p { margin: 8px 0 0; font-size: var(--t-6); color: var(--ardoise); }
.page-domaine .registres-liste { margin: 18px 0 0; border-top: var(--trait); }
.page-domaine .registres-liste > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: baseline; gap: 16px; padding: 9px 0 10px; border-bottom: var(--trait-fin); }
.page-domaine .registres-liste dt { font-family: var(--police-titre); font-size: var(--t-4); font-weight: 600; letter-spacing: -0.01em; color: var(--encre); }
.page-domaine .registres-liste dd { margin: 0; font-size: var(--t-6); color: var(--ardoise); }
.page-domaine .registres .registres-note { margin-top: 14px; }
.page-domaine .registres-note a { color: var(--encre); font-weight: 600; white-space: nowrap; text-underline-offset: 3px; text-decoration-color: var(--filet-fort); }
.page-domaine .registres-note a:hover { color: var(--bleu); text-decoration-color: currentColor; }

/* Nom de domaine : propriété et transfert */
.page-domaine .duo-tete .domaine-source { margin: 22px 0 0; }
.page-domaine .domaine-choix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--trait); border-bottom: var(--trait-fin); }
.page-domaine .domaine-option { padding: 26px 40px 30px 0; }
.page-domaine .domaine-option + .domaine-option { padding-left: 40px; border-left: var(--trait-fin); }
.page-domaine .domaine-option h3 { font-size: var(--t-3); }
.page-domaine .domaine-option p { max-width: 54ch; margin: 10px 0 0; color: var(--ardoise); }
.page-domaine #transfert .heros-actions { margin-top: 36px; }
@media (max-width: 767px) {
  .page-domaine .domaine-choix { grid-template-columns: minmax(0, 1fr); }
  .page-domaine .domaine-option { padding: 22px 0 24px; }
  .page-domaine .domaine-option + .domaine-option { padding-left: 0; border-left: 0; border-top: var(--trait-fin); }
}
@media (max-width: 599px) {
  .page-domaine .champ-domaine { height: 56px; padding-left: 14px; }
  .page-domaine .champ-domaine input { padding: 0 8px; }
  .page-domaine .champ-domaine .btn { min-height: 44px; padding: 0 14px; }
  .page-domaine .resultat-principal { padding: 18px 16px; }
  .page-domaine #transfert .heros-actions .btn { width: 100%; }
}
@media (max-width: 374px) {
  .page-domaine .champ-domaine { padding-left: 6px; }
  .page-domaine .champ-domaine > .ic { display: none; }
}

/* E-mail pro : un nom de domaine, deux usages. Les adresses s'alignent sur la même colonne de domaine. */
.page-email .schema-adresses { display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: 6px 0 0; border-top: var(--trait); }
.page-email .schema-bloc, .page-email .schema-liste, .page-email .schema-ligne { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
.page-email .schema-liste { margin: 0; padding: 0; list-style: none; }
.page-email .schema-titre { grid-column: 1 / -1; margin: 0; padding: 18px 0 8px; font-size: var(--t-6); color: var(--ardoise); }
.page-email .schema-ligne { align-items: baseline; margin: 0; padding: 10px 0; border-bottom: var(--trait-fin); font-family: var(--police-titre); font-size: var(--t-3); line-height: 1.25; letter-spacing: -0.012em; }
.page-email .schema-avant { justify-self: end; padding-right: 2px; font-weight: 600; color: var(--encre); }
.page-email .schema-domaine { justify-self: start; min-width: 0; padding: 2px 10px 4px; border-radius: var(--r-petit); font-weight: 450; color: var(--bleu-texte); background: var(--calque); overflow-wrap: anywhere; }
.page-email .schema-adresses figcaption { grid-column: 1 / -1; margin-top: 14px; font-size: var(--t-6); color: var(--ardoise); }
@media (max-width: 479px) {
  .page-email .schema-ligne { padding: 8px 0; font-size: var(--t-5); }
  .page-email .schema-domaine { padding-inline: 6px; }
}

/* E-mail pro : cinq points, en ligne sur ordinateur, en fiche sur mobile */
.page-email .email-points { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; border-top: var(--trait); border-bottom: var(--trait-fin); }
.page-email .email-points > div { padding: 18px 24px 24px; border-left: var(--trait-fin); }
.page-email .email-points > div:first-child { padding-left: 0; border-left: 0; }
.page-email .email-points dt { font-size: var(--t-6); color: var(--ardoise); }
.page-email .email-points dd { margin: 8px 0 0; font-family: var(--police-titre); font-size: var(--t-4); font-weight: 560; line-height: 1.35; letter-spacing: -0.01em; color: var(--encre); }
@media (max-width: 1023px) {
  .page-email .email-points { grid-template-columns: minmax(0, 1fr); border-bottom: 0; }
  .page-email .email-points > div, .page-email .email-points > div:first-child { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 14px 0; border-left: 0; border-bottom: var(--trait-fin); }
  .page-email .email-points dd { margin: 0; font-size: var(--t-5); }
}
@media (max-width: 479px) {
  .page-email .email-points > div, .page-email .email-points > div:first-child { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

.page-demenagement .etapes h3 { font-size: var(--t-4); }
/* == FIN:domaine-mail == */

/* == PAGES:aide-legal == */
/* Assistance, conditions, mentions légales, confidentialité et page introuvable (06/11/2026).
   Les pages légales gardent leur texte : seule la composition change (sommaire collant,
   numéros d'article en marge, ligne d'environ 70 signes, impression propre). */

/* Un numéro de téléphone ne se coupe jamais. */
:is(.page-assistance, .page-legale, .page-introuvable) main a[href^="tel:"] { white-space: nowrap; }

/* ---------- Assistance ---------- */
.page-assistance .heros-produit h1 { max-width: 14ch; }
.page-assistance .heros-produit .contacts { margin: 0; }
.page-assistance .traite { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--trait); border-bottom: var(--trait-fin); }
.page-assistance .traite-col { min-width: 0; padding: 28px 32px 32px; }
.page-assistance .traite-col:first-child { padding-left: 0; }
.page-assistance .traite-col:last-child { padding-right: 0; }
.page-assistance .traite-col + .traite-col { border-left: var(--trait-fin); }
.page-assistance .traite h3 { font-size: var(--t-3); }
.page-assistance .traite-role { margin: 4px 0 0; font-size: var(--t-6); color: var(--ardoise); }
.page-assistance .traite-liste { display: grid; margin: 18px 0 0; padding: 0; list-style: none; font-size: var(--t-6); line-height: 1.5; }
.page-assistance .traite-liste li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; }
.page-assistance .traite-liste .ic { width: 17px; height: 17px; margin-top: 3px; color: var(--encre); stroke-width: 2.25; }
.page-assistance .traite-note { margin: 14px 0 0; font-size: var(--t-6); color: var(--ardoise); }
@media (max-width: 1023px) {
  .page-assistance .traite { grid-template-columns: minmax(0, 1fr); border-bottom: 0; }
  .page-assistance .traite-col, .page-assistance .traite-col:first-child, .page-assistance .traite-col:last-child { padding: 24px 0 26px; }
  .page-assistance .traite-col + .traite-col { border-left: 0; border-top: var(--trait-fin); }
}

/* ---------- Pages légales ---------- */
.page-legale .legal-tete { padding-bottom: clamp(40px, 5vw, 64px); }
.page-legale .legal-tete h1 { max-width: 18ch; }
.page-legale .legal-version { margin: 16px 0 0; font-family: var(--police-titre); font-size: var(--t-4); font-weight: 500; letter-spacing: -0.01em; color: var(--bleu-texte); }
.page-legale .legal-tete .heros-texte { max-width: 44em; margin-top: 12px; }
.page-legale .legal {
  --retrait: 4.25rem;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-3); align-items: start;
  padding: clamp(48px, 6vw, 80px) 0 var(--e-section);
}

/* Sommaire : collant à côté du texte sur ordinateur, en tête de page sur mobile. */
.page-legale .sommaire { grid-column: 1 / span 3; position: sticky; top: calc(var(--haut-entete) + 32px); }
.page-legale .sommaire-defile {
  max-height: calc(100vh - var(--haut-entete) - 64px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  margin: -6px -8px -6px -6px; padding: 6px 8px 6px 6px;
}
.page-legale .sommaire-titre { margin: 0 0 10px; font-size: var(--t-6); font-weight: 600; color: var(--encre); }
.page-legale .sommaire ol { margin: 0; padding: 8px 0 0; list-style: none; border-top: var(--trait); }
.page-legale .sommaire a {
  display: grid; grid-template-columns: minmax(0, 1fr); padding: 6px 0;
  font-size: var(--t-6); line-height: 1.35; color: var(--ardoise); text-decoration: none; text-wrap: pretty; transition: color 150ms ease;
}
.page-legale .sommaire a:has(.sommaire-num) { grid-template-columns: 1.75rem minmax(0, 1fr); }
.page-legale .sommaire a:hover { color: var(--bleu); }
.page-legale .sommaire-num { color: var(--ardoise-2); font-variant-numeric: tabular-nums; }
.page-legale .sommaire a:hover .sommaire-num { color: inherit; }

/* Texte : une colonne d'environ 70 signes, numéros d'article dans la marge. */
.page-legale .legal-texte { grid-column: 5 / -1; min-width: 0; max-width: 33em; }
.page-legale .legal-article + .legal-article { margin-top: 56px; }
.page-legale .legal-texte h2 { margin: 0 0 16px; font-size: var(--t-3); letter-spacing: -0.015em; }
.page-legale .legal-texte h2:has(.legal-num) { display: grid; grid-template-columns: var(--retrait) minmax(0, 1fr); align-items: baseline; margin-left: calc(-1 * var(--retrait)); }
.page-legale .legal-num {
  font-family: var(--police-titre); font-size: var(--t-2); font-weight: 240; line-height: 1; letter-spacing: -0.03em;
  color: var(--bleu-texte); font-variant-numeric: tabular-nums; transition: color 200ms ease;
}
.page-legale .legal-article:target .legal-num, .page-legale h2:target .legal-num { color: var(--bleu); font-weight: 400; }
.page-legale .legal-texte p, .page-legale .legal-texte li { color: var(--ardoise); }
.page-legale .legal-texte p { margin: 0 0 14px; }
.page-legale .legal-texte p:last-child { margin-bottom: 0; }
.page-legale .legal-texte strong { color: var(--encre); font-weight: 600; }
.page-legale .legal-texte ul { margin: 0 0 16px; padding-left: 1.2em; }
.page-legale .legal-texte ul:last-child { margin-bottom: 0; }
.page-legale .legal-texte li { margin: 7px 0; padding-left: 4px; }
.page-legale .legal-texte li::marker { color: var(--ardoise-2); }
.page-legale .legal-texte code {
  padding: 1px 5px; border-radius: 4px; background: var(--gris-fond); color: var(--encre);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.875em;
}
/* Liste longue à intertitres (confidentialité) : un filet par point. */
.page-legale .legal-texte .legal-points { padding: 0; list-style: none; border-top: var(--trait); }
.page-legale .legal-points li { margin: 0; padding: 14px 0 15px; border-bottom: var(--trait-fin); }
/* Tableaux à deux colonnes (finalités, durées) et fiches d'identité (mentions). */
.page-legale .legal-tableau { margin: 0; border-top: var(--trait); }
.page-legale .legal-tableau > div { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 4px 28px; padding: 14px 0; border-bottom: var(--trait-fin); }
.page-legale .legal-tableau dt { color: var(--encre); }
.page-legale .legal-tableau dd { margin: 0; color: var(--ardoise); }
.page-legale .fiche dl { border-top: var(--trait); }
.page-legale .fiche dl > div { grid-template-columns: minmax(7rem, 12rem) minmax(0, 1fr); align-items: baseline; }
.page-legale .fiche dt { padding-top: 0; }
.page-legale .fiche + p { margin-top: 20px; }
.page-legale .legal-pied { margin-top: 64px; padding-top: 20px; border-top: var(--trait-fin); font-size: var(--t-6); }

@media (max-width: 1023px) {
  .page-legale .legal { display: block; }
  .page-legale .sommaire { position: static; margin-bottom: 56px; }
  .page-legale .sommaire-defile { max-height: none; overflow: visible; margin: 0; padding: 0; }
  .page-legale .legal-texte h2:has(.legal-num) { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; margin-left: 0; }
  .page-legale .legal-num { font-size: 1.75rem; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .page-legale .sommaire ol { columns: 2; column-gap: var(--e-4); }
  .page-legale .sommaire li { break-inside: avoid; }
}
@media (max-width: 599px) {
  .page-legale .legal-tableau > div { grid-template-columns: minmax(0, 1fr); }
  .page-legale .fiche dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media print {
  .page-legale :is(.entete, .lien-evitement, .pied, .fil-ariane, .sommaire, .toasts) { display: none; }
  .page-legale .legal-tete { padding: 0 0 16px; border: 0; }
  .page-legale .legal { display: block; padding: 0; }
  .page-legale .legal-texte { max-width: none; }
  .page-legale .legal-texte h2:has(.legal-num) { grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; margin-left: 0; }
  .page-legale .legal-texte h2 { break-after: avoid; }
  .page-legale .legal-texte :is(p, li, dd) { color: #000; }
}

/* ---------- Page introuvable ---------- */
.page-introuvable .perdu { padding: clamp(40px, 6vw, 88px) 0 var(--e-section); }
.page-introuvable .perdu-grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-3); align-items: start; }
.page-introuvable .perdu-texte { grid-column: 1 / span 5; }
.page-introuvable .perdu-code {
  margin: 0 0 12px; font-family: var(--police-titre); font-size: clamp(4.5rem, 3rem + 4vw, 6rem); font-weight: 220;
  line-height: 0.9; letter-spacing: -0.04em; color: var(--bleu-texte); font-variant-numeric: tabular-nums;
}
.page-introuvable h1 { max-width: 13ch; font-size: var(--t-1); }
.page-introuvable .heros-texte { max-width: 32em; }
.page-introuvable .perdu-plan { grid-column: 7 / -1; padding-top: 8px; }
.page-introuvable .perdu-plan-titre { margin: 0 0 10px; font-family: var(--police-texte); font-size: var(--t-6); font-weight: 600; letter-spacing: 0; color: var(--encre); }
.page-introuvable .perdu-plan ul { margin: 0; padding: 0; list-style: none; border-top: var(--trait); }
.page-introuvable .perdu-plan li { border-bottom: var(--trait-fin); }
.page-introuvable .perdu-plan a { display: grid; gap: 1px; padding: 11px 10px 12px; color: var(--encre); text-decoration: none; transition: background-color 140ms ease; }
.page-introuvable .perdu-plan a:hover { background: var(--calque); }
.page-introuvable .perdu-plan a:focus-visible { outline-offset: -3px; }
.page-introuvable .perdu-plan strong { font-weight: 600; }
.page-introuvable .perdu-plan span { font-size: var(--t-6); line-height: 1.4; color: var(--ardoise); }
@media (max-width: 1023px) {
  .page-introuvable .perdu-grille { display: block; }
  .page-introuvable .perdu-plan { margin-top: 56px; padding-top: 0; }
  .page-introuvable .perdu-plan a { padding-inline: 0; }
  .page-introuvable .perdu-plan a:hover { background: transparent; color: var(--bleu); }
}
/* == FIN:aide-legal == */

/* == PAGES:parcours == */
/* Parcours de commande et de connexion : panier, commande/merci, connexion, connexion/mot-de-passe,
   connexion/google, inscription. Les règles d'origine (§4 : panier*, connexion*, merci*) restent en place
   pour l'espace et les retouches du 06/11 ; ce bloc les aligne sur le nouveau système : titres en Bricolage
   aux pas t-2 et t-3, filets plutôt qu'ombres, rayons de 10 et 14 px, numéros d'étape cerclés comme .etapes,
   récapitulatif en cartouche (filet d'encre, comme le pied). Aucune classe ni aucun crochet lus par site.js
   ne changent. */

/* La page reste blanche, comme le reste du site : seule la zone de travail prend le gris des pages de service. */
body:is(.page-panier, .page-merci, .page-connexion) { background: var(--papier); }

/* ---------- Panier ---------- */
.page-panier .panier { padding: clamp(28px, 4vw, 48px) 0 var(--e-section); }
.page-panier .fil-ariane { margin-bottom: 18px; }
.page-panier .panier-tete { max-width: 780px; margin: 0 0 36px; }
.page-panier .panier h1 { margin: 0; font-size: var(--t-2); letter-spacing: -0.03em; }
.page-panier .panier-tete .chapeau { margin: 14px 0 0; }
.page-panier .panier-tete a { font-weight: 600; white-space: nowrap; }
.page-panier .panier-avis { margin: -12px 0 28px; }
@media (min-width: 960px) {
  .page-panier .panier-grille { grid-template-columns: minmax(0, 1fr) clamp(330px, 29vw, 400px); gap: 32px; }
}

/* Les cinq étapes : un panneau blanc à filet, un titre en Bricolage, le numéro cerclé de bleu. */
.page-panier .panier-etape { padding: clamp(22px, 2.6vw, 34px); border-color: var(--filet); border-radius: var(--r-bloc); }
.page-panier .panier-etape + .panier-etape { margin-top: 16px; }
.page-panier .panier-etape h2 {
  gap: 14px; margin-bottom: 22px;
  font-family: var(--police-titre); font-size: var(--t-3); font-weight: 600; line-height: 1.2; letter-spacing: -0.015em;
}
.page-panier .panier-etape h2 span {
  flex: none; width: 34px; height: 34px; border: 1.5px solid var(--bleu); background: var(--papier); color: var(--bleu);
  font-family: var(--police-titre); font-size: 1rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums;
}
.page-panier .panier-bloc { margin-top: 18px; }
.page-panier .etat-domaine:empty { min-height: 0; margin: 0; }
.page-panier .panier-renvoi { margin: 14px 0 0; font-size: var(--t-6); }
.page-panier .panier-aide { margin-top: 14px; font-size: 0.875rem; line-height: 1.5; color: var(--ardoise); }

/* Choix (formule, domaine, moyen de paiement rendu par site.js) : filet, rayon du bouton, coché sur le calque. */
.page-panier .choix-formules { gap: 10px; }
.page-panier .choix-formule {
  gap: 16px; padding: 18px 20px; border-color: var(--filet-fort); border-radius: var(--r-bouton); background: var(--papier);
}
.page-panier .choix-formule:hover { border-color: var(--ardoise-2); }
.page-panier .choix-formule:has(input:checked) { border-color: var(--bleu); box-shadow: inset 0 0 0 1px var(--bleu); background: var(--calque); }
.page-panier .choix-formule strong { font-size: var(--t-5); font-weight: 600; line-height: 1.35; }
.page-panier .choix-formule small { display: block; margin-top: 3px; font-size: var(--t-6); line-height: 1.45; color: var(--ardoise); }
.page-panier .choix-formule .pastille { margin-left: 8px; padding: 1px 9px; vertical-align: 1px; background: var(--calque-2); font-size: 0.8125rem; }
.page-panier .choix-formule .prix { display: grid; justify-items: end; gap: 2px; font-weight: 400; }
.page-panier .prix-ligne { display: inline-flex; align-items: baseline; gap: 6px; }
.page-panier .prix-montant { font-family: var(--police-titre); font-size: var(--t-3); font-weight: 620; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.page-panier .prix-unite { font-size: var(--t-6); font-weight: 500; color: var(--encre); }
.page-panier .choix-formule .prix small { display: block; margin: 0; color: var(--ardoise-2); font-variant-numeric: tabular-nums; }
.page-panier .moyens-attente { padding: 6px 0; color: var(--ardoise); }
/* Une seule offre : le choix reste un bouton radio coché (lu par site.js), masqué ; le cadre la présente comme choisie. */
.page-panier .choix-formule-seule { grid-template-columns: minmax(0, 1fr) auto; cursor: default; border-color: var(--bleu); background: var(--calque); }
.page-panier .choix-formule-seule:hover { border-color: var(--bleu); }
/* Au clavier, l'anneau entoure toute l'option plutôt que le seul bouton radio. */
@supports selector(:has(*)) {
  .page-panier .choix-formule:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
  .page-panier .choix-formule input:focus-visible { outline: none; }
}
@media (max-width: 559px) {
  .page-panier .choix-formule { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 6px 14px; padding: 16px; }
  .page-panier .choix-formule input { margin-top: 2px; }
  .page-panier .choix-formule .prix { grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 6px; }
  .page-panier .choix-formule .prix small { display: inline; margin: 0; }
  .page-panier .choix-formule .pastille { margin-left: 6px; }
  .page-panier .choix-formule-seule { grid-template-columns: minmax(0, 1fr); }
  .page-panier .choix-formule-seule .prix { grid-column: 1; }
}

/* Récapitulatif : un cartouche à filet d'encre, ce qu'on achète d'abord, puis HT, TVA et TTC. */
.page-panier .recapitulatif { top: calc(var(--haut-entete) + 24px); padding: 26px 28px 24px; border-color: var(--encre); border-radius: var(--r-bloc); box-shadow: none; }
.page-panier .recapitulatif h2 { margin: 0 0 8px; font-family: var(--police-titre); font-size: var(--t-3); font-weight: 600; letter-spacing: -0.015em; }
.page-panier .recapitulatif dl { gap: 0; }
.page-panier .recapitulatif dl > div { align-items: baseline; padding: 9px 0; border-bottom: var(--trait-fin); font-size: var(--t-6); line-height: 1.4; }
.page-panier .recapitulatif dt { color: var(--ardoise); }
.page-panier .recapitulatif dd { min-width: 0; overflow-wrap: anywhere; }
.page-panier .recap-lignes > div:last-child { border-bottom: 0; }
.page-panier .recap-montants { margin-top: 10px; border-top: var(--trait); }
.page-panier .recapitulatif .total { margin: 0; padding: 14px 0 2px; border: 0; font-size: var(--t-5); }
.page-panier .recapitulatif .total dt { color: var(--encre); font-weight: 600; }
.page-panier .recapitulatif .total dd { font-family: var(--police-titre); font-size: var(--t-3); font-weight: 620; letter-spacing: -0.02em; }
.page-panier .code-promo { margin-top: 18px; padding-top: 18px; }
.page-panier .code-promo > label { font-size: var(--t-6); }
.page-panier .case-conditions { margin-top: 20px; color: var(--ardoise); }
.page-panier .case-conditions input { width: 18px; height: 18px; margin-top: 2px; }
.page-panier .case-conditions a { color: var(--bleu); text-underline-offset: 0.18em; text-decoration-color: var(--bord-bleu); }
.page-panier .case-conditions a:hover { color: var(--bleu-survol); text-decoration-color: currentColor; }
.page-panier .recapitulatif-note { margin-top: 14px; font-size: 0.875rem; line-height: 1.5; color: var(--ardoise-2); }
@media (max-width: 479px) {
  .page-panier .recapitulatif { padding: 22px 18px 20px; }
}

/* ---------- Retour de paiement (commande/merci) ---------- */
.page-merci .merci { padding: clamp(40px, 6vw, 80px) 0 var(--e-section); background: var(--gris-fond); }
.page-merci .merci-carte { max-width: 680px; padding: clamp(26px, 4vw, 48px); border-color: var(--filet); border-radius: var(--r-bloc); box-shadow: none; }
.page-merci .merci-icone-neutre { background: var(--calque); color: var(--bleu-texte); }
.page-merci .merci-carte h1 { margin-top: 22px; font-size: var(--t-2); font-weight: 680; line-height: 1.08; letter-spacing: -0.03em; }
.page-merci .merci-carte > p { margin-top: 14px; font-size: var(--t-5); line-height: 1.6; color: var(--ardoise); }
.page-merci .merci-recap { gap: 0; margin-top: 28px; padding: 0; border-top: var(--trait); border-radius: 0; background: none; }
.page-merci .merci-recap div { padding: 11px 0; border-bottom: var(--trait-fin); font-size: var(--t-6); }
.page-merci .merci-recap dt { color: var(--ardoise); }
.page-merci .merci-actions { margin-top: 28px; }
.page-merci .merci-carte > .merci-contact { margin-top: 28px; padding-top: 18px; font-size: var(--t-6); color: var(--ardoise); }
.page-merci .merci-contact a { color: var(--bleu); text-underline-offset: 0.18em; text-decoration-color: var(--bord-bleu); }
.page-merci .merci-contact a:hover { color: var(--bleu-survol); text-decoration-color: currentColor; }

/* ---------- Connexion, mot de passe, retour de Google, inscription ---------- */
/* Carte calée en haut, à la hauteur du titre du panneau : le titre ne saute plus quand un formulaire remplace l'autre. */
.page-connexion .connexion-formulaire { place-items: start center; padding: clamp(40px, 5vw, 72px) var(--marge) clamp(56px, 6vw, 88px); }
.page-connexion .connexion-carte { width: min(100%, 440px); }
.page-connexion .connexion-carte h1 { margin-bottom: 12px; font-size: var(--t-2); line-height: 1.06; }
.page-connexion .connexion-carte > p:not(.connexion-autre) { font-size: var(--t-5); line-height: 1.6; color: var(--ardoise); }
.page-connexion .connexion-avis { border-radius: var(--r-bouton); line-height: 1.5; }
.page-connexion .connexion-autre { padding-top: 20px; border-top-color: var(--filet); color: var(--ardoise); }
.page-connexion .formulaire-note { color: var(--ardoise-2); line-height: 1.5; }
/* Le panneau bleu : la surface de la marque, l'anneau en bas (§4), une liste à filets blancs comme la bande. */
.page-connexion .connexion-cote { --focus: #fff; padding: clamp(40px, 5vw, 72px) clamp(28px, 4.4vw, 64px); }
.page-connexion .connexion-cote ul { gap: 0; max-width: 30em; margin-top: 32px; border-top: 1px solid rgb(255 255 255 / 0.34); color: var(--sur-bleu); }
.page-connexion .connexion-cote li { align-items: flex-start; gap: 14px; padding: 13px 0 14px; border-bottom: 1px solid rgb(255 255 255 / 0.22); line-height: 1.45; }
.page-connexion .connexion-cote li .ic { margin-top: 1px; }
.page-connexion .connexion-cote-note { max-width: 30em; margin: 24px 0 0; font-size: var(--t-6); line-height: 1.55; color: var(--sur-bleu); }
.page-connexion .connexion-cote-note a { color: #fff; font-weight: 600; white-space: nowrap; text-underline-offset: 3px; text-decoration-color: rgb(255 255 255 / 0.6); }
.page-connexion .connexion-cote-note a:hover { text-decoration-color: #fff; }
@media (max-width: 899px) {
  .page-connexion .connexion-cote { padding: 40px var(--marge) calc(28vw + 32px); }
}
/* == FIN:parcours == */