/* Les styles du theme. Les couleurs viennent de theme.json, pour que l'editeur
   les propose aussi : une seule source, pas deux qui se contredisent. */

:root {
    --u-serif: "EB Garamond", Georgia, "Times New Roman", serif;
    --u-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

body {
    margin: 0;
    background: var(--wp--preset--color--fond);
    color: var(--wp--preset--color--texte);
    /* theme.json pose la police sur les blocs, pas sur body : sans cette ligne
       tout ce qui n est pas un bloc retombe sur la police du systeme. */
    font-family: var(--u-sans);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--wp--preset--color--accent); }

/* ── En-tête de page ─────────────────────────────────────────────────────────
   Deux colonnes sur grand écran, une seule sur téléphone. Le texte garde une
   marge généreuse à gauche : l'aplomb vient du vide autant que de la taille. */

.u-entete {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(32px, 5vw, 56px);
    align-items: center;
    padding: clamp(48px, 8vw, 104px) clamp(20px, 5vw, 72px) clamp(56px, 9vw, 120px);
    max-width: 1440px;
    margin: 0 auto;
}
/* La seconde colonne n'existe que s'il y a une image. Sans cette regle, un
   en-tete sans capture gardait une colonne vide et le titre se retrouvait
   comprime sur la moitie de la page. */
@media (min-width: 900px) {
    .u-entete:has(.u-scene) { grid-template-columns: 1fr 1fr; gap: clamp(40px, 4vw, 64px); }
}

.u-surtitre {
    margin: 0 0 clamp(16px, 2vw, 24px);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--wp--preset--color--discret);
}

.u-titre {
    margin: 0 0 clamp(18px, 2.5vw, 28px);
    font-family: var(--u-serif);
    /* EB Garamond a une petite hauteur d'x et un dessin delie : a taille egale
       elle parait nettement plus petite que les autres serif et le titre perd
       sa presence. On la monte d'un cran et on prend le demi-gras. */
    font-weight: 500;
    font-size: clamp(2.9rem, 7.2vw, 5.6rem);
    line-height: 1.0;
    letter-spacing: -0.022em;
    color: var(--wp--preset--color--titre);
    /* La ligature « fi » avale le point du i : a cette taille, « Planifie »
       devient illisible. */
    font-variant-ligatures: none;
}
/* L'italique de la serif porte l'accent. Un seul mot par titre, jamais deux. */
.u-titre em { font-style: italic; color: var(--wp--preset--color--accent); }

.u-phrase {
    margin: 0 0 clamp(24px, 3vw, 36px);
    max-width: 38ch;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.55;
    color: var(--wp--preset--color--texte);
}

.u-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.u-bouton {
    display: inline-block;
    padding: 15px 28px;
    border-radius: 999px;
    background: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--fond);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), filter 0.25s ease;
}
.u-bouton:hover { transform: translateY(-1px); filter: brightness(1.06); }

.u-lien {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--wp--preset--color--titre);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}

.u-reassurance {
    margin: clamp(16px, 2vw, 22px) 0 0;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--wp--preset--color--discret);
}

/* La capture déborde légèrement du bord droit sur grand écran : elle donne
   l'impression que l'application continue au-delà de la page. */
.u-capture { display: block; }
.u-capture img { display: block; width: 100%; height: auto; border-radius: 14px; }
/* L'en-tete deborde volontairement a droite : la capture doit donner
   l'impression que l'application continue au-dela de la page. Mais un
   debordement compte comme du contenu et ajoute une barre de defilement, donc
   c'est la section qui le coupe. */
.u-entete { overflow: hidden; }
@media (min-width: 900px) {
    /* La scene deborde de sa colonne pour gagner en presence, mais elle
       s'arrete au bord de la fenetre : les deux appareils restent entiers. */
    .u-entete__image { margin-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .u-bouton { transition: none; }
}

/* ── Les appareils ───────────────────────────────────────────────────────────
   Dessinés en CSS, pas cuits dans l'image. La capture reste remplaçable depuis
   l'admin sans refaire le montage, le cadre reste net sur un écran à haute
   densité, et on n'envoie pas un dessin d'ordinateur de 500 Ko à chaque
   visiteur.

   Tout est en pixels, jamais en pourcentage. Une bordure de 3 % sur un
   téléphone rendu à 150 px de large fait 5 px de chaque côté : le châssis
   devient plus épais que celui d'une tablette des années 2010. Les vraies
   bordures d'écran se mesurent en millimètres, donc en pixels ici. */

.u-scene {
    position: relative;
    padding-bottom: clamp(14px, 3vw, 34px);
    --u-chassis: #1c1917;
    --u-chassis-clair: #34302c;
    --u-metal: linear-gradient(180deg, #3a3532 0%, #23201d 42%, #171412 100%);
}

/* ── L'ordinateur portable ─────────────────────────────────────────────── */

.u-portable { position: relative; }

/* Le capot. Les coins du haut sont arrondis, ceux du bas presque droits :
   c'est la charnière qui les ferme. */
.u-portable__ecran {
    position: relative;
    aspect-ratio: 16 / 10;
    padding: clamp(6px, 0.75vw, 10px);
    padding-bottom: clamp(12px, 1.5vw, 19px);
    border-radius: clamp(9px, 1.1vw, 14px) clamp(9px, 1.1vw, 14px) 2px 2px;
    background: var(--u-metal);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 30px 60px -26px rgba(23, 18, 14, 0.55);
}

/* La caméra, dans le menton du bas comme sur un portable, pas en haut. */
.u-portable__ecran::after {
    content: "";
    position: absolute;
    bottom: clamp(4px, 0.5vw, 7px);
    left: 50%;
    transform: translateX(-50%);
    width: clamp(3px, 0.34vw, 5px);
    height: clamp(3px, 0.34vw, 5px);
    border-radius: 50%;
    background: #49433e;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5) inset;
}

.u-portable__ecran img {
    display: block;
    width: 100%;
    height: 100%;
    /* « cover » plutôt que « contain » : une capture au mauvais rapport se
       recadre au lieu de laisser deux bandes noires dans l'écran. */
    object-fit: cover;
    object-position: top center;
    border-radius: 3px;
    background: var(--wp--preset--color--papier);
    /* Le liseré sombre autour de la dalle : sans lui, une capture claire se
       fond dans le châssis et l'écran disparaît. */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
}

/* Le reflet. Une diagonale très pâle, à peine visible, qui empêche l'écran
   d'avoir l'air d'une simple image collée. */
.u-portable__ecran .u-reflet {
    position: absolute;
    inset: clamp(6px, 0.75vw, 10px);
    bottom: clamp(12px, 1.5vw, 19px);
    border-radius: 3px;
    pointer-events: none;
    background: linear-gradient(112deg,
        rgba(255, 255, 255, 0.16) 0%,
        rgba(255, 255, 255, 0.05) 26%,
        rgba(255, 255, 255, 0) 47%);
}

/* Le socle, vu de face et donc plus large que le capot : c'est cette
   différence de largeur qui donne la perspective, sans transform 3D. */
.u-portable__socle {
    position: relative;
    width: 118%;
    margin-left: -9%;
    height: clamp(10px, 1.25vw, 15px);
    border-radius: 0 0 clamp(8px, 1vw, 12px) clamp(8px, 1vw, 12px);
    background: linear-gradient(180deg, #423c37 0%, #2a2521 30%, #14110f 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.22) inset,
        0 14px 26px -12px rgba(23, 18, 14, 0.55);
}

/* L'encoche d'ouverture, au centre du socle. */
.u-portable__socle::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 13%;
    height: 46%;
    border-radius: 0 0 99px 99px;
    background: rgba(0, 0, 0, 0.45);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* ── Le téléphone ──────────────────────────────────────────────────────── */

.u-telephone {
    position: absolute;
    /* Le portable peut sortir du cadre, le telephone non : un appareil entier
       coupe en deux se lit comme un bug, pas comme un cadrage. */
    /* Recalcule avec la nouvelle largeur de scene pour garder le telephone a
       la meme distance du bord de la fenetre : c'est ce cadrage qui marche. */
    right: -6.8%;
    bottom: -3%;
    width: 27%;
    min-width: 104px;
    aspect-ratio: 9 / 19.5;
    /* Trois pixels de châssis, pas trois pour cent. */
    padding: 3px;
    border-radius: clamp(16px, 2.6vw, 32px);
    background: var(--u-metal);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.45),
        0 1px 0 rgba(255, 255, 255, 0.28) inset,
        0 30px 50px -18px rgba(23, 18, 14, 0.55);
}

/* Les rayons des coins sont concentriques : celui de l'écran vaut celui du
   châssis moins l'épaisseur. Sans ça, l'angle de la dalle a l'air de mordre
   dans le cadre. */
.u-telephone__ecran {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: calc(clamp(16px, 2.6vw, 32px) - 3px);
    background: var(--wp--preset--color--papier);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}

.u-telephone__ecran img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* L'îlot. Petit, arrondi, posé sur l'écran et non dans le châssis. Sans lui,
   le téléphone n'est qu'une carte aux coins ronds. */
.u-telephone__ilot {
    position: absolute;
    top: clamp(4px, 0.55vw, 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 30%;
    height: clamp(6px, 0.8vw, 11px);
    border-radius: 99px;
    background: #100e0d;
}

/* Les boutons de tranche. Trois traits de deux pixels, et le téléphone cesse
   d'être un rectangle. */
.u-telephone::before,
.u-telephone::after {
    content: "";
    position: absolute;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, #3c3733, #201d1a);
}
/* Volume, à gauche. */
.u-telephone::before {
    left: -2px;
    top: 21%;
    height: 13%;
    box-shadow: 0 calc(1px + 9%) 0 0 #2c2825;
}
/* Veille, à droite. */
.u-telephone::after {
    right: -2px;
    top: 27%;
    height: 11%;
}
/* Sur telephone, les deux appareils restent : c'est la promesse de la ligne de
   reassurance juste au-dessus, « tes donnees sur tous tes appareils ». Montrer
   un seul des deux la contredirait a l'image.

   Le telephone grossit un peu et se recentre : a cette largeur, un quart de
   scene ne ferait plus qu'une vignette. */
@media (max-width: 767px) {
    .u-scene { padding-bottom: 8%; }
    .u-telephone {
        right: 2%;
        bottom: -6%;
        width: 33%;
    }
}

/* ── Le bandeau ──────────────────────────────────────────────────────────────
   Il ne colle pas en haut de l'écran : sur une page qui vend le silence, une
   barre qui suit le défilement est du bruit permanent. */

/* Le bandeau tient toute la largeur, son contenu se borne à l'intérieur. C'est
   ce qui permet au fond de traverser l'écran quand la barre se pose, sans quoi
   une bande crème flotterait au milieu d'un grand écran avec le texte de la
   page défilant de chaque côté. */
.u-bandeau { width: 100%; }

.u-bandeau__dedans {
    display: flex;
    align-items: center;
    gap: clamp(16px, 3vw, 40px);
    padding: clamp(18px, 2.2vw, 28px) clamp(20px, 5vw, 72px);
    max-width: 1440px;
    margin: 0 auto;
}

.u-marque {
    display: inline-flex;
    align-items: center;
    /* Les memes valeurs que la landing actuelle : logo de 40 px, 14 px d'ecart,
       mot en Space Grotesk 26 px. C'est le seul endroit du site ou l'on garde
       la typographie d'origine, parce que c'est la marque et qu'elle ne doit
       pas changer en meme temps que le reste. */
    gap: 14px;
    text-decoration: none;
    color: var(--wp--preset--color--encre);
    margin-right: auto;
}
/* Le logo hérite de la couleur du texte : une seule source, et il suit le
   thème sans qu'on maintienne deux fichiers. */
.u-marque svg {
    display: block;
    width: auto;
    height: clamp(30px, 3.2vw, 40px);
    flex-shrink: 0;
}
/* Centrer les deux boites ne centre pas ce qu'on voit : les jambages du mot,
   les deux p d'Unstoppable, tirent sa boite vers le bas, et la hauteur de
   capitale se retrouve deux pixels trop haut face au logo. On aligne le milieu
   des capitales sur le milieu du logo, pas le milieu des boites. Valeur mesuree
   dans le navigateur : hauteur de capitale 15 px, ecart a corriger 0,75 px pour
   un corps de 25,9, soit 0,029 em. */
.u-marque__texte {
    transform: translateY(0.029em);
    font-family: "Space Grotesk", var(--u-sans);
    font-size: clamp(1.28rem, 2vw, 1.62rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
}

.u-nav__liste {
    display: flex;
    gap: clamp(14px, 2vw, 28px);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
    font-weight: 600;
}
.u-nav__liste a {
    color: var(--wp--preset--color--encre);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}
.u-nav__liste a:hover { border-bottom-color: currentColor; }
@media (max-width: 819px) { .u-nav { display: none; } }

.u-bandeau__cta {
    padding: 10px 20px;
    border-radius: 999px;
    background: var(--wp--preset--color--encre);
    color: var(--wp--preset--color--fond);
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

/* Le lien d'évitement, pour qui navigue au clavier : il saute le bandeau et
   va droit au contenu. Invisible tant qu'il n'a pas le focus. */
.u-evitement {
    position: absolute;
    left: -9999px;
    z-index: 99;
    padding: 12px 20px;
    background: var(--wp--preset--color--encre);
    color: var(--wp--preset--color--fond);
    font-weight: 700;
    text-decoration: none;
}
.u-evitement:focus { left: 12px; top: 12px; }

/* ── Le menu de téléphone ────────────────────────────────────────────────────
   Piloté par une case à cocher cachée, pas par du JavaScript : le panneau
   s'ouvre même si le script ne charge pas, et le clavier le pilote tout seul,
   sans qu'on écrive une ligne de gestion du focus. */

.u-menu__etat { position: absolute; opacity: 0; pointer-events: none; }

.u-menu__bouton {
    display: none;
    width: 40px;
    height: 40px;
    margin-left: 4px;
    border-radius: 10px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Les trois barres sont faites d'un seul élément et de ses deux pseudos : une
   seule chose à animer, et la croix se ferme sans décalage. */
.u-menu__barres,
.u-menu__barres::before,
.u-menu__barres::after {
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--wp--preset--color--encre);
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.16s ease;
}
.u-menu__barres { position: relative; }
.u-menu__barres::before { position: absolute; top: -6px; }
.u-menu__barres::after  { position: absolute; top: 6px; }

.u-menu__etat:checked ~ .u-menu__bouton .u-menu__barres { background: transparent; }
.u-menu__etat:checked ~ .u-menu__bouton .u-menu__barres::before { transform: translateY(6px) rotate(45deg); }
.u-menu__etat:checked ~ .u-menu__bouton .u-menu__barres::after  { transform: translateY(-6px) rotate(-45deg); }

/* Le contour de focus doit rester visible pour qui navigue au clavier : c'est
   le label qui reçoit le style, la case étant invisible. */
.u-menu__etat:focus-visible ~ .u-menu__bouton {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: 2px;
}

.u-menu__panneau {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 20;
    padding: 8px clamp(20px, 5vw, 72px) 28px;
    background: var(--wp--preset--color--fond);
    border-bottom: 1px solid rgba(23, 18, 14, 0.1);
}

.u-menu__liste {
    margin: 0;
    padding: 0;
    list-style: none;
}
.u-menu__liste li + li { border-top: 1px solid rgba(23, 18, 14, 0.08); }
.u-menu__liste a {
    display: block;
    padding: 15px 0;
    font-family: var(--u-serif);
    font-size: 1.45rem;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--wp--preset--color--encre);
    text-decoration: none;
}

.u-menu__cta {
    display: block;
    margin-top: 18px;
    padding: 15px 24px;
    border-radius: 999px;
    background: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--fond);
    font-weight: 700;
    font-size: 0.95rem;
    text-align: center;
    text-decoration: none;
}

@media (max-width: 819px) {
    /* Le bandeau devient le repère du panneau, qui se déploie juste dessous. */
    .u-bandeau { position: relative; }
    .u-menu__bouton { display: flex; }
    /* Le bouton du bandeau laisse la place : il est repris en bas du panneau,
       là où le pouce arrive, plutôt que collé au burger. */
    .u-bandeau__cta { display: none; }
    .u-menu__etat:checked ~ .u-menu__panneau { display: block; top: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .u-menu__barres,
    .u-menu__barres::before,
    .u-menu__barres::after { transition: none; }
}

/* ── Le sur-titre de section ─────────────────────────────────────────────────
   Trois mots en petites capitales grises, centrés au-dessus du titre. Il dit
   de quoi on va parler, c'est tout ce qu'on lui demande.

   Il a d'abord porté un numéro et un filet qui traversait la page, « 01 · LE
   SYSTÈME », pour donner un air de publication. C'est un tic de magazine : sur
   un site, personne ne compte les chapitres, et le filet coupait la page en
   tranches. */

.u-surtitre--section {
    margin: 0 0 clamp(14px, 1.8vw, 20px);
    text-align: center;
}

/* ── Section produit ─────────────────────────────────────────────────────────
   Une idée, une phrase, une capture. Le vide autour n'est pas du remplissage :
   c'est lui qui dit que ce qu'on montre compte. */

.u-produit {
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(56px, 9vw, 120px) clamp(20px, 5vw, 72px) clamp(64px, 10vw, 140px);
    overflow: hidden;
}

/* Assez large pour que « Six outils. Un seul système. » tienne sur une ligne
   sur grand écran : un titre de trois mots coupé en deux perd son aplomb. La
   phrase, elle, garde sa largeur de lecture. */
.u-produit__texte {
    max-width: 22ch;
    margin: 0 auto clamp(40px, 6vw, 72px);
    text-align: center;
}
@media (min-width: 720px) {
    .u-produit__texte { max-width: 46ch; }
}

/* Le titre de section est plus petit que celui de l'en-tête : il y a une seule
   voix principale par page, et c'est celle du haut. */
.u-titre--section {
    font-size: clamp(2rem, 4.6vw, 3.4rem);
    margin-bottom: clamp(12px, 1.6vw, 18px);
}

.u-phrase--centre { margin: 0 auto; max-width: 34ch; }

/* La capture est centrée et bornée : au-delà d'une certaine largeur, un écran
   d'ordinateur en pleine page cesse d'être une démonstration et devient un
   fond d'écran. */
.u-produit__image {
    position: relative;
    max-width: min(880px, 100%);
    margin: 0 auto;
}

/* ── Les outils, moment par moment ───────────────────────────────────────────
   Un panneau par moment, pas un par outil. La première version en montrait un
   par outil sous des onglets qui désignaient des groupes : cliquer sur
   « Décider ce qui compte » n'affichait qu'un des quatre outils du moment et
   atténuait les trois autres. On grisait ce que l'onglet venait d'annoncer.

   Un panneau prend toute la largeur, donc rien ne dépasse du cadre, et ce
   qu'on voit correspond exactement à l'onglet allumé. */

.u-outils {
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(56px, 9vw, 120px) 0 clamp(64px, 10vw, 140px);
}
.u-outils > .u-surtitre--section,
.u-outils > .u-produit__texte {
    padding-left: clamp(20px, 5vw, 72px);
    padding-right: clamp(20px, 5vw, 72px);
}
/* La mesure du titre se prend en pixels et non en caractères : le « ch » se
   calcule sur le sans du corps de page alors que le titre est en serif et
   trois fois plus gros, et il hachait la phrase en six lignes. */
@media (min-width: 720px) {
    .u-outils > .u-produit__texte { max-width: 780px; }
}

/* ── Les onglets ─────────────────────────────────────────────────────────
   Quatre pastilles noires alignées, c'était la réponse par défaut : lisible,
   et sans rapport avec le reste de la page. Ici chaque moment porte son trait
   et son nom en serif, posé sur un rail crème ; l'actif prend le papier, une
   bordure et son pictogramme en vermillon. */

.u-onglets {
    display: flex;
    gap: 4px;
    width: max-content;
    max-width: calc(100% - 2 * clamp(20px, 5vw, 72px));
    margin: 0 auto clamp(32px, 4vw, 52px);
    padding: 5px;
    border-radius: 999px;
    background: rgba(23, 18, 14, 0.045);
    overflow-x: auto;
    scrollbar-width: none;
}
.u-onglets::-webkit-scrollbar { display: none; }

.u-onglet {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: none;
    padding: 13px 26px;
    border-radius: 999px;
    border: 1px solid transparent;
    color: var(--wp--preset--color--texte);
    font-family: var(--u-serif);
    /* EB Garamond a une petite hauteur d'x : au corps qui convient au sans du
       reste de la page, elle paraît un cran trop petite et l'onglet se lit mal
       d'un coup d'œil. On la monte. */
    font-size: clamp(1.12rem, 1.4vw, 1.26rem);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.1;
    text-decoration: none;
    white-space: nowrap;
    /* Aucune propriété de mise en page dans la transition : la couleur et
       l'ombre suffisent, et elles ne font pas recalculer la page. */
    transition: background-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
                border-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
                color 260ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.u-onglet .u-picto {
    width: 22px;
    height: 22px;
    color: var(--wp--preset--color--discret);
    transition: color 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.u-onglet:hover { color: var(--wp--preset--color--titre); }
.u-onglet:hover .u-picto { color: var(--wp--preset--color--titre); }

.u-onglet.est-actif {
    background: var(--wp--preset--color--papier);
    border-color: rgba(23, 18, 14, 0.1);
    color: var(--wp--preset--color--titre);
    box-shadow: 0 1px 2px rgba(23, 18, 14, 0.05), 0 6px 16px -8px rgba(23, 18, 14, 0.18);
}
.u-onglet.est-actif .u-picto { color: var(--wp--preset--color--accent); }
.u-onglet:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: 2px;
}

/* ── Les panneaux ────────────────────────────────────────────────────────── */

.u-carrousel { position: relative; }

.u-carrousel__piste {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    /* Pas de « scroll-behavior: smooth » ici. Pose sur le conteneur, il force
       en doux tout deplacement, y compris ceux que le script fait pour amener
       un panneau en place, et le calage annulait alors l'animation : l'onglet
       s'allumait mais la bande ne bougeait pas. C'est au script de demander le
       doux quand il le veut, panneau par panneau. */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.u-carrousel__piste::-webkit-scrollbar { display: none; }
.u-carrousel__piste:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: 6px;
}

.u-moment {
    flex: none;
    /* Toute la largeur, exactement. C'est ce qui fait qu'aucune capture ne
       déborde du cadre et qu'on ne voit jamais deux écrans à la fois. */
    width: 100%;
    /* « start » plutot que « center » : sur un panneau aussi large que son
       conteneur les deux reviennent au meme, mais « start » se calcule a partir
       du bord, comme le script, et les deux ne peuvent plus diverger. */
    scroll-snap-align: start;
    display: grid;
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
    padding: 0 clamp(20px, 5vw, 72px);
}
@media (min-width: 900px) {
    /* La capture prend la plus grande part : c'est elle qu'on vient voir, la
       liste ne fait que nommer ce qu'on regarde. */
    .u-moment { grid-template-columns: 1.45fr 1fr; }
}

.u-moment__image { position: relative; min-width: 0; }

.u-moment__outils {
    display: grid;
    gap: clamp(18px, 2.2vw, 26px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.u-outil__nom {
    margin: 0 0 4px;
    font-family: var(--u-serif);
    font-weight: 500;
    font-size: clamp(1.15rem, 1.7vw, 1.4rem);
    line-height: 1.15;
    letter-spacing: -0.018em;
    color: var(--wp--preset--color--titre);
}
.u-outil__phrase {
    margin: 0;
    max-width: 38ch;
    font-size: clamp(0.92rem, 1.1vw, 1rem);
    line-height: 1.55;
    color: var(--wp--preset--color--texte);
}
/* ── La déclaration ──────────────────────────────────────────────────────────
   Le seul écran sombre de la page. Après deux sections sur fond crème, le noir
   arrête la lecture : c'est ce contraste qui donne son poids à la phrase, pas
   sa taille.

   Les couleurs se redéfinissent ici plutôt que de s'écrire à la main sur
   chaque élément : le repère, la phrase et la ligne de réassurance héritent
   alors des mêmes variables que partout ailleurs, et un futur bloc posé dans
   cette section sera lisible sans qu'on y pense. */

.u-declaration {
    --wp--preset--color--titre:   #fdfaf4;
    --wp--preset--color--texte:   rgba(253, 250, 244, 0.72);
    --wp--preset--color--discret: rgba(253, 250, 244, 0.45);
    --wp--preset--color--fond:    #17120e;

    background: #17120e;
    color: rgba(253, 250, 244, 0.72);
}

.u-declaration__dedans {
    display: grid;
    gap: clamp(36px, 5vw, 72px);
    align-items: center;
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(64px, 10vw, 132px) clamp(20px, 5vw, 72px);
}
@media (min-width: 900px) {
    /* La photo prend un peu moins que le texte : c'est la phrase qu'on vient
       lire, la photo ne fait que la rendre crédible. */
    .u-declaration__dedans { grid-template-columns: 1.15fr 1fr; }
}
/* Sans photo, la phrase reprend toute la largeur et se centre : une colonne
   vide à côté d'elle la ferait paraître bancale. */
.u-declaration.est-seule .u-declaration__dedans { grid-template-columns: 1fr; }
/* La largeur se mesure sur le titre, pas sur le conteneur : « ch » vaut la
   largeur d'un zéro dans la fonte de l'élément, et le conteneur hérite du sans
   du corps de page alors que la phrase est en serif et trois fois plus grosse.
   Posée sur le conteneur, la mesure donnait une colonne de deux mots. */
.u-declaration.est-seule .u-declaration__texte {
    margin: 0 auto;
    text-align: center;
}
.u-declaration.est-seule .u-titre--declaration {
    max-width: 19ch;
    margin-left: auto;
    margin-right: auto;
}
.u-declaration.est-seule .u-phrase { margin-left: auto; margin-right: auto; }
.u-declaration.est-seule .u-actions { justify-content: center; }

/* Plus petite que le titre de l'en-tête : il y a une seule voix principale par
   page, et c'est celle du haut. Mais plus serrée, aussi : une phrase de
   conviction se dit d'un bloc. */
.u-titre--declaration {
    font-size: clamp(2.2rem, 4.8vw, 3.6rem);
    line-height: 1.06;
    max-width: 20ch;
}

/* Le bouton vermillon reste vermillon sur le noir : c'est le même geste que
   partout, et l'accent se détache mieux ici que nulle part ailleurs. Seul son
   texte change, car le crème du fond clair disparaîtrait dessus. */
.u-declaration .u-bouton { color: #fdfaf4; }

.u-declaration__photo {
    display: block;
    border-radius: 18px;
    overflow: hidden;
}
.u-declaration__photo img {
    display: block;
    width: 100%;
    height: auto;
    /* Un portrait : une main qui écrit se lit mieux debout que couchée. */
    aspect-ratio: 4 / 5;
    object-fit: cover;
    /* La photo vient d'ailleurs que la page. On la ramène vers le crème pour
       qu'elle n'y soit pas un corps étranger. */
    filter: saturate(0.82) contrast(1.04);
}

/* ── Les tarifs ──────────────────────────────────────────────────────────────
   Deux colonnes séparées par un filet, pas deux cartes posées sur la page. Une
   carte ombrée dit « encadré publicitaire » ; un filet dit « voici le choix »,
   et c'est exactement ce qu'on demande au lecteur. */

.u-tarifs {
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(56px, 9vw, 120px) clamp(20px, 5vw, 72px) clamp(64px, 10vw, 140px);
}

.u-tarifs__grille {
    display: grid;
    gap: clamp(32px, 4vw, 56px);
    max-width: 940px;
    margin: 0 auto;
}
@media (min-width: 760px) {
    .u-tarifs__grille {
        grid-template-columns: repeat(var(--u-offres, 2), 1fr);
        /* Les cinq rangs d'une offre : nom, prix, accroche, bouton, liste. Les
           offres les reprennent en sous-grille, donc les listes démarrent à la
           même hauteur même quand une accroche tient sur deux lignes. Sans ça,
           deux colonnes qu'on vient comparer se lisent en décalé. */
        grid-template-rows: auto auto auto auto auto;
        /* L'ecart vertical entre offres n'a plus lieu d'etre : en sous-grille,
           il s'inserait entre chaque rang et etirait l'offre sur deux ecrans.
           Ce sont les marges des elements qui reglent l'espacement. */
        row-gap: 0;
    }
    .u-offre {
        grid-row: span 5;
        grid-template-rows: subgrid;
        align-content: start;
    }
    /* Le filet vit sur la colonne, pas entre deux cartes : il sépare deux
       lectures d'une même page au lieu de border deux objets. */
    .u-offre + .u-offre {
        padding-left: clamp(32px, 4vw, 56px);
        border-left: 1px solid rgba(23, 18, 14, 0.12);
    }
}

.u-offre { display: grid; justify-items: start; }

.u-offre__tete {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: clamp(10px, 1.4vw, 14px);
}

.u-offre__nom {
    margin: 0;
    font-family: var(--u-sans);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wp--preset--color--discret);
}

.u-offre__badge {
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(232, 85, 45, 0.12);
    color: var(--wp--preset--color--accent);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Le prix est le seul chiffre de la page. Il se lit en serif, à la taille d'un
   titre : c'est l'information qu'on vient chercher ici. */
.u-offre__prix {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 10px;
    font-family: var(--u-serif);
    font-weight: 500;
    /* Le prix est le seul chiffre de la page et la raison pour laquelle on y
       vient : il se lit de loin, à la taille d'un titre d'en-tête. */
    font-size: clamp(3.4rem, 7vw, 5rem);
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--wp--preset--color--titre);
    font-variant-ligatures: none;
}
.u-offre__periode {
    font-family: var(--u-sans);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--wp--preset--color--discret);
}

.u-offre__accroche {
    margin: 0 0 clamp(22px, 2.8vw, 30px);
    max-width: 30ch;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--wp--preset--color--texte);
}

/* L'offre secondaire garde un bouton, mais pas le vermillon : deux appels de
   même force côte à côte, et le lecteur n'en suit aucun. */
.u-bouton--sobre {
    background: transparent;
    color: var(--wp--preset--color--titre);
    border: 1px solid rgba(23, 18, 14, 0.22);
}
.u-bouton--sobre:hover { filter: none; border-color: var(--wp--preset--color--titre); }

.u-offre__liste {
    margin: clamp(24px, 3vw, 32px) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}
.u-offre__liste li {
    position: relative;
    padding-left: 22px;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--wp--preset--color--texte);
}
/* Une coche dessinée en bordures plutôt qu'un caractère : le glyphe ✓ change
   de dessin et d'alignement selon la police installée chez le lecteur. */
.u-offre__liste li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.42em;
    width: 9px;
    height: 5px;
    border-left: 1.5px solid var(--wp--preset--color--accent);
    border-bottom: 1.5px solid var(--wp--preset--color--accent);
    transform: rotate(-45deg);
}

.u-reassurance--centre {
    margin-top: clamp(32px, 4vw, 48px);
    text-align: center;
}

/* ── Le pied de page ─────────────────────────────────────────────────────────
   Il ne vend plus rien : la dernière invitation à agir est passée juste
   au-dessus. Ce qui reste, c'est ce qu'on cherche quand on cherche, et ça se
   lit en petit sans s'excuser. */

.u-pied {
    border-top: 1px solid rgba(23, 18, 14, 0.1);
    background: var(--wp--preset--color--fond);
}

.u-pied__dedans,
.u-pied__bas {
    max-width: 1440px;
    margin: 0 auto;
    padding-left: clamp(20px, 5vw, 72px);
    padding-right: clamp(20px, 5vw, 72px);
}

.u-pied__dedans {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(28px, 4vw, 56px);
    padding-top: clamp(44px, 6vw, 72px);
    padding-bottom: clamp(32px, 4vw, 48px);
}

/* Le logo du pied est plus petit que celui du bandeau : ici la marque signe,
   elle n'annonce plus. */
.u-marque--pied { margin-right: 0; }
.u-marque--pied svg { height: clamp(24px, 2.4vw, 30px); }
.u-marque--pied .u-marque__texte { font-size: clamp(1.05rem, 1.5vw, 1.25rem); }

.u-pied__phrase {
    margin: 14px 0 0;
    max-width: 34ch;
    font-family: var(--u-serif);
    font-size: clamp(1rem, 1.3vw, 1.12rem);
    font-style: italic;
    line-height: 1.4;
    color: var(--wp--preset--color--discret);
}

/* Les liens se rangent en colonnes titrées plutôt qu'en une rangée : à sept
   liens, une rangée devient une suite de mots où l'œil ne sait plus lequel
   concerne le produit et lequel les mentions légales. */

.u-pied__colonnes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 40px) clamp(28px, 4vw, 64px);
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 620px) {
    .u-pied__colonnes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.u-pied__titre {
    margin: 0 0 12px;
    font-family: var(--u-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--wp--preset--color--titre);
}

.u-pied__liens {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.88rem;
}
.u-pied__liens a {
    color: var(--wp--preset--color--texte);
    text-decoration: none;
    /* Un soulignement qui n'apparaît qu'au survol : dans une colonne de liens,
       un trait sous chacun fait une grille, pas une navigation. */
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: color 200ms cubic-bezier(0.22, 1, 0.36, 1),
                border-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.u-pied__liens a:hover {
    color: var(--wp--preset--color--titre);
    border-bottom-color: currentColor;
}

/* Le point fort qu'on ne dit nulle part ailleurs : la même chose sur le
   téléphone et sur l'ordinateur, parce que rien ne vit dans le navigateur. */
.u-pied__partout {
    margin: 14px 0 0;
    max-width: 34ch;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--wp--preset--color--discret);
}
.u-pied__bas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
    padding-top: clamp(18px, 2.4vw, 24px);
    padding-bottom: clamp(32px, 4vw, 48px);
    border-top: 1px solid rgba(23, 18, 14, 0.08);
    font-size: 0.78rem;
    color: var(--wp--preset--color--discret);
}
.u-pied__mention { margin: 0; }
.u-pied__contact {
    color: var(--wp--preset--color--discret);
    text-decoration: none;
    border-bottom: 1px solid rgba(23, 18, 14, 0.2);
    padding-bottom: 1px;
}
.u-pied__contact:hover { color: var(--wp--preset--color--titre); }

/* ── La déclaration sur photo ────────────────────────────────────────────────
   L'image ne décore pas : elle donne à la phrase un lieu et un corps. Une page
   qui ne montre que des écrans a besoin d'une seule chose humaine. */

.u-declaration.a-un-fond { position: relative; isolation: isolate; }

.u-declaration__fond {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
}
.u-declaration__fond img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Le point d'intérêt d'une photo est rarement au milieu du cadre, et c'est
       le haut qu'on rogne quand la section devient large et basse. */
    object-position: center 40%;
    /* La photo garde ses couleurs. Le noir et blanc réglait le contraste, mais
       il éteignait une lumière de fin de journée qui est précisément ce que la
       page raconte. On calme la saturation, juste assez pour que l'image ne
       dispute pas le vermillon du bouton, et c'est le voile qui se charge du
       reste. */
    filter: saturate(0.9) contrast(1.03) brightness(0.82);
}

/* L'ombre est portée là où se pose la phrase, c'est-à-dire au centre, et laisse
   le bord gauche à la lumière. Un voile uniforme assez dense pour que le texte
   tienne assombrirait aussi le seul endroit de l'image qui vaut le coup d'œil. */
.u-declaration__voile {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg,
        rgba(23, 18, 14, 0.18) 0%,
        rgba(23, 18, 14, 0.34) 22%,
        rgba(23, 18, 14, 0.62) 45%,
        rgba(23, 18, 14, 0.66) 100%);
}

/* Sur un téléphone, la phrase occupe toute la largeur : l'ombre latérale ne
   protège plus rien et redevient verticale. */
@media (max-width: 760px) {
    .u-declaration__voile {
        background: linear-gradient(180deg,
            rgba(23, 18, 14, 0.38) 0%,
            rgba(23, 18, 14, 0.52) 55%,
            rgba(23, 18, 14, 0.78) 100%);
    }
}
/* Sur photo, la phrase a besoin d'une ombre portée : le voile règle le cas
   général, l'ombre règle le grain clair qui passe juste derrière une lettre. */
.u-declaration.a-un-fond .u-titre--declaration,
.u-declaration.a-un-fond .u-phrase {
    text-shadow: 0 1px 24px rgba(23, 18, 14, 0.5);
}

/* Une photo de fond a besoin d'air, pas de la moitié de l'écran. La section
   garde sa forme de bandeau : la phrase et la suite de la page doivent se voir
   dans le même mouvement. */
@media (min-width: 760px) {
    .u-declaration.a-un-fond .u-declaration__dedans {
        padding-top: clamp(88px, 10vw, 144px);
        padding-bottom: clamp(88px, 10vw, 144px);
    }
}

/* La phrase reste au centre de l'image, elle ne se réfugie pas dans un coin.
   C'est le noir et blanc qui rend ça possible : sur une photo en couleur, il
   aurait fallu lui céder la moitié vide du cadre. */
.u-declaration.a-un-fond .u-declaration__texte {
    width: min(100%, 720px);
    max-width: none;
    margin: 0 auto;
    text-align: center;
}
/* Aucune borne sur le titre : les retours sont choisis dans l'administration,
   et une largeur maximale par-dessus recoupait la ligne la plus longue en
   deux, ce qui reproduisait exactement le défaut qu'on cherchait à corriger.
   Le conteneur suffit à empêcher le débordement quand la fenêtre rétrécit. */
.u-declaration.a-un-fond .u-titre--declaration {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}
.u-declaration.a-un-fond .u-phrase { max-width: 46ch; }
/* Les retours choisis dans la citation tombent juste sur un écran large. Sur
   un téléphone, ils couperaient une ligne déjà trop longue en deux morceaux
   bancals : là, on laisse le texte couler. */
@media (max-width: 619px) {
    .u-saut { display: none; }
}

/* ── La grille des outils ────────────────────────────────────────────────────
   Le carrousel montre les écrans, cette grille les récapitule juste avant
   qu'on demande l'inscription. Des cases, ici, sont la bonne réponse : on
   compare six choses de même nature, et le filet qui les sépare est ce qui
   rend la comparaison lisible. */

.u-grille {
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(56px, 9vw, 120px) clamp(20px, 5vw, 72px) clamp(64px, 10vw, 140px);
}

.u-grille__cases {
    display: grid;
    gap: clamp(14px, 1.6vw, 20px);
    grid-template-columns: 1fr;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
@media (min-width: 560px) { .u-grille__cases { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .u-grille__cases { grid-template-columns: repeat(3, 1fr); } }

/* Le contenu se cale en haut, il ne se centre pas. Centré, le nom d'un outil
   dont la phrase tient sur une ligne remontait de quelques pixels par rapport
   à ses voisins dont la phrase en prend deux : neuf noms sur trois hauteurs
   différentes, et la grille perdait son quadrillage.

   Aligner par le haut suffit, parce que le pictogramme a une taille fixe : le
   nom tombe donc toujours à la même distance du bord. Le vide se reporte en
   bas, où personne ne le compte. */
.u-case {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 13px;
    min-height: 200px;
    padding: clamp(30px, 3.6vw, 42px) clamp(20px, 2.6vw, 30px);
    border: 1px solid rgba(23, 18, 14, 0.12);
    border-radius: 14px;
    background: var(--wp--preset--color--papier);
    text-align: center;
}

/* Le picto est un trait, mais sa forme se remplit de vermillon très dilué.

   Il était gris et fin, par crainte de faire un sapin de Noël avec neuf
   accents alignés. Le résultat était fade : neuf traits gris pâles dans neuf
   cases pâles, et rien n'accrochait l'œil. Le remplissage donne de la matière
   sans crier, parce qu'il reste à l'intérieur du dessin et que le trait, lui,
   passe en encre. Les tracés ouverts n'enferment aucune aire et ne se
   remplissent donc de rien : la même règle vaut pour tous. */
.u-picto {
    width: 26px;
    height: 26px;
    color: var(--wp--preset--color--discret);
    flex: none;
}

/* Le trait en vermillon, et rien dedans.

   Une premiere version remplissait la forme d'un vermillon dilue : l'interieur
   virait au rose, une couleur que la page n'emploie nulle part, et le trait
   noir par-dessus faisait un troisieme ton. Le dessin n'a besoin que d'un
   trait, et de la meme couleur que le mot accentue du titre juste au-dessus. */
.u-case .u-picto {
    width: 38px;
    height: 38px;
    color: var(--wp--preset--color--accent);
    fill: none;
}

.u-case__nom {
    margin: 0;
    font-family: var(--u-serif);
    font-weight: 500;
    /* Un cran au-dessus : c'est le nom qu'on lit en balayant la grille, la
       phrase en dessous n'est lue que pour celui sur lequel on s'arrête. */
    font-size: clamp(1.24rem, 1.9vw, 1.5rem);
    line-height: 1.15;
    letter-spacing: -0.018em;
    color: var(--wp--preset--color--titre);
}

.u-case__ligne {
    margin: 0;
    max-width: 28ch;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--wp--preset--color--texte);
}

/* La dernière case n'est pas un outil, c'est le bouton. Une grille de cinq
   laisse un trou béant en bas à droite ; l'invitation à commencer le remplit
   et se pose là où l'œil arrive en dernier. */
.u-case--finale {
    padding: 0;
    border-color: rgba(232, 85, 45, 0.35);
    background: rgba(232, 85, 45, 0.05);
}
.u-case__lien {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 100%;
    min-height: inherit;
    padding: clamp(24px, 3vw, 34px);
    text-decoration: none;
    color: var(--wp--preset--color--accent);
    transition: background-color 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.u-case__lien:hover { background: rgba(232, 85, 45, 0.1); }
.u-case__lien .u-picto { color: var(--wp--preset--color--accent); width: 40px; height: 40px; fill: none; }
.u-case__lien .u-case__nom { color: var(--wp--preset--color--accent); }
.u-case__lien:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: 3px;
    border-radius: 14px;
}

.u-grille__note {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 6px 16px;
    margin: clamp(28px, 3.4vw, 40px) 0 0;
    font-size: 0.88rem;
    color: var(--wp--preset--color--discret);
}
.u-grille__note .u-lien { font-size: 0.88rem; }

/* Le titre de la grille est court et tient sur une ligne dès qu'on lui laisse
   la place. La mesure de 46ch héritée de la section produit est calculée sur
   le sans du corps de page, pas sur la serif du titre : elle coupait « en »
   tout seul en bout de ligne. */
.u-grille .u-produit__texte { max-width: 24ch; }
@media (min-width: 720px) {
    .u-grille .u-produit__texte { max-width: 1120px; }
}

/* Même correctif que pour la grille, et pour la même raison : la mesure en
   « ch » est calculée sur le sans du corps de page, alors que le titre est en
   serif et trois fois plus gros. Elle le hachait en six lignes. Une largeur en
   pixels, elle, veut dire la même chose pour les deux fontes. */
@media (min-width: 720px) {
    .u-outils > .u-produit__texte { max-width: 780px; }
}

/* ── Le passage d'une langue à l'autre ───────────────────────────────────────
   Deux lettres dans un cercle, à droite de tout. C'est un détail de service,
   pas un argument : il doit se trouver quand on le cherche et disparaître
   quand on ne le cherche pas. */

.u-langue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(23, 18, 14, 0.14);
    border-radius: 999px;
    color: var(--wp--preset--color--discret);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: color 200ms cubic-bezier(0.22, 1, 0.36, 1),
                border-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.u-langue:hover {
    color: var(--wp--preset--color--titre);
    border-color: var(--wp--preset--color--titre);
}

/* « Se connecter » n'est pas un appel à l'action : il ne porte ni fond ni
   soulignement permanent, il attend celui qui le cherche. */
.u-bandeau__connexion {
    border-bottom-color: transparent;
    color: var(--wp--preset--color--texte);
    font-weight: 500;
}
.u-bandeau__connexion:hover {
    color: var(--wp--preset--color--titre);
    border-bottom-color: currentColor;
}

/* Sur un écran étroit, la barre garde le logo, le bouton et le burger. Le lien
   de connexion passe dans le panneau du menu, où il a la place de se lire. */
@media (max-width: 899px) {
    .u-bandeau__connexion { display: none; }
}

/* ── Le problème ─────────────────────────────────────────────────────────────
   Le seul endroit de la page qui nomme la douleur du lecteur avant de lui
   vendre quoi que ce soit. Tout le reste montre des écrans et annonce des
   bénéfices ; ici on décrit l'état dans lequel on arrive sur cette page. */

.u-probleme {
    background: var(--wp--preset--color--papier);
    border-top: 1px solid rgba(23, 18, 14, 0.07);
    border-bottom: 1px solid rgba(23, 18, 14, 0.07);
}

.u-probleme__dedans {
    max-width: 780px;
    margin: 0 auto;
    padding: clamp(64px, 9vw, 120px) clamp(20px, 5vw, 72px);
    text-align: center;
}

.u-probleme .u-surtitre--section { margin-bottom: clamp(16px, 2vw, 24px); }

/* Plus petit que le titre de l'en-tête, plus grand que ceux des sections : la
   phrase doit peser, mais elle ne dispute pas la première place. */
.u-titre--probleme {
    font-size: clamp(1.9rem, 4vw, 3rem);
    line-height: 1.08;
    margin-bottom: clamp(18px, 2.4vw, 26px);
}

.u-probleme .u-phrase--centre {
    max-width: 52ch;
    margin-bottom: clamp(28px, 3.4vw, 40px);
}

/* ── Les mots-clés ───────────────────────────────────────────────────────
   Pas décoratifs : quelqu'un qui cherche « revue hebdomadaire » y reconnaît
   son vocabulaire. D'où le contour plutôt que le fond, qui les pose comme des
   étiquettes et non comme des boutons qu'on aurait envie de cliquer. */

.u-mots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 0 clamp(30px, 3.6vw, 44px);
    padding: 0;
    list-style: none;
}

.u-mot {
    padding: 6px 14px;
    border: 1px solid rgba(23, 18, 14, 0.14);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--wp--preset--color--texte);
}

.u-actions--centre { justify-content: center; }

/* Les mots-clés débordent la colonne de texte : six étiquettes dans 780 px
   laissaient la dernière seule sur sa rangée, ce qui la faisait passer pour un
   ajout de dernière minute. Le paragraphe, lui, garde sa largeur de lecture. */
.u-mots {
    width: min(100vw - 2 * clamp(20px, 5vw, 72px), 980px);
    margin-left: 50%;
    transform: translateX(-50%);
}

/* ── Le Coaching 360 ─────────────────────────────────────────────────────────
   La plus grosse fonctionnalité du produit a sa section, pas une case dans une
   grille de neuf. On lui donne la roue en grand, parce que c'est un objet qui
   se comprend sans explication : la silhouette irrégulière dit où la vie
   penche, ce qu'une liste de huit nombres ne montre jamais. */

.u-trois-cent-soixante {
    background: var(--wp--preset--color--papier);
    border-top: 1px solid rgba(23, 18, 14, 0.07);
    border-bottom: 1px solid rgba(23, 18, 14, 0.07);
}

.u-trois-cent-soixante__dedans {
    display: grid;
    gap: clamp(40px, 6vw, 88px);
    align-items: center;
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(64px, 9vw, 128px) clamp(20px, 5vw, 72px);
}
@media (min-width: 900px) {
    /* La roue prend la plus grande part : c'est l'argument, le texte
       l'accompagne. */
    .u-trois-cent-soixante__dedans { grid-template-columns: 1fr 1.1fr; }
}

.u-trois-cent-soixante__texte { max-width: 46ch; }

.u-trois-cent-soixante__points {
    display: grid;
    gap: 12px;
    margin: 0 0 clamp(26px, 3vw, 34px);
    padding: 0;
    list-style: none;
}
.u-trois-cent-soixante__points li {
    position: relative;
    padding-left: 22px;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--wp--preset--color--texte);
}
/* Une coche dessinée en bordures plutôt qu'un caractère : le glyphe ✓ change
   de dessin et d'alignement selon la police installée chez le lecteur. */
.u-trois-cent-soixante__points li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.45em;
    width: 9px;
    height: 5px;
    border-left: 1.5px solid var(--wp--preset--color--accent);
    border-bottom: 1.5px solid var(--wp--preset--color--accent);
    transform: rotate(-45deg);
}

.u-trois-cent-soixante__roue { min-width: 0; }

/* ── La roue ─────────────────────────────────────────────────────────────── */

.u-roue {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
    margin: 0 auto;
    /* Les graduations et les séparateurs héritent de cette couleur : une seule
       valeur à changer pour toute la mécanique du dessin. */
    color: var(--wp--preset--color--encre);
    overflow: visible;
}

.u-roue__part {
    fill: var(--wp--preset--color--accent);
    fill-opacity: var(--u-part, 0.6);
    stroke: var(--wp--preset--color--papier);
    stroke-width: 1;
}

.u-roue__mot {
    font-family: var(--u-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    fill: var(--wp--preset--color--texte);
}

/* Le titre ne se mesure pas comme le paragraphe : « ch » se calcule sur le
   sans du corps de page, et 46 d'entre eux coupaient « vie. » sur une
   troisième ligne alors que le saut voulu en prévoyait deux. */
.u-trois-cent-soixante .u-titre--section { max-width: none; }
.u-trois-cent-soixante__texte { max-width: 34rem; }
.u-trois-cent-soixante .u-phrase,
.u-trois-cent-soixante__points { max-width: 44ch; }

/* Ce avec quoi on repart.

   Un bloc d'encre dans une page claire. C'est la seule ligne du bloc qui parle
   du résultat : tout ce qui précède décrit le chemin. Au même corps que les
   puces, elle se lisait comme une cinquième puce et passait inaperçue.

   Le sombre plutôt qu'un cadre teinté de vermillon : un cadre de la couleur
   d'accent est le costume d'un encadré d'avertissement dans toutes les
   interfaces, et ici on annonce une bonne nouvelle. Il fait au passage écho au
   bandeau de la citation, plus haut : la page se répond d'un bloc à l'autre au
   lieu d'empiler des styles.

   Le vermillon s'éclaircit sur ce fond. Le ton du fond clair y devient sourd,
   parce qu'une couleur foncée sur un fond foncé perd le contraste qui la
   faisait exister. */
.u-promesse {
    margin: 0 0 clamp(24px, 3vw, 34px);
    max-width: 32ch;
    padding: clamp(22px, 2.6vw, 30px) clamp(24px, 2.8vw, 32px);
    border-radius: 18px;
    background: var(--wp--preset--color--encre, #17120e);
    font-family: var(--u-serif);
    font-weight: 500;
    font-size: clamp(1.3rem, 2vw, 1.72rem);
    line-height: 1.22;
    letter-spacing: -0.018em;
    color: var(--wp--preset--color--papier);
    font-variant-ligatures: none;
}
.u-promesse em { font-style: italic; color: #ff7a52; }

/* La dernière case n'est pas un outil mais un bouton : elle garde son
   contenu centré, parce qu'un bouton se pose au milieu de sa surface. */
.u-case--finale { justify-content: center; }

/* ── Le mouvement ────────────────────────────────────────────────────────────
   Rien de décoratif. Une section qui monte de quelques pixels en arrivant dit
   au lecteur qu'il change de sujet ; une roue qui se dessine montre qu'elle se
   remplit de valeurs ; un bandeau qui se compacte rend sa place au contenu.

   Tout est conditionné à la classe posée par le script : sans lui, une page
   dont le JavaScript ne charge pas resterait invisible, ses sections attendant
   une révélation qui ne viendrait jamais. */

/* Seul ce que le script a explicitement marqué comme caché l'est. Masquer tout
   « data-apparait » par défaut rendait la visibilité du contenu dépendante
   d'une animation : si l'observateur ne rapportait rien, la page restait
   blanche. Une animation manquée ne coûte rien, un contenu invisible coûte le
   lecteur. */
.a-du-mouvement [data-apparait].est-cache {
    opacity: 0;
    transform: translateY(18px);
    /* Une sortie exponentielle : le mouvement part vite et se pose, comme un
       objet qu'on lâche plutôt qu'on pousse. Jamais de rebond, qui donnerait
       à une page de travail des manières de dessin animé. */
    transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.a-du-mouvement [data-apparait] {
    transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.a-du-mouvement [data-apparait].est-arrive {
    opacity: 1;
    transform: none;
}

/* Les éléments d'une même section se révèlent l'un après l'autre, à un
   dixième de seconde d'écart. C'est ce décalage qui fait lire la section comme
   une phrase plutôt que comme un bloc qui s'allume. */
.a-du-mouvement [data-apparait].est-cache[style*="--u-rang"],
.a-du-mouvement [data-apparait].est-arrive[style*="--u-rang"] {
    transition-delay: calc(var(--u-rang) * 90ms);
}

/* ── Le bandeau qui se pose ──────────────────────────────────────────────── */

.u-bandeau {
    position: sticky;
    top: 0;
    z-index: 20;
    transition: background-color 320ms ease,
                box-shadow 320ms ease,
                backdrop-filter 320ms ease;
}
.u-bandeau.est-pose {
    background: rgba(248, 243, 234, 0.82);
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    box-shadow: 0 1px 0 rgba(23, 18, 14, 0.07);
}
/* Le logo et le nom rétrécissent avec lui : une barre plus basse dont le
   contenu garde sa taille se contente d'avoir l'air serrée. */
.u-bandeau.est-pose .u-marque svg { height: clamp(26px, 2.6vw, 32px); }
.u-bandeau.est-pose .u-marque__texte { font-size: clamp(1.12rem, 1.7vw, 1.36rem); }
.u-bandeau .u-marque svg,
.u-bandeau .u-marque__texte {
    transition: height 320ms cubic-bezier(0.16, 1, 0.3, 1),
                font-size 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── La parallaxe ────────────────────────────────────────────────────────
   Le script ne pose qu'un nombre de pixels dans une variable ; c'est le CSS
   qui décide quoi en faire. Un décalage vertical, jamais une échelle : agrandir
   une capture d'écran la rend floue. */

[data-flotte] { transform: translate3d(0, var(--u-flotte, 0px), 0); }

/* ── La roue qui se dessine ──────────────────────────────────────────────
   Les parts poussent depuis le centre, l'une après l'autre. C'est le seul
   endroit de la page où le mouvement raconte quelque chose de précis : une
   roue qui se remplit montre qu'on la remplit soi-même. */

.a-du-mouvement .u-trois-cent-soixante__roue[data-apparait].est-cache .u-roue__part {
    transform: scale(0.04);
    transform-origin: center;
    transform-box: fill-box;
    opacity: 0;
}
.a-du-mouvement .u-trois-cent-soixante__roue[data-apparait].est-arrive .u-roue__part {
    animation: u-pousse 620ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(var(--u-ordre, 0) * 70ms);
}
@keyframes u-pousse {
    from { transform: scale(0.04); opacity: 0; }
    to   { transform: none; opacity: 1; }
}
/* Le fond de la roue, lui, ne bouge pas : les graduations sont l'échelle sur
   laquelle les parts se mesurent, elles doivent être là avant elles. */

/* ── Les cases qui se soulèvent ──────────────────────────────────────────── */

.u-case,
.u-offre {
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 320ms cubic-bezier(0.16, 1, 0.3, 1),
                border-color 320ms ease;
}
@media (hover: hover) and (pointer: fine) {
    .u-case:hover {
        transform: translateY(-3px);
        border-color: rgba(23, 18, 14, 0.2);
        box-shadow: 0 12px 28px -18px rgba(23, 18, 14, 0.4);
    }
}

@media (prefers-reduced-motion: reduce) {
    .u-bandeau,
    .u-case,
    [data-flotte] { transition: none; transform: none; }
}

/* Le téléphone est posé en absolu et n'a pas de transformation propre : il peut
   donc recevoir la sienne sans écraser autre chose. Le portable non plus. Si
   l'un des deux venait à en porter une, il faudrait composer, pas remplacer. */
.u-portable[data-flotte],
.u-telephone[data-flotte] { will-change: transform; }

/* Les deux temps de la promesse. L'un décrit l'état d'avant, l'autre celui
   d'après : c'est le vide entre eux qui dit qu'il s'est passé quelque chose.
   Collées, les deux phrases se lisent comme une seule tirade. */
.u-promesse__temps { display: block; }
.u-promesse__temps + .u-promesse__temps { margin-top: 0.62em; }

/* ── Les questions fréquentes ────────────────────────────────────────────────
   Elles ne meublent pas : chacune répond à une objection qui empêche de sortir
   sa carte. Les réponses restent ouvertes plutôt que repliées, parce que celui
   qui hésite ne clique pas cinq fois pour vérifier qu'on ne le piège pas. */

/* Pas de filet propre : c'est le choix du fond qui sépare une section de la
   précédente. En posant les deux, on obtenait deux traits l'un sous l'autre
   là où la section d'avant est sur papier, et le doublon se voyait. */

.u-questions__dedans {
    max-width: 880px;
    margin: 0 auto;
    padding: clamp(56px, 8vw, 110px) clamp(20px, 5vw, 72px) clamp(64px, 9vw, 120px);
}

.u-questions__titre {
    text-align: center;
    margin-bottom: clamp(38px, 5vw, 60px);
}

.u-questions__liste {
    display: grid;
    gap: 0;
    margin: 0;
}

/* Un filet entre chaque question, pas une carte autour de chacune : sept
   cartes empilées dans une colonne font un objet lourd, là où des filets
   laissent lire la suite d'une traite. */
.u-question {
    border-bottom: 1px solid rgba(23, 18, 14, 0.1);
}
.u-question:first-child { border-top: 1px solid rgba(23, 18, 14, 0.1); }

.u-question__mot {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: clamp(20px, 2.4vw, 26px) 0;
    margin: 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--u-serif);
    font-weight: 500;
    font-size: clamp(1.12rem, 1.6vw, 1.32rem);
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--wp--preset--color--titre);
    transition: color 200ms ease;
}
/* Le triangle par défaut de « summary » : on le retire des deux façons que
   demandent les navigateurs, l'ancienne de WebKit et la moderne. */
.u-question__mot::-webkit-details-marker { display: none; }
.u-question__mot::marker { content: ""; }

.u-question__mot:hover { color: var(--wp--preset--color--accent); }
.u-question:has(> .u-question__mot:focus-visible) {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: 4px;
    border-radius: 4px;
}

.u-chevron {
    width: 22px;
    height: 22px;
    flex: none;
    margin-top: 0.12em;
    color: var(--wp--preset--color--accent);
    transition: transform 340ms cubic-bezier(0.16, 1, 0.3, 1);
}
.u-question[open] .u-chevron { transform: rotate(180deg); }

.u-question__dit {
    margin: 0;
    padding: 0 0 clamp(20px, 2.4vw, 26px);
    max-width: 68ch;
    font-size: clamp(0.94rem, 1.15vw, 1.02rem);
    line-height: 1.6;
    color: var(--wp--preset--color--texte);
}

/* L'ouverture s'anime. Un élément qui passe de zéro à sa hauteur réelle n'est
   animable que depuis peu : « interpolate-size » autorise le navigateur à
   calculer les étapes entre une hauteur nulle et « auto », ce qu'il refusait
   jusque-là. Là où ce n'est pas encore compris, la réponse apparaît d'un coup,
   ce qui reste correct. */
:root { interpolate-size: allow-keywords; }

.u-question::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition: block-size 340ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity 240ms ease,
                content-visibility 340ms allow-discrete;
}
.u-question[open]::details-content {
    block-size: auto;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .u-chevron,
    .u-question::details-content { transition: none; }
}

/* Un en-tête sans capture n'a pas besoin du vide réservé à celle-ci : la
   respiration prévue pour équilibrer une image laisse, quand il n'y en a pas,
   un trou entre le bouton et la section suivante. */
.u-entete:not(:has(.u-scene)) {
    padding-bottom: clamp(32px, 5vw, 64px);
}

/* Même correctif que sur les autres sections : la mesure en « ch » se calcule
   sur le sans du corps de page, pas sur la serif du titre, et elle laissait
   « tout. » seul sur sa ligne. */
@media (min-width: 720px) {
    .u-tarifs > .u-produit__texte { max-width: 720px; }
}

/* ── L'alternance des fonds ──────────────────────────────────────────────────
   Deux sections de la même couleur qui se suivent se lisent comme une seule,
   et on ne voit plus où l'une s'arrête. C'est la seule chose qui découpe une
   page longue, et comme elle dépend de ce qu'il y a autour, elle se règle
   section par section depuis l'administration. */

.est-sur-papier {
    background: var(--wp--preset--color--papier);
    border-top: 1px solid rgba(23, 18, 14, 0.07);
    border-bottom: 1px solid rgba(23, 18, 14, 0.07);
}
/* Deux sections claires qui se suivent n'ont pas besoin de deux filets l'un
   sur l'autre. */
.est-sur-papier + .est-sur-papier { border-top: 0; }

/* Une case qui mène quelque part est cliquable en entier : la surface qui
   réagit doit correspondre à ce que l'œil désigne, pas à un petit lien posé
   dans un coin. */
.u-case.a-un-lien { padding: 0; }

.u-case__vers {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 13px;
    width: 100%;
    height: 100%;
    padding: clamp(30px, 3.6vw, 42px) clamp(20px, 2.6vw, 30px);
    text-decoration: none;
    color: inherit;
}
.u-case__vers:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: 3px;
    border-radius: 14px;
}

/* La flèche ne s'affiche qu'au survol, et seulement là où il y a un curseur :
   sur un écran tactile elle resterait affichée en permanence sans jamais rien
   annoncer. */
.u-case__fleche {
    margin-top: auto;
    padding-top: 10px;
    color: var(--wp--preset--color--accent);
    font-size: 1.05rem;
    line-height: 1;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 280ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) and (pointer: fine) {
    .u-case.a-un-lien:hover .u-case__fleche { opacity: 1; transform: none; }
}
@media (hover: none) {
    .u-case__fleche { opacity: 1; transform: none; }
}

/* ── Les étapes ──────────────────────────────────────────────────────────────
   Ce qui va se passer, dans l'ordre. Quelqu'un à qui on demande quarante-cinq
   minutes veut savoir à quoi elles vont servir avant de les donner, et le
   détail rassure plus que la promesse. */

.u-etapes__dedans {
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(56px, 8vw, 112px) clamp(20px, 5vw, 72px) clamp(64px, 9vw, 124px);
}

.u-etapes__liste {
    counter-reset: u-etape;
    display: grid;
    gap: 0;
    max-width: 940px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

/* Le numéro vient d'un compteur CSS et non du contenu : intercaler une étape
   renumérote tout le monde sans qu'on y pense, et il devient impossible de se
   retrouver avec deux « 3 » dans la même liste. */
.u-etape {
    counter-increment: u-etape;
    position: relative;
    padding: clamp(22px, 2.6vw, 30px) 0 clamp(22px, 2.6vw, 30px) clamp(56px, 6vw, 84px);
    border-bottom: 1px solid rgba(23, 18, 14, 0.1);
}
.u-etape:first-child { border-top: 1px solid rgba(23, 18, 14, 0.1); }

.u-etape::before {
    content: counter(u-etape, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: clamp(24px, 2.8vw, 33px);
    font-family: var(--u-sans);
    font-size: clamp(0.86rem, 1.1vw, 0.98rem);
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--wp--preset--color--accent);
}

.u-etape__nom {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0 0 8px;
    font-family: var(--u-serif);
    font-weight: 500;
    font-size: clamp(1.2rem, 1.8vw, 1.44rem);
    line-height: 1.2;
    letter-spacing: -0.018em;
    color: var(--wp--preset--color--titre);
}

/* La durée se lit comme une mention et non comme une partie du titre : c'est
   une information de service, elle ne porte pas le propos. */
.u-etape__duree {
    font-family: var(--u-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wp--preset--color--discret);
}

.u-etape__texte {
    margin: 0;
    max-width: 72ch;
    font-size: clamp(0.94rem, 1.15vw, 1.02rem);
    line-height: 1.6;
    color: var(--wp--preset--color--texte);
}

/* ── Le texte suivi ──────────────────────────────────────────────────────────
   Les mentions légales, et tout ce qui se lit de haut en bas sans mise en
   page propre. Une colonne étroite, parce qu'une ligne qui traverse un écran
   de mille six cents pixels ne se lit pas : l'œil perd le début de la
   suivante en revenant à la ligne. */

.u-texte {
    max-width: 74ch;
    margin: 0 auto;
    padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 40px) clamp(64px, 9vw, 120px);
    font-size: clamp(0.96rem, 1.1vw, 1.04rem);
    line-height: 1.7;
    color: var(--wp--preset--color--texte);
}

.u-texte__titre {
    margin: 0 0 clamp(28px, 4vw, 44px);
    font-family: var(--u-serif);
    font-weight: 500;
    font-size: clamp(2rem, 4.4vw, 3.1rem);
    line-height: 1.06;
    letter-spacing: -0.024em;
    color: var(--wp--preset--color--titre);
    font-variant-ligatures: none;
}

/* Les titres de section sont nettement détachés du paragraphe qui précède et
   collés à celui qui suit : c'est cet écart inégal qui fait comprendre ce que
   le titre annonce, avant même de l'avoir lu. */
.u-texte h2 {
    margin: clamp(40px, 5vw, 60px) 0 clamp(10px, 1.2vw, 14px);
    font-family: var(--u-serif);
    font-weight: 500;
    font-size: clamp(1.24rem, 1.9vw, 1.5rem);
    line-height: 1.25;
    letter-spacing: -0.018em;
    color: var(--wp--preset--color--titre);
}
.u-texte h3 {
    margin: clamp(26px, 3vw, 34px) 0 8px;
    font-family: var(--u-sans);
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--wp--preset--color--titre);
}

.u-texte p { margin: 0 0 1.1em; }
.u-texte strong { color: var(--wp--preset--color--titre); font-weight: 600; }

.u-texte ul,
.u-texte ol {
    margin: 0 0 1.2em;
    padding-left: 1.3em;
}
.u-texte li { margin-bottom: 0.5em; }
.u-texte li::marker { color: var(--wp--preset--color--accent); }

.u-texte a {
    color: var(--wp--preset--color--titre);
    text-decoration: none;
    border-bottom: 1px solid rgba(232, 85, 45, 0.5);
    padding-bottom: 1px;
    transition: border-color 200ms ease;
}
.u-texte a:hover { border-bottom-color: var(--wp--preset--color--accent); }

/* La date de mise à jour ouvre ces pages : elle se lit comme une mention, pas
   comme le premier paragraphe du texte. */
.u-texte > p:first-of-type {
    font-size: 0.84rem;
    color: var(--wp--preset--color--discret);
    margin-bottom: clamp(28px, 3.4vw, 40px);
}

/* ── La pagination ───────────────────────────────────────────────────────── */

.u-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 72px) clamp(64px, 9vw, 110px);
}
.u-pagination a,
.u-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--wp--preset--color--texte);
    transition: background-color 200ms ease, color 200ms ease;
}
.u-pagination a:hover { background: rgba(23, 18, 14, 0.06); color: var(--wp--preset--color--titre); }
.u-pagination .current {
    background: var(--wp--preset--color--titre);
    color: var(--wp--preset--color--papier);
}
.u-pagination .dots { color: var(--wp--preset--color--discret); }

/* ── Un article ──────────────────────────────────────────────────────────── */

.u-article__tete {
    max-width: 74ch;
    margin: 0 auto;
    padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 40px) clamp(24px, 3vw, 36px);
    text-align: center;
}

.u-article__mentions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 0 0 clamp(16px, 2vw, 22px);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wp--preset--color--discret);
}

.u-article__titre {
    margin: 0;
    font-family: var(--u-serif);
    font-weight: 500;
    font-size: clamp(2.1rem, 5vw, 3.6rem);
    line-height: 1.04;
    letter-spacing: -0.026em;
    color: var(--wp--preset--color--titre);
    font-variant-ligatures: none;
}

/* Le chapeau est en serif comme le titre, pas en sans comme le corps : il
   appartient encore à l'ouverture, il ne commence pas la lecture. */
.u-article__chapeau {
    margin: clamp(18px, 2.2vw, 26px) auto 0;
    max-width: 56ch;
    font-family: var(--u-serif);
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    font-style: italic;
    line-height: 1.45;
    color: var(--wp--preset--color--texte);
}

.u-article__image {
    max-width: 1100px;
    margin: clamp(28px, 4vw, 48px) auto 0;
    padding: 0 clamp(20px, 5vw, 40px);
}
.u-article__image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
}
.u-article__image figcaption {
    margin-top: 12px;
    font-size: 0.8rem;
    text-align: center;
    color: var(--wp--preset--color--discret);
}

/* Dans un article, la première ligne n'est pas une date de mise à jour : la
   mention grise réservée aux pages légales n'a pas lieu d'être. */
.u-texte--article > p:first-of-type {
    font-size: inherit;
    color: inherit;
    margin-bottom: 1.1em;
}
.u-texte--article { padding-top: clamp(32px, 4vw, 52px); }

/* Une citation dans un article : le trait à gauche est le seul endroit du
   thème où il a un sens, parce qu'il marque une parole rapportée et non un
   avertissement. */
.u-texte blockquote {
    margin: clamp(28px, 3.4vw, 40px) 0;
    padding-left: clamp(18px, 2.4vw, 28px);
    border-left: 2px solid var(--wp--preset--color--accent);
    font-family: var(--u-serif);
    font-size: clamp(1.16rem, 1.6vw, 1.34rem);
    font-style: italic;
    line-height: 1.45;
    color: var(--wp--preset--color--titre);
}
.u-texte blockquote p { margin-bottom: 0.6em; }
.u-texte blockquote p:last-child { margin-bottom: 0; }

.u-texte img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    margin: clamp(26px, 3vw, 38px) 0;
}

.u-texte hr {
    margin: clamp(36px, 4.6vw, 60px) auto;
    width: 64px;
    border: 0;
    border-top: 1px solid rgba(23, 18, 14, 0.18);
}

/* ── Après l'article ─────────────────────────────────────────────────────── */

.u-apres__dedans {
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(56px, 8vw, 104px) clamp(20px, 5vw, 40px);
    text-align: center;
}
.u-surtitre--section { text-align: center; margin-bottom: clamp(12px, 1.6vw, 18px); }
.u-apres__titre { margin-bottom: clamp(14px, 1.8vw, 20px); }

.u-journal--suite { padding-top: clamp(56px, 8vw, 104px); display: block; }
.u-journal--suite .u-surtitre--section { margin-bottom: clamp(26px, 3.4vw, 40px); }
.u-journal__grille {
    display: grid;
    gap: clamp(24px, 3vw, 40px);
}
@media (min-width: 760px) { .u-journal__grille { grid-template-columns: repeat(3, 1fr); } }

/* ── Le sommaire du journal ──────────────────────────────────────────────────
   Une liste, pas une grille de cartes.

   Des cartes uniformes obligent à inventer une vignette pour chaque article, et
   un article de fond n'a pas toujours d'image : on se retrouve à fabriquer des
   aplats décoratifs qui ne montrent rien et se ressemblent tous. Ici le titre
   porte seul, en grand, comme dans un sommaire de revue, et l'année sert de
   repérage : c'est la seule chose qu'on veuille savoir en parcourant. */

.u-sommaire {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(16px, 3vw, 32px) clamp(20px, 5vw, 72px) clamp(48px, 7vw, 88px);
}

.u-sommaire__vide {
    text-align: center;
    font-family: var(--u-serif);
    font-size: 1.3rem;
    color: var(--wp--preset--color--discret);
}

/* L'année ne s'écrit qu'à son premier article : répétée à chaque ligne elle
   devient du bruit, posée une fois elle découpe. */
.u-sommaire__annee {
    margin: clamp(36px, 5vw, 56px) 0 clamp(10px, 1.4vw, 16px);
    font-family: var(--u-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--wp--preset--color--discret);
}
.u-sommaire__annee:first-child { margin-top: 0; }

/* ── Une ligne ───────────────────────────────────────────────────────────── */

.u-ligne { border-top: 1px solid rgba(23, 18, 14, 0.1); }
.u-ligne:last-child { border-bottom: 1px solid rgba(23, 18, 14, 0.1); }

.u-ligne__vers {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: clamp(22px, 2.8vw, 32px) 0;
    text-decoration: none;
    color: inherit;
}
@media (min-width: 760px) {
    /* Trois colonnes : la date, le propos, les mentions. La date à gauche fait
       une marge de lecture qui aligne tous les titres sur le même axe, ce que
       la grille de cartes ne donnait jamais. */
    .u-ligne__vers {
        grid-template-columns: 7rem 1fr auto;
        gap: clamp(20px, 3vw, 44px);
        align-items: baseline;
    }
}
.u-ligne__vers:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: 4px;
    border-radius: 4px;
}

.u-ligne__jour {
    font-family: var(--u-sans);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--wp--preset--color--discret);
    white-space: nowrap;
}

.u-ligne__corps { min-width: 0; }

.u-ligne__titre {
    margin: 0;
    font-family: var(--u-serif);
    font-weight: 500;
    /* Grand. C'est lui qui fait tout le travail, puisqu'il n'y a pas d'image
       pour attirer l'oeil. */
    font-size: clamp(1.32rem, 2.6vw, 2rem);
    line-height: 1.14;
    letter-spacing: -0.022em;
    color: var(--wp--preset--color--titre);
    font-variant-ligatures: none;
    transition: color 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.u-ligne__extrait {
    display: block;
    margin-top: 6px;
    max-width: 62ch;
    font-size: 0.94rem;
    line-height: 1.55;
    color: var(--wp--preset--color--texte);
}

.u-ligne__bout {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--u-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wp--preset--color--discret);
    white-space: nowrap;
}

.u-ligne__rubrique {
    padding: 4px 10px;
    border: 1px solid rgba(23, 18, 14, 0.14);
    border-radius: 999px;
}

.u-ligne__fleche {
    font-size: 1rem;
    color: var(--wp--preset--color--accent);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) and (pointer: fine) {
    .u-ligne__vers:hover .u-ligne__titre { color: var(--wp--preset--color--accent); }
    .u-ligne__vers:hover .u-ligne__fleche { opacity: 1; transform: none; }
}
/* Là où il n'y a pas de curseur pour la révéler, la flèche reste visible :
   c'est le seul signe que la ligne mène quelque part. */
@media (hover: none) {
    .u-ligne__fleche { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .u-ligne__titre,
    .u-ligne__fleche { transition: none; }
}

/* ── La suite, au bas d'un article ───────────────────────────────────────── */

.u-journal--suite .u-sommaire { padding-top: 0; }

/* ── L'en-tête du journal ────────────────────────────────────────────────────
   Sur photo, comme la déclaration de l'accueil. Un journal se regarde avant de
   se lire, et une page de titres sur fond crème n'annonce rien. */

/* La hauteur est imposée, elle ne découle pas du texte : « Blog » et deux
   lignes de présentation tiennent dans une bande de cent cinquante pixels, et
   une photo recadrée sur cent cinquante pixels ne montre plus qu'un morceau de
   mur. */
.u-tete-journal {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    min-height: clamp(340px, 40vw, 540px);
}

.u-tete-journal__fond {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    /* La photo garde ses couleurs. Passée en noir et blanc, elle devient triste
       là où elle est chaude, et le crème de la page perd son écho. On se
       contente de calmer la saturation pour qu'elle ne dispute pas le vermillon
       au reste de la page, et d'assombrir légèrement. */
    filter: saturate(0.9) contrast(1.03) brightness(0.86);
}

/* L'ombre tombe là où est le texte, c'est-à-dire à gauche, et laisse le reste
   de l'image respirer. Un voile uniforme assez sombre pour que le titre tienne
   éteindrait la photo entière ; celui-ci ne paie que là où il faut. Le second
   dégradé raccorde le bas de la bande au crème de la suite. */
.u-tete-journal__voile {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(100deg,
            rgba(23, 18, 14, 0.82) 0%,
            rgba(23, 18, 14, 0.58) 38%,
            rgba(23, 18, 14, 0.18) 68%,
            rgba(23, 18, 14, 0.06) 100%),
        linear-gradient(180deg,
            rgba(23, 18, 14, 0.22) 0%,
            rgba(23, 18, 14, 0) 45%,
            rgba(23, 18, 14, 0.42) 100%);
}

/* Sur un téléphone, le texte occupe toute la largeur : l'ombre latérale n'a
   plus de sens et redevient verticale. */
@media (max-width: 720px) {
    .u-tete-journal__voile {
        background: linear-gradient(180deg,
            rgba(23, 18, 14, 0.30) 0%,
            rgba(23, 18, 14, 0.52) 55%,
            rgba(23, 18, 14, 0.82) 100%);
    }
}

.u-tete-journal__dedans {
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(72px, 11vw, 160px) clamp(20px, 5vw, 72px) clamp(64px, 10vw, 140px);
}

.u-tete-journal.a-un-fond .u-surtitre { color: rgba(253, 250, 244, 0.62); }
.u-tete-journal.a-un-fond .u-tete-journal__titre { color: var(--wp--preset--color--papier); }
.u-tete-journal.a-un-fond .u-tete-journal__phrase { color: rgba(253, 250, 244, 0.8); }

/* La coupure se decide ici, pas au hasard de la largeur : « Des methodes, »
   puis « pas des recettes. ». Laisser le navigateur couper entre « pas » et
   « des » separe les deux moities de la phrase, et le titre n'oppose plus
   rien. */
.u-tete-journal__titre {
    max-width: 13ch;
    font-size: clamp(2.4rem, 5.4vw, 4.1rem);
    text-wrap: balance;
}
.u-tete-journal__phrase { max-width: 46ch; margin-bottom: 0; }

/* ── La grille des billets ───────────────────────────────────────────────── */

.u-journal {
    display: grid;
    gap: clamp(28px, 3.4vw, 44px);
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(48px, 7vw, 88px) clamp(20px, 5vw, 72px) clamp(56px, 8vw, 104px);
}
@media (min-width: 760px)  { .u-journal { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .u-journal { grid-template-columns: repeat(3, 1fr); } }

.u-journal__vide {
    grid-column: 1 / -1;
    text-align: center;
    font-family: var(--u-serif);
    font-size: 1.3rem;
    color: var(--wp--preset--color--discret);
}

/* ── Un billet ───────────────────────────────────────────────────────────
   Pas de carte encadrée : l'image porte le bloc, et le texte se pose dessous à
   même le fond de la page. Un cadre autour d'une photo ajoute une bordure à
   quelque chose qui a déjà la sienne. */

.u-billet__vers {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 1.8vw, 20px);
    height: 100%;
    text-decoration: none;
    color: inherit;
}
.u-billet__vers:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: 6px;
    border-radius: 18px;
}

.u-billet__cadre {
    display: block;
    overflow: hidden;
    border-radius: 16px;
    background: rgba(23, 18, 14, 0.05);
}
.u-billet__image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) and (pointer: fine) {
    .u-billet__vers:hover .u-billet__image { transform: scale(1.035); }
}

.u-billet__texte {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
}

.u-billet__mentions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--wp--preset--color--discret);
}

/* La rubrique en vermillon : c'est la seule chose de couleur dans le bloc, et
   elle sert à repérer d'un coup d'œil de quoi parle l'article. */
.u-billet__rubrique {
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wp--preset--color--accent);
}

.u-billet__titre {
    margin: 0;
    font-family: var(--u-serif);
    font-weight: 500;
    font-size: clamp(1.26rem, 1.9vw, 1.5rem);
    line-height: 1.16;
    letter-spacing: -0.02em;
    color: var(--wp--preset--color--titre);
    font-variant-ligatures: none;
    transition: color 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) and (pointer: fine) {
    .u-billet__vers:hover .u-billet__titre { color: var(--wp--preset--color--accent); }
}

.u-billet__extrait {
    font-size: 0.93rem;
    line-height: 1.55;
    color: var(--wp--preset--color--texte);
}

.u-billet__lire {
    margin-top: auto;
    padding-top: 8px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wp--preset--color--accent);
}

/* ── Le billet en vedette ────────────────────────────────────────────────── */

@media (min-width: 760px) {
    .u-billet--vedette { grid-column: 1 / -1; }
    .u-billet--vedette .u-billet__vers {
        flex-direction: row;
        align-items: center;
        gap: clamp(28px, 4vw, 56px);
    }
    .u-billet--vedette .u-billet__cadre { flex: 0 0 56%; }
    .u-billet--vedette .u-billet__image { aspect-ratio: 16 / 9; }
    .u-billet--vedette .u-billet__texte { gap: 12px; }
    .u-billet--vedette .u-billet__titre { font-size: clamp(1.8rem, 3.4vw, 2.7rem); }
    .u-billet--vedette .u-billet__extrait { font-size: 1.04rem; max-width: 44ch; }
    .u-billet--vedette .u-billet__lire { margin-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
    .u-billet__image,
    .u-billet__titre { transition: none; }
}

/* ── Le comparatif des offres ────────────────────────────────────────────────
   Un tableau, pas deux cartes. Deux cartes côte à côte énumèrent chacune ses
   propres lignes, qui ne sont pas les mêmes, et obligent le lecteur à les tenir
   de tête. Un tableau aligne les lignes : l'œil descend une colonne et voit
   d'un coup ce qui change. */

.u-compare__dedans {
    max-width: 1000px;
    margin: 0 auto;
    padding: clamp(64px, 9vw, 120px) clamp(20px, 5vw, 72px);
}

/* Sur un téléphone, le tableau déborde : il défile dans son propre cadre,
   jamais en emportant la page avec lui. */
.u-compare__cadre {
    margin-top: clamp(32px, 4vw, 48px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.u-compare__cadre:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: 4px;
    border-radius: 6px;
}

.u-compare__table {
    width: 100%;
    min-width: 460px;
    border-collapse: collapse;
    text-align: left;
}

/* L'en-tête suit le lecteur : dans un tableau de vingt lignes, arrivé en bas on
   ne sait plus quelle colonne on lit. */
.u-compare__table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 14px 16px;
    background: var(--wp--preset--color--fond);
    font-family: var(--u-sans);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wp--preset--color--discret);
    border-bottom: 1px solid rgba(23, 18, 14, 0.14);
}
.u-compare.est-sur-papier .u-compare__table thead th { background: var(--wp--preset--color--papier); }

.u-compare__table thead th:not(:first-child),
.u-compare__table td { text-align: center; width: 22%; }

/* La colonne payante porte la couleur, et seulement elle : c'est ce qu'on
   compare, le reste est le point de référence. */
.u-compare__table thead th.u-compare__phare { color: var(--wp--preset--color--accent); }
.u-compare__table td.u-compare__phare { background: rgba(232, 85, 45, 0.04); }

/* L'intitulé de groupe n'est pas une ligne de données : il annonce la suivante,
   d'où l'air au-dessus et le trait en dessous. */
.u-compare__groupe th {
    padding: clamp(30px, 3.4vw, 44px) 16px 10px;
    font-family: var(--u-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wp--preset--color--titre);
}
tbody:first-of-type .u-compare__groupe th { padding-top: clamp(18px, 2vw, 26px); }

.u-compare__table tbody th[scope="row"] {
    padding: 13px 16px;
    font-family: var(--u-sans);
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--wp--preset--color--texte);
}
.u-compare__table tbody td { padding: 13px 16px; }

.u-compare__table tbody tr:not(.u-compare__groupe) + tr:not(.u-compare__groupe) th,
.u-compare__table tbody tr:not(.u-compare__groupe) + tr:not(.u-compare__groupe) td {
    border-top: 1px solid rgba(23, 18, 14, 0.07);
}

/* « oui » devient une coche, « non » un tiret : dans un tableau de vingt
   lignes, un symbole se balaie du regard, un mot se lit. */
.u-compare__oui {
    font-size: 1rem;
    font-weight: 700;
    color: rgba(23, 18, 14, 0.7);
}
.u-compare__phare .u-compare__oui { color: var(--wp--preset--color--accent); }
.u-compare__non { color: rgba(23, 18, 14, 0.24); }

/* Les chiffres en chasse fixe : « 3 » et « 30 » l'un sous l'autre doivent
   s'aligner sur le même axe, sinon la colonne tremble. */
.u-compare__valeur {
    font-family: var(--u-sans);
    font-size: 0.95rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--wp--preset--color--titre);
}
.u-compare__phare .u-compare__valeur { color: var(--wp--preset--color--accent); }

.u-compare__note {
    margin: clamp(20px, 2.4vw, 28px) 0 0;
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--wp--preset--color--discret);
}

/* ── Le relais ───────────────────────────────────────────────────────────────
   Ce que fait le produit quand la volonté lâche. Chaque ligne est une situation
   et ce qui se passe alors : une grille de cartes en ferait une liste de
   fonctionnalités de plus, alors que c'est un engagement. */

.u-relais__dedans {
    max-width: 1000px;
    margin: 0 auto;
    padding: clamp(64px, 9vw, 120px) clamp(20px, 5vw, 72px);
}

.u-relais__liste {
    margin: clamp(32px, 4vw, 52px) 0 0;
    border-top: 1px solid rgba(23, 18, 14, 0.1);
}

.u-relais__ligne {
    display: grid;
    gap: 6px clamp(28px, 5vw, 64px);
    padding: clamp(22px, 2.8vw, 34px) 0;
    border-bottom: 1px solid rgba(23, 18, 14, 0.1);
}

/* À partir de deux colonnes, la situation reste à gauche et la réponse en face :
   on lit « quand ceci » puis « alors cela » d'un seul mouvement des yeux. */
@media (min-width: 820px) {
    .u-relais__ligne { grid-template-columns: 38% 1fr; align-items: start; }
}

.u-relais__declencheur {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0;
    font-family: var(--u-serif);
    font-size: clamp(1.08rem, 1.6vw, 1.3rem);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--wp--preset--color--titre);
}
.u-relais__declencheur .u-picto {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--wp--preset--color--accent);
    transform: translateY(3px);
}

.u-relais__reponse {
    margin: 0;
    font-size: 1rem;
    line-height: 1.62;
    color: var(--wp--preset--color--texte);
}

/* Un intitulé de colonne qui n'a rien à dire de visible, mais qu'un lecteur
   d'écran doit entendre pour annoncer la colonne. */
.u-invisible {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}