/* ==========================================================================
   Quom — feuille de style de la landing page
   Organisation : 1. Couleurs et tailles  2. Base  3. Mise en page
   4. Composants communs  5. Menu  6. Sections, dans l'ordre de la page
   7. Popup  8. Animations  9. Ordinateur (à partir de 900 px)
   Le site est pensé d'abord pour le téléphone ; la partie 9 l'adapte aux grands écrans.
   ========================================================================== */

/* ==========================================================================
   1. COULEURS ET TAILLES
   Pour changer une couleur partout, c'est ici.
   ========================================================================== */

:root {
    /* La charte */
    --rouge: #d9361f;
    --rouge-fonce: #7a1e10;
    --papier: #f2e8d5;
    --encre: #17140f;
    --jaune: #f5c842;
    --pierre: #5a5246;

    /* Les nuances qui en découlent */
    --sable: #e6dcc7;
    --creme: #fbf6ec;
    --encre-claire: #241f18;
    --trait-sombre: #3a332a;
    --trait-clair: #d8cdb6;
    --texte-doux: #4a433a;
    --texte-discret: #6b6358;
    --texte-clair: #cfc4ae;
    --texte-clair-discret: #b5aa95;

    /* Les polices */
    --police-titre: "Archivo Black", "Arial Black", sans-serif;
    --police-texte: "Barlow", Arial, sans-serif;
    --police-etiquette: "Barlow Condensed", "Arial Narrow", sans-serif;
    --police-main: "Permanent Marker", "Comic Sans MS", cursive;

    /* Les espacements */
    --marge-cote: 18px;
    --espace-section: 64px;
    --espace-bloc: 28px;
    --rayon: 18px;
    --bordure: 3px solid var(--encre);
    --hauteur-menu: 64px;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

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

html {
    /* Les ancres du menu ne passent pas sous la barre fixe. Pas de défilement animé : le saut est immédiat, il marche partout. */
    scroll-padding-top: 64px;
}

body {
    margin: 0;
    background: var(--papier);
    color: var(--encre);
    font-family: var(--police-texte);
    font-size: 16px;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

h1,
h2,
h3,
p,
ul,
ol,
figure,
blockquote {
    margin: 0;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

h2 {
    font-family: var(--police-titre);
    font-weight: 400;
    font-size: 32px;
    line-height: 1.06;
    letter-spacing: -0.01em;
}

h3 {
    font-family: var(--police-titre);
    font-weight: 400;
    font-size: 21px;
    line-height: 1.15;
}

a {
    color: inherit;
}

button {
    font: inherit;
    color: inherit;
    cursor: pointer;
}

svg {
    display: block;
}

:focus-visible {
    outline: 3px solid var(--jaune);
    outline-offset: 3px;
}

/* Cache visuellement un texte tout en le laissant aux lecteurs d'écran */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.only-desktop {
    display: none;
}

/* L'écriture à la main (Permanent Marker), pour les petites annotations */
.marker {
    font-family: var(--police-main);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

/* ==========================================================================
   3. MISE EN PAGE
   ========================================================================== */

.container {
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 var(--marge-cote);
}

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--espace-bloc);
}

.stack--small {
    gap: 16px;
}

.grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}

.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--espace-bloc);
    align-items: center;
}

.section {
    padding: var(--espace-section) 0;
}

.section--tight {
    padding-top: 8px;
}

.section--encre {
    background: var(--encre);
    color: var(--papier);
}

.section--sable {
    background: var(--sable);
}

.section--jaune {
    background: var(--jaune);
}

.section--rouge {
    background: var(--rouge);
}

.section__head {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 1000px;
}

.section__head--wide {
    max-width: 1200px;
}

.lead {
    max-width: 760px;
    font-size: 17px;
    line-height: 1.45;
    color: var(--texte-doux);
}

.small {
    font-size: 14px;
    line-height: 1.5;
}

/* ==========================================================================
   4. COMPOSANTS COMMUNS
   ========================================================================== */

/* Petit titre en capitales au-dessus des titres */
.eyebrow {
    font-family: var(--police-etiquette);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Une petite phrase écrite à la main, au-dessus d'un titre (page merci) */
.bridge {
    font-size: 18px;
    line-height: 1.3;
    color: var(--rouge);
    transform: rotate(-1.5deg);
    transform-origin: left center;
}

.eyebrow--rouge {
    color: var(--rouge);
}

.eyebrow--jaune {
    color: var(--jaune);
}

.eyebrow--pierre {
    color: var(--texte-discret);
}

.section--encre .eyebrow--pierre {
    color: #8e8473;
}

/* Boutons */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 54px;
    padding: 0 26px;
    border: none;
    border-radius: 12px;
    font-family: var(--police-etiquette);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 120ms ease;
}

.button:hover {
    transform: translateY(-2px);
}

.button:active {
    transform: translateY(3px);
    box-shadow: none;
}

.button--small {
    height: 40px;
    padding: 0 14px;
    font-size: 15px;
    border-radius: 10px;
}

.button--full {
    width: 100%;
}

.button--cta {
    background: var(--rouge);
    color: #ffffff;
    box-shadow: 0 4px 0 0 var(--rouge-fonce);
}

.button--jaune {
    background: var(--jaune);
    color: var(--encre);
    box-shadow: 0 3px 0 0 #8a6b12;
}

.button--encre {
    background: var(--encre);
    color: var(--papier);
    box-shadow: 0 4px 0 0 #5a1a10;
}

.button--outline {
    background: transparent;
    color: var(--encre);
    border: var(--bordure);
}

/* ==========================================================================
   5. MENU ET TEINTES DU HAUT DE PAGE
   ========================================================================== */

/* Les trois teintes possibles du hero (et du menu quand il est en haut).
   On choisit avec data-teinte sur <body>. */
body {
    --hero-fond: var(--encre);
    --hero-halo: radial-gradient(ellipse 60% 45% at 50% -8%, rgba(217, 54, 31, 0.38), rgba(217, 54, 31, 0) 70%);
    --hero-texte: var(--papier);
    --hero-sous-texte: var(--texte-clair);
    --hero-discret: var(--texte-clair-discret);
    --hero-logo: var(--rouge);
    --hero-main: var(--jaune);
    --avatar-fond: var(--encre-claire);
    --avatar-bord: var(--trait-sombre);
    --avatar-texte: var(--papier);
    --parle-fond: var(--rouge);
    --parle-texte: #ffffff;
    --parle-halo: 0 0 0 7px rgba(217, 54, 31, 0.18), 0 0 30px rgba(217, 54, 31, 0.5);
    --entend-bord: var(--jaune);
    --entend-halo: 0 0 30px rgba(245, 200, 66, 0.45);
    --legende-qui: var(--rouge);
    --legende-a-qui: var(--jaune);
    --legende-fond: #241f18;
    --legende-bord: #4a433a;
    --lien: var(--rouge);
    --hero-cta-fond: var(--rouge);
    --hero-cta-texte: #ffffff;
    --hero-cta-ombre: 0 4px 0 0 var(--rouge-fonce), 0 16px 40px rgba(217, 54, 31, 0.3);
    --hero-nav-fond: var(--jaune);
    --hero-nav-texte: var(--encre);
    --hero-nav-ombre: #8a6b12;
}

body[data-teinte="rouge"] {
    --hero-fond: var(--rouge);
    --hero-halo: radial-gradient(ellipse 60% 45% at 50% -8%, rgba(245, 200, 66, 0.22), rgba(245, 200, 66, 0) 70%);
    --hero-texte: var(--encre);
    --hero-sous-texte: #3b1209;
    --hero-discret: #5a1a10;
    --hero-logo: var(--jaune);
    --hero-main: var(--encre);
    --avatar-fond: #c4301b;
    --avatar-bord: #a82812;
    --avatar-texte: var(--encre);
    --parle-fond: var(--encre);
    --parle-texte: var(--papier);
    --parle-halo: 0 0 0 7px rgba(23, 20, 15, 0.15);
    --entend-bord: var(--encre);
    --entend-halo: 0 0 26px rgba(245, 200, 66, 0.6);
    --legende-qui: var(--encre);
    --legende-a-qui: #ffffff;
    --legende-fond: #c4301b;
    --legende-bord: var(--encre);
    --lien: var(--encre);
    --hero-cta-fond: var(--encre);
    --hero-cta-texte: var(--papier);
    --hero-cta-ombre: 0 4px 0 0 #5a1a10;
    --hero-nav-ombre: var(--encre);
}

body[data-teinte="papier"] {
    --hero-fond: var(--papier);
    --hero-halo: radial-gradient(ellipse 60% 45% at 50% -8%, rgba(217, 54, 31, 0.14), rgba(217, 54, 31, 0) 70%);
    --hero-texte: var(--encre);
    --hero-sous-texte: var(--texte-doux);
    --hero-discret: var(--texte-discret);
    --hero-main: var(--rouge);
    --avatar-fond: var(--sable);
    --avatar-bord: #d2c6ae;
    --avatar-texte: var(--encre);
    --parle-fond: var(--rouge);
    --parle-texte: #ffffff;
    --parle-halo: 0 0 0 7px rgba(217, 54, 31, 0.15);
    --entend-bord: var(--encre);
    --entend-halo: 0 3px 0 0 var(--encre);
    --legende-qui: var(--rouge);
    --legende-a-qui: var(--encre);
    --legende-fond: var(--creme);
    --legende-bord: var(--encre);
    --lien: var(--rouge);
    --hero-cta-ombre: 0 4px 0 0 var(--encre);
    --hero-nav-fond: var(--encre);
    --hero-nav-texte: var(--papier);
    --hero-nav-ombre: var(--pierre);
}

/* Le menu : transparent en haut de page, puis une barre réduite et sombre quand on descend */
.topbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 50;
    color: var(--hero-texte);
    transition:
        background-color 200ms ease,
        box-shadow 200ms ease;
}

.topbar__inner {
    display: flex;
    align-items: center;
    gap: 32px;
    height: var(--hauteur-menu);
}

.topbar.is-compact {
    --hero-texte: var(--papier);
    --hero-discret: var(--texte-clair-discret);
    --hero-logo: var(--rouge);
    --hero-nav-fond: var(--jaune);
    --hero-nav-texte: var(--encre);
    --hero-nav-ombre: #8a6b12;
    --hauteur-menu: 52px;
    background: rgba(23, 20, 15, 0.96);
    box-shadow: 0 1px 0 var(--trait-sombre);
}

.logo {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin-right: auto;
    font-family: var(--police-titre);
    font-size: 21px;
    line-height: 1;
    text-decoration: none;
}

.logo__wave {
    width: 26px;
    height: 9px;
    margin-bottom: 3px;
    color: var(--hero-logo);
}

.topbar.is-compact .logo {
    font-size: 18px;
}

.topbar__links {
    display: none;
}

.topbar .button--jaune {
    background: var(--hero-nav-fond);
    color: var(--hero-nav-texte);
    box-shadow: 0 3px 0 0 var(--hero-nav-ombre);
}

.topbar.is-compact .button--small {
    height: 34px;
}

/* ==========================================================================
   6. SECTIONS
   ========================================================================== */

/* ---------- 6.1 Hero ----------
   En haut, le texte. En dessous, la scène : une personne parle, une flèche de liaison part vers ceux qui l'entendent. */

.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-top: calc(var(--hauteur-menu) + 16px);
    padding-bottom: 16px;
    overflow: hidden;
    background: var(--hero-halo), var(--hero-fond);
    color: var(--hero-texte);
}

/* Le texte est centré, au-dessus de la scène, sur téléphone comme sur ordinateur */
.hero__promise {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.hero__title {
    font-family: var(--police-titre);
    font-weight: 400;
    font-size: 36px;
    line-height: 1.04;
    letter-spacing: -0.015em;
}

.hero__lead {
    max-width: 560px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--hero-sous-texte);
}

.hero__action {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    margin-top: 4px;
}

.hero__action .button--cta {
    background: var(--hero-cta-fond);
    color: var(--hero-cta-texte);
    box-shadow: var(--hero-cta-ombre);
}

/* ---------- 6.2 La scène animée de la section problème (hero-scene.js) ----------
   Six personnes, et une liaison qui se trace entre deux d'entre elles.
   Pensée pour rester fluide : tailles fixes (rien ne se redessine quand un nom s'allume),
   et le point se déplace avec « transform » seulement, que le navigateur anime sur la carte graphique. */

.scene {
    padding: 0 var(--marge-cote);
}

.scene__stage {
    position: relative;
    height: 236px;
    max-width: 1100px;
    margin: 0 auto;
}

.nodes {
    position: absolute;
    inset: 0;
}

/* Chaque rond a une taille fixe et est centré sur son point : rien ne bouge quand il s'allume */
.node {
    position: absolute;
    left: var(--mx, var(--x));
    top: var(--my, var(--y));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 1px solid var(--avatar-bord);
    border-radius: 50%;
    background: var(--avatar-fond);
    color: var(--hero-discret);
    line-height: 1.1;
    transform: translate(-50%, -50%);
    transition:
        background-color 300ms ease,
        color 300ms ease,
        border-color 300ms ease,
        opacity 300ms ease;
}

.node__name {
    font-weight: 700;
    font-size: 11px;
}

.node__role {
    font-size: 8px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    opacity: 0.75;
}

.node.is-speaking {
    border-color: var(--parle-fond);
    background: var(--parle-fond);
    color: var(--parle-texte);
}

.node.is-hearing {
    border-color: var(--jaune);
    background: var(--jaune);
    color: var(--encre);
}

/* Pendant une conversation, ceux qui n'entendent rien s'estompent : c'est ce qui montre la promesse */
.scene.is-active .node:not(.is-speaking):not(.is-hearing) {
    opacity: 0.4;
}

/* La liaison : une ligne presque droite, d'un rond à l'autre, qui se dessine */
.scene__links {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    color: var(--lien);
    pointer-events: none;
}

.scene__links path.link {
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0;
    /* À la fin, la ligne s'efface puis se réarme */
    transition:
        opacity 300ms ease,
        stroke-dashoffset 0s 300ms;
}

.scene__links path.link.is-drawn {
    stroke-dashoffset: 0;
    opacity: 1;
    transition:
        stroke-dashoffset 500ms ease,
        opacity 150ms ease;
}

/* Le point qui parcourt la liaison : un élément à part, déplacé par « transform » (animation de la carte graphique) */
.scene__dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: var(--lien);
    opacity: 0;
    transition: opacity 300ms ease;
    pointer-events: none;
    will-change: transform;
}

.scene__dot.is-visible {
    opacity: 1;
}

/* La bulle de celui qui parle : placée par le script au-dessus ou au-dessous de lui. --tail = place de la pointe. */
.scene__bubble {
    position: absolute;
    top: 0;
    left: 0;
    padding: 6px 10px;
    white-space: nowrap;
    border: 2px solid var(--legende-bord);
    border-radius: 12px;
    background: var(--legende-fond);
    color: var(--hero-texte);
    font-weight: 700;
    font-size: 12px;
    line-height: 1.25;
    text-align: center;
    opacity: 0;
    transform: translateY(4px);
    transition:
        opacity 300ms ease,
        transform 300ms ease;
    pointer-events: none;
}

.scene__bubble::after {
    content: "";
    position: absolute;
    left: var(--tail, 50%);
    width: 10px;
    height: 10px;
    margin-left: -5px;
    border: 2px solid var(--legende-bord);
    background: var(--legende-fond);
    transform: rotate(45deg);
}

.scene__bubble--above::after {
    bottom: -7px;
    border-top: 0;
    border-left: 0;
}

.scene__bubble--below::after {
    top: -7px;
    border-right: 0;
    border-bottom: 0;
}

.scene__bubble.is-visible {
    opacity: 1;
    transform: none;
}

/* ---------- 6.2 bis La scène du hero : une conversation à la fois ----------
   Six ronds. Celui qui parle devient rouge, un trait courbe se dessine vers ceux qu'il a choisis, qui deviennent jaunes.
   Les autres restent éteints. Une phrase sous la scène dit ce qui se passe.
   Animée par hero-talk.js. --x / --y : place sur ordinateur, --mx / --my : place sur téléphone (en % de la scène). */

.talk {
    padding: 0 var(--marge-cote);
}

.talk__stage {
    position: relative;
    height: 220px;
    max-width: 980px;
    margin: 0 auto;
}

.talk__links {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.talk__stop-start {
    stop-color: var(--rouge);
}

.talk__stop-end {
    stop-color: var(--jaune);
}

/* Le trait se dessine du rond qui parle vers celui qui entend */
.talk__links path {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition:
        stroke-dashoffset 700ms cubic-bezier(0.33, 1, 0.68, 1),
        opacity 500ms ease;
}

.talk__links path.is-drawn {
    stroke-dashoffset: 0;
}

.talk__links path.is-leaving {
    opacity: 0;
}

/* Un rond : taille fixe, centré sur son point, ombre décalée comme les cartes du site */
.talk__node {
    position: absolute;
    left: var(--mx, var(--x));
    top: var(--my, var(--y));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    border: 2px solid var(--avatar-bord);
    border-radius: 50%;
    background: var(--avatar-fond);
    color: var(--hero-texte);
    line-height: 1.1;
    box-shadow: 3px 4px 0 0 rgba(0, 0, 0, 0.35);
    transform: translate(-50%, -50%);
    transition:
        background-color 450ms ease,
        border-color 450ms ease,
        color 450ms ease,
        opacity 450ms ease,
        transform 450ms cubic-bezier(0.33, 1, 0.68, 1);
}

.talk__name {
    font-weight: 700;
    font-size: 13px;
}

.talk__role {
    font-size: 9px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.7;
}

/* Celui qui parle : rouge, un peu plus grand */
.talk__node.is-speaking {
    border-color: var(--parle-fond);
    background: var(--parle-fond);
    color: var(--parle-texte);
    transform: translate(-50%, -50%) scale(1.08);
}

/* L'onde qui part de celui qui parle : un anneau qui grandit et disparaît */
.talk__node::after {
    content: "";
    position: absolute;
    inset: -2px;
    border: 2px solid var(--rouge);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

.talk__node.is-speaking::after {
    animation: talk-wave 1400ms cubic-bezier(0.33, 1, 0.68, 1) 2;
}

@keyframes talk-wave {
    from {
        opacity: 0.7;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(1.7);
    }
}

/* Ceux qui entendent : jaunes */
.talk__node.is-hearing {
    border-color: var(--jaune);
    background: var(--jaune);
    color: var(--encre);
}

/* Pendant une conversation, les autres s'éteignent un peu, sans bouger */
.talk.is-active .talk__node:not(.is-speaking):not(.is-hearing) {
    opacity: 0.38;
}

/* La phrase sous la scène. Sa hauteur est réservée : rien ne bouge quand elle change. */
.talk__caption {
    min-height: 2.6em;
    max-width: 980px;
    margin: 6px auto 0;
    font-size: 15px;
    line-height: 1.3;
    text-align: center;
    color: var(--hero-sous-texte);
    opacity: 0;
    transform: translateY(4px);
    transition:
        opacity 450ms ease,
        transform 450ms ease;
}

.talk__caption.is-visible {
    opacity: 1;
    transform: none;
}

.talk__caption b {
    color: var(--rouge);
}

.talk__caption i {
    font-style: normal;
    font-weight: 700;
    color: var(--jaune);
}

/* ---------- 6.3 Le problème ----------
   La scène du hero, rejouée sur un talkie : tout le monde s'allume. Puis une phrase, puis deux lignes. */

.scene--radio {
    padding: 0;
}

.scene--radio .scene__stage {
    height: 300px;
}

/* Sur téléphone, la bulle de Sophie ne tient pas au milieu des autres : la phrase sous la scène suffit */
@media (max-width: 899px) {
    .scene--radio .scene__bubble {
        display: none;
    }
}

/* La réaction de quelqu'un qui n'avait rien demandé, écrite à la main sous son rond */
.scene__reaction {
    position: absolute;
    top: 0;
    left: 0;
    font-family: var(--police-main);
    font-size: 14px;
    white-space: nowrap;
    color: var(--texte-doux);
    opacity: 0;
    transform: translateY(4px) rotate(-3deg);
    transition:
        opacity 300ms ease,
        transform 300ms ease;
    pointer-events: none;
}

.scene__reaction.is-visible {
    opacity: 1;
    transform: rotate(-3deg);
}

.radio__caption {
    font-size: 19px;
    line-height: 1.4;
    text-align: center;
}

.radio__caption b {
    color: var(--rouge);
}

.radio__more {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding-top: 22px;
    border-top: var(--bordure);
    font-size: 16px;
    line-height: 1.45;
    color: var(--texte-doux);
}

.radio__more b {
    display: block;
    color: var(--encre);
}

/* ---------- 6.4 Comment ça marche, et on essaie ----------
   Les trois gestes, puis l'écran de l'app (maquette ClientV29 de la planche ONDE).
   Toutes les tailles sont fixes : quand un bouton s'allume, rien ne bouge autour. */

.try {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--espace-bloc);
}

.steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 16px;
    line-height: 1.4;
    color: var(--texte-clair);
}

.step b {
    color: var(--papier);
}

.step__number {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--jaune);
    color: var(--encre);
    font-family: var(--police-titre);
    font-size: 15px;
}

/* Ce qu'il faut toucher maintenant, écrit à la main. Deux lignes réservées : l'écran ne bouge pas. */
.try__hint {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 2.6em;
    max-width: 420px;
    font-size: 19px;
    line-height: 1.3;
    text-align: center;
    color: var(--jaune);
    transform: rotate(-1.5deg);
}

/* L'écran de l'app */
.try__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.app {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 420px;
    overflow: hidden;
    border: 2px solid var(--trait-sombre);
    border-radius: 22px;
    background: var(--papier);
    color: var(--encre);
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.app__header {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 4px 14px 0 16px;
}

.app__logo {
    flex-shrink: 0;
    width: 24px;
    height: 9px;
    fill: none;
    stroke: var(--rouge);
    stroke-width: 3.5;
    stroke-linecap: round;
}

.app__event {
    flex-grow: 1;
    overflow: hidden;
    font-family: var(--police-etiquette);
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.app__menu {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
}

.app__main {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 14px 14px;
    transition: opacity 200ms ease;
}

/* Écran verrouillé : les boutons ne répondent plus */
.app__main.is-locked {
    opacity: 0.4;
}

.app__label {
    font-family: var(--police-etiquette);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--texte-discret);
}

.app__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 0 6px 4px 0;
}

/* Un bouton : une personne ou un groupe */
.tile {
    position: relative;
    display: flex;
    align-items: flex-start;
    height: 64px;
    padding: 11px;
    border: none;
    border-radius: 13px;
    background: var(--encre);
    color: var(--papier);
    box-shadow: 0 4px 0 0 var(--pierre);
    font-family: var(--police-etiquette);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.05;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform 90ms ease,
        background-color 90ms ease,
        box-shadow 90ms ease;
}

/* Un groupe : une carte posée sur une autre */
.tile--group {
    margin-top: 6px;
    box-shadow:
        6px -6px 0 -1px #8e8473,
        0 4px 0 0 var(--pierre);
}

.tile__icon {
    position: absolute;
    right: 9px;
    bottom: 9px;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--texte-clair);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* La vague : cette personne te parle */
.tile__wave {
    position: absolute;
    top: 11px;
    right: 9px;
    width: 26px;
    height: 13px;
    color: var(--jaune);
    opacity: 0;
    transition: opacity 200ms ease;
}

.tile.is-incoming .tile__wave {
    opacity: 1;
}

.tile__busy {
    position: absolute;
    bottom: 9px;
    left: 11px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--pierre);
    color: var(--papier);
    font-size: 11px;
    letter-spacing: 0.1em;
}

/* Maintenu : rouge, enfoncé */
.tile.is-talking {
    background: var(--rouge);
    color: #ffffff;
    box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.22);
    transform: translateY(4px);
}

/* Ouvert en mains-libres : jaune, enfoncé */
.tile.is-open {
    background: var(--jaune);
    color: var(--encre);
    box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.22);
    transform: translateY(4px);
}

.tile--group.is-talking,
.tile--group.is-open {
    box-shadow:
        6px -6px 0 -1px #8e8473,
        inset 0 3px 0 rgba(0, 0, 0, 0.22);
}

.tile.is-talking .tile__icon,
.tile.is-talking .tile__wave {
    stroke: #ffffff;
    color: #ffffff;
}

.tile.is-open .tile__icon,
.tile.is-open .tile__wave {
    stroke: var(--encre);
    color: var(--encre);
}

/* Le bouton à essayer : un anneau qui respire */
.tile.is-hint::after,
.recall.is-hint::after,
.round.is-hint::after {
    content: "";
    position: absolute;
    inset: -6px;
    border: 3px solid var(--jaune);
    border-radius: inherit;
    animation: respire 1.4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes respire {
    0%,
    100% {
        opacity: 0.2;
    }

    50% {
        opacity: 1;
    }
}

/* La barre du bas */
.app__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 12px 14px;
    background: var(--encre);
}

.round {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: 2.5px solid var(--papier);
    border-radius: 50%;
    background: transparent;
    color: var(--papier);
    cursor: pointer;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        background-color 140ms ease,
        border-color 140ms ease,
        box-shadow 500ms linear;
}

.round svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.round__slash {
    display: none;
}

/* Casque coupé, écran verrouillé : rouge */
.round.is-on {
    border-color: var(--rouge);
    background: var(--rouge);
}

.round.is-on .round__slash {
    display: inline;
}

/* Le micro : rouge en « maintenir », jaune en « mains-libres », barré s'il est coupé */
.round--mic {
    border: none;
    background: var(--rouge);
    color: #ffffff;
}

.round--mic.is-open {
    background: var(--jaune);
    color: var(--encre);
}

.round--mic.is-muted {
    border: 2.5px solid var(--rouge);
    background: var(--encre);
    color: var(--rouge);
}

.round--mic.is-muted .round__slash {
    display: inline;
}

/* Appui long en cours : un anneau jaune se dessine pendant une demi-seconde */
.round.is-pressing {
    box-shadow: 0 0 0 6px var(--jaune);
}

/* Le bouton « répondre » : la dernière personne qui t'a parlé */
.recall {
    position: relative;
    display: flex;
    flex-grow: 1;
    align-items: center;
    gap: 8px;
    min-width: 0;
    height: 48px;
    padding: 0 14px;
    border: none;
    border-radius: 24px;
    background: var(--trait-sombre);
    color: var(--papier);
    box-shadow: 0 4px 0 0 #000000;
    font-family: var(--police-etiquette);
    font-weight: 700;
    font-size: 17px;
    text-transform: uppercase;
    cursor: pointer;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform 100ms ease,
        background-color 120ms ease;
}

.recall__icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.recall__name {
    flex-grow: 1;
    overflow: hidden;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.recall__wave {
    flex-shrink: 0;
    width: 26px;
    height: 13px;
    color: var(--jaune);
    opacity: 0;
    transition: opacity 200ms ease;
}

.recall.is-incoming .recall__wave {
    opacity: 1;
}

.recall.is-talking {
    background: var(--rouge);
    color: #ffffff;
    box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.25);
    transform: translateY(4px);
}

.recall.is-open {
    background: var(--jaune);
    color: var(--encre);
    box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.25);
    transform: translateY(4px);
}

.recall.is-talking .recall__wave,
.recall.is-open .recall__wave {
    color: currentColor;
}

/* Le petit message de l'app, au-dessus de la barre */
.app__toast {
    position: absolute;
    bottom: 88px;
    left: 50%;
    padding: 8px 14px;
    border-radius: 20px;
    background: var(--encre);
    color: var(--papier);
    font-family: var(--police-etiquette);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity 200ms ease;
    pointer-events: none;
}

.app__toast.is-visible {
    opacity: 1;
}

/* Ce qui se passe, dit en une phrase. Deux lignes réservées : rien ne bouge. */
.try__status {
    min-height: 2.8em;
    max-width: 420px;
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
    color: var(--texte-clair);
}

.try__status b {
    color: var(--jaune);
}

/* La fin des essais. Sa place est réservée : il apparaît sans rien pousser. */
.try__done {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 300ms ease;
}

.try__done.is-visible {
    visibility: visible;
    opacity: 1;
}

.try__done p {
    flex-basis: 100%;
    font-size: 17px;
    color: var(--papier);
}

.try__reset {
    border: none;
    background: none;
    color: var(--texte-clair);
    font-family: var(--police-etiquette);
    font-weight: 700;
    font-size: 16px;
    text-decoration: underline;
    text-transform: uppercase;
    cursor: pointer;
}

/* ---------- 6.5 Pour qui ----------
   Trois colonnes simples, sans fond ni ombre : rien ne ressemble à un bouton.
   Un trait rouge en haut, le métier en grand, une phrase, puis les lieux en discret. */

.audience {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 18px;
    border-top: 3px solid var(--rouge);
}

.audience h3 {
    font-size: 26px;
}

.audience__text {
    font-size: 18px;
    line-height: 1.45;
}

.audience__who {
    font-size: 15px;
    color: var(--texte-discret);
}

/* ---------- 6.6 Pour le responsable ---------- */

.checklist {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.checklist li {
    position: relative;
    padding-left: 32px;
}

.checklist li::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    width: 18px;
    height: 18px;
    border: 2px solid var(--encre);
    border-radius: 5px;
    background: var(--jaune);
}

/* L'aperçu du tableau de bord */
.admin {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    border: var(--bordure);
    border-radius: 16px;
    background: var(--papier);
    box-shadow: 8px 8px 0 0 var(--encre);
    font-size: 14px;
}

.admin__top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin__top b {
    font-family: var(--police-titre);
    font-weight: 400;
    font-size: 17px;
}

.admin__badge {
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--jaune);
    font-family: var(--police-etiquette);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
}

.admin__event {
    margin-left: auto;
    font-weight: 600;
}

.admin__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.admin__stats span {
    padding: 8px 10px;
    border: 2px solid var(--encre);
    border-radius: 10px;
    font-size: 12px;
}

.admin__stats b {
    display: block;
    font-family: var(--police-titre);
    font-weight: 400;
    font-size: 19px;
}

.admin__label {
    font-family: var(--police-etiquette);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--texte-discret);
}

.admin__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.admin__chips span {
    padding: 5px 10px;
    border-radius: 8px;
    background: var(--encre);
    color: var(--papier);
    font-family: var(--police-etiquette);
    font-weight: 700;
    text-transform: uppercase;
}

.admin__people {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin__people li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 2px solid var(--encre);
    border-radius: 10px;
    background: var(--creme);
}

.admin__people span {
    color: var(--texte-discret);
}

.status {
    margin-left: auto;
    padding: 2px 8px;
    border: 1px solid var(--pierre);
    border-radius: 999px;
    font-style: normal;
    font-size: 12px;
}

.status--on {
    border-color: var(--encre);
    background: var(--encre);
    color: var(--papier);
}

/* La personne qu'on vient d'ajouter, et son groupe */
.admin__people li.is-new {
    border-color: var(--rouge);
    background: #fff4d6;
}

.status--new {
    border-color: var(--jaune);
    background: var(--jaune);
    color: var(--encre);
}

.admin__chips span.is-new {
    border-color: var(--rouge);
    background: var(--jaune);
    color: var(--encre);
}

/* ---------- 6.7 Comparer ---------- */

.compare {
    overflow: hidden;
    border: var(--bordure);
    border-radius: var(--rayon);
    background: var(--creme);
}

.compare table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.compare thead th {
    padding: 12px 10px;
    background: var(--encre);
    color: var(--papier);
    text-align: left;
}

.compare thead .compare__onde {
    background: var(--rouge);
    color: #ffffff;
}

.compare tbody td,
.compare tbody th {
    padding: 12px 10px;
    text-align: left;
    vertical-align: top;
}

.compare tbody td {
    color: var(--pierre);
}

.compare tbody td:last-child {
    background: #fbe9c2;
    color: var(--encre);
    font-weight: 700;
}

/* Sur téléphone : chaque ligne devient un bloc, titre au-dessus et les trois réponses côte à côte */
.compare thead td {
    display: none;
}

.compare thead tr,
.compare tbody tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.compare tbody tr {
    border-top: 2px solid var(--trait-clair);
}

.compare tbody th {
    grid-column: 1 / -1;
    background: #efe5d0;
}

/* ---------- 6.8 Avis ---------- */

.h2--small {
    font-size: 26px;
}

.testimonial {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px;
    border: var(--bordure);
    border-radius: var(--rayon);
    background: var(--creme);
}

.testimonial blockquote {
    font-weight: 500;
    font-size: 17px;
    line-height: 1.45;
}

.testimonial blockquote::before {
    content: "“";
    display: block;
    height: 30px;
    font-family: var(--police-titre);
    font-size: 56px;
    line-height: 1;
    color: var(--rouge);
}

.testimonial figcaption {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    font-size: 14px;
    color: var(--texte-discret);
}

.testimonial figcaption b {
    display: block;
    font-size: 16px;
    color: var(--encre);
}

.testimonial__initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--encre);
    color: var(--jaune);
    font-weight: 700;
}

/* ---------- 6.9 Tarifs ---------- */

.price {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    border: var(--bordure);
    border-radius: var(--rayon);
}

.price--encre {
    background: var(--encre);
    color: var(--papier);
    box-shadow: 0 6px 0 0 var(--rouge);
}

.price--papier {
    background: var(--papier);
    box-shadow: 0 6px 0 0 var(--encre);
}

.price__amount {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
}

.price__amount b {
    font-family: var(--police-titre);
    font-weight: 400;
    font-size: 56px;
    line-height: 1;
}

.price--encre .price__amount span {
    color: var(--texte-clair);
}

.price--papier .price__amount span {
    color: var(--texte-doux);
}

.price__points {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.price__points li {
    position: relative;
    padding-left: 20px;
}

.price__points li::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--jaune);
}

/* Ce qui est compris dans toutes les formules */
.included {
    padding: 22px;
    border: var(--bordure);
    border-radius: var(--rayon);
    background: var(--creme);
}

.included__title {
    margin-bottom: 14px;
    font-family: var(--police-etiquette);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.included__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--texte-doux);
}

.included__list b {
    display: block;
    color: var(--encre);
}

.price__examples {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.price__examples li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 2px solid var(--encre);
    border-radius: 12px;
    background: var(--creme);
    font-size: 14px;
    color: var(--texte-doux);
}

.price__examples b {
    font-family: var(--police-titre);
    font-weight: 400;
    font-size: 18px;
    white-space: nowrap;
    color: var(--encre);
}

.price__examples .is-highlighted {
    background: var(--jaune);
}

.price .button {
    margin-top: auto;
}

/* L'annotation à la main sur la carte payante */
.price__note {
    position: absolute;
    top: -16px;
    right: 18px;
    padding: 2px 10px;
    border-radius: 8px;
    background: var(--rouge);
    color: #ffffff;
    font-size: 15px;
    line-height: 1.15;
    text-align: center;
    transform: rotate(4deg);
}

/* ---------- 6.10 Données et environnement ---------- */

.trust {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px;
    border: var(--bordure);
    border-radius: var(--rayon);
}

.trust--encre {
    background: var(--encre);
    color: var(--papier);
}

.trust--creme {
    background: var(--creme);
}

.trust ul {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.trust li {
    opacity: 0.85;
}

.trust li b {
    display: block;
    margin-bottom: 2px;
    font-size: 17px;
}

/* ---------- 6.11 Questions ---------- */

.faq {
    border-top: var(--bordure);
}

.faq details {
    padding: 16px 0;
    border-bottom: var(--bordure);
}

.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.3;
    list-style: none;
    cursor: pointer;
}

.faq summary::-webkit-details-marker {
    display: none;
}

/* Le « + » qui tourne en « × » à l'ouverture */
.faq summary::after {
    content: "+";
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px solid var(--encre);
    border-radius: 9px;
    font-size: 20px;
    transition: transform 200ms ease;
}

.faq details[open] summary::after {
    background: var(--jaune);
    transform: rotate(45deg);
}

.faq details p {
    max-width: 760px;
    margin-top: 10px;
    line-height: 1.55;
    color: var(--texte-doux);
}

/* ---------- 6.13 Pages légales ----------
   Un bandeau sombre avec le titre, puis le texte sur le papier, dans une colonne étroite pour se lire facilement. */

.legal-head {
    padding: calc(var(--hauteur-menu) + 40px) 0 36px;
    background: var(--encre);
    color: var(--papier);
}

/* Le titre suit la même colonne étroite que le texte */
.legal-head__inner {
    max-width: 760px;
}

.legal-head h1 {
    font-family: var(--police-titre);
    font-weight: 400;
    font-size: 34px;
    line-height: 1.05;
}

.legal-head__date {
    margin-top: 12px;
    font-size: 17px;
    color: var(--jaune);
    transform: rotate(-1.5deg);
    transform-origin: left center;
}

.legal {
    max-width: 760px;
    padding-top: 36px;
    padding-bottom: var(--espace-section);
    font-size: 16px;
    line-height: 1.65;
    color: var(--texte-doux);
}

.legal p + p,
.legal p + ul,
.legal ul + p {
    margin-top: 12px;
}

.legal strong {
    color: var(--encre);
}

.legal a {
    color: var(--rouge);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal ul {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    padding-left: 22px;
    list-style: disc;
}

.legal li::marker {
    color: var(--rouge);
}

.legal__intro {
    font-size: 18px;
    color: var(--encre);
}

/* Le sommaire : une carte, sur deux colonnes sur ordinateur */
.legal__toc {
    margin-top: 28px;
    padding: 20px 22px;
    border: var(--bordure);
    border-radius: var(--rayon);
    background: var(--creme);
}

.legal__toc-title {
    margin-bottom: 10px;
    font-family: var(--police-etiquette);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--encre);
}

.legal__toc ol {
    display: grid;
    gap: 6px 28px;
    padding-left: 24px;
    list-style: decimal;
}

.legal__toc a {
    color: var(--encre);
    text-decoration: none;
}

.legal__toc a:hover {
    color: var(--rouge);
    text-decoration: underline;
}

.legal__block {
    margin-top: 36px;
    scroll-margin-top: calc(var(--hauteur-menu) + 16px);
}

.legal h2 {
    margin-bottom: 12px;
    font-family: var(--police-titre);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.2;
    color: var(--encre);
}

.legal h2 span {
    color: var(--rouge);
}

.legal h3 {
    margin: 20px 0 6px;
    font-family: var(--police-etiquette);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--encre);
}

/* Les coordonnées : une carte en deux colonnes, intitulé à gauche, valeur à droite */
.legal__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-top: 14px;
    padding: 6px 20px;
    border: var(--bordure);
    border-radius: var(--rayon);
    background: var(--creme);
}

.legal__card dt {
    padding-top: 12px;
    font-family: var(--police-etiquette);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--texte-discret);
}

.legal__card dd {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--trait-clair);
    color: var(--encre);
}

.legal__card dd:last-child {
    border-bottom: none;
}

/* ---------- 6.14 Page merci ----------
   Le retour de paiement, sur le papier : à gauche ce qui se passe maintenant, à droite l'écran de l'app, encore vide,
   dont les places en pointillés attendent l'équipe. */

.thanks {
    padding: calc(var(--hauteur-menu) + 32px) 0 var(--espace-section);
    background: var(--papier);
    color: var(--encre);
}

.thanks__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
}

.thanks__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.thanks__title {
    font-family: var(--police-titre);
    font-weight: 400;
    font-size: 48px;
    line-height: 1;
}

.thanks__lead {
    font-size: 18px;
    color: var(--texte-doux);
}

.thanks__steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 8px 0 4px;
}

/* Chaque étape : une carte crème bordée d'encre, la pastille jaune comme dans « Comment ça marche » */
.thanks__steps li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border: var(--bordure);
    border-radius: 14px;
    background: var(--creme);
    font-size: 16px;
    line-height: 1.45;
    color: var(--texte-doux);
}

.thanks__steps b {
    color: var(--encre);
}

.thanks__steps .step__number {
    border: 2px solid var(--encre);
}

.thanks__note {
    font-size: 15px;
    color: var(--texte-discret);
}

.thanks__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 24px;
    margin-top: 6px;
}

.thanks__home {
    color: var(--encre);
    font-family: var(--police-etiquette);
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
}

.thanks__help {
    margin-top: 10px;
    padding-top: 16px;
    border-top: 2px solid var(--trait-clair);
    font-size: 15px;
    color: var(--texte-doux);
}

.thanks__help a {
    color: var(--rouge);
}

/* L'écran de l'app : un dessin posé, avec l'ombre rouge décalée de la popup */
.thanks__visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.app.thanks__app {
    border: var(--bordure);
    box-shadow: 10px 10px 0 0 var(--rouge);
    pointer-events: none;
}

.thanks__arrow {
    align-self: flex-end;
    margin-bottom: 10px;
    font-size: 19px;
    line-height: 1.1;
    text-align: right;
    color: var(--rouge);
    transform: rotate(-4deg);
}

/* Une place libre : en pointillés, avec un « + » */
.tile--empty {
    align-items: center;
    justify-content: center;
    border: 2px dashed #8E8473;
    background: transparent;
    color: #8E8473;
    box-shadow: none;
    font-size: 24px;
}

.thanks__app .recall__name {
    color: var(--texte-clair-discret);
}

/* ---------- 6.12 Dernier appel et pied de page ---------- */

.final__inner {
    gap: 22px;
}

.h2--end {
    font-size: 30px;
}

.final .button {
    width: 100%;
}

.footer {
    padding: 24px 0;
    background: var(--encre);
    color: var(--texte-clair-discret);
    font-size: 15px;
}

.footer__inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* « by Regie Joy Tech » est écrit comme une signature : il part sous le nom, puis remonte vers la droite */
.footer__brand {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding-bottom: 10px;
}

.footer__brand b {
    font-family: var(--police-titre);
    font-weight: 400;
    font-size: 22px;
    color: var(--papier);
}

.footer__by {
    font-size: 17px;
    color: var(--jaune);
    white-space: nowrap;
    transform: translateY(12px) rotate(-9deg);
    transform-origin: left bottom;
}

.footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
}

.footer__links a {
    text-decoration: none;
}

.footer__links a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   7. POPUP « TESTER GRATUITEMENT »
   ========================================================================== */

.dialog {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: var(--papier);
    color: var(--encre);
}

.dialog::backdrop {
    background: rgba(23, 20, 15, 0.82);
}

.dialog__form {
    display: flex;
    flex-direction: column;
}

.dialog__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px var(--marge-cote) 14px;
}

.dialog__title {
    font-size: 24px;
}

.dialog__head .small {
    margin-top: 4px;
    color: var(--texte-doux);
}

.dialog__close {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border: 2px solid var(--encre);
    border-radius: 10px;
    background: transparent;
    font-weight: 700;
    font-size: 20px;
}

/* Le bloc du haut : nombre de personnes, formule et prix. Il passe au jaune quand c'est payant. */
.team-size {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 var(--marge-cote);
    padding: 16px;
    border: var(--bordure);
    border-radius: 16px;
    background: var(--encre);
    color: var(--papier);
    transition:
        background-color 250ms ease,
        color 250ms ease;
}

.team-size.is-paid {
    background: var(--jaune);
    color: var(--encre);
}

.team-size__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.team-size__label {
    font-size: 14px;
    color: var(--jaune);
}

.team-size.is-paid .team-size__label {
    color: var(--encre);
}

.stepper {
    display: flex;
    align-items: center;
    gap: 6px;
}

.stepper button {
    width: 36px;
    height: 36px;
    border: 2px solid currentColor;
    border-radius: 10px;
    background: transparent;
    font-weight: 700;
    font-size: 20px;
}

.stepper input {
    width: 66px;
    border: none;
    background: transparent;
    color: inherit;
    font-family: var(--police-titre);
    font-size: 28px;
    text-align: center;
    -moz-appearance: textfield;
}

.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.range {
    width: 100%;
    height: 8px;
    margin: 0;
    border-radius: 4px;
    background: var(--texte-doux);
    outline-offset: 6px;
    -webkit-appearance: none;
    appearance: none;
}

.team-size.is-paid .range {
    background: var(--encre);
}

.range::-webkit-slider-thumb {
    width: 26px;
    height: 26px;
    border: 3px solid var(--encre);
    border-radius: 50%;
    background: var(--jaune);
    box-shadow: 0 3px 0 0 var(--encre);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.range::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border: 3px solid var(--encre);
    border-radius: 50%;
    background: var(--jaune);
    cursor: pointer;
}

/* Le choix de formule */
.offers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 4px;
    border: 2px solid var(--encre);
    border-radius: 12px;
    background: var(--creme);
}

.offers input {
    position: absolute;
    opacity: 0;
}

.offers span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 7px 4px;
    border-radius: 9px;
    font-size: 12px;
    color: var(--texte-doux);
    cursor: pointer;
}

.offers b {
    font-size: 15px;
    color: var(--encre);
}

.offers input:checked + span {
    background: var(--encre);
    color: var(--texte-clair);
}

.offers input:checked + span b {
    color: var(--papier);
}

.offers input:focus-visible + span {
    outline: 3px solid var(--rouge);
}

.team-size__price {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    padding-top: 10px;
    border-top: 2px dashed currentColor;
}

.team-size__price p:first-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
}

.team-size__amount {
    font-family: var(--police-titre);
    font-weight: 400;
    font-size: 36px;
    line-height: 1;
}

.team-size__note {
    max-width: 220px;
    font-weight: 600;
    font-size: 14px;
}

/* Les champs */
.dialog__fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px var(--marge-cote) 26px;
}

.dialog__fields .eyebrow {
    margin-top: 8px;
    font-size: 14px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-weight: 700;
    font-size: 15px;
}

.field input {
    height: 46px;
    padding: 0 12px;
    border: 2px solid var(--encre);
    border-radius: 10px;
    background: var(--creme);
    font: inherit;
    font-weight: 400;
    font-size: 16px;
}

.field small {
    font-weight: 400;
    font-size: 13px;
    color: var(--texte-discret);
}

.field__address {
    display: flex;
    overflow: hidden;
    border: 2px solid var(--encre);
    border-radius: 10px;
    background: var(--creme);
}

.field__address input {
    flex-grow: 1;
    min-width: 0;
    border: none;
    border-radius: 0;
}

.field__address span {
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-left: 2px solid var(--encre);
    background: var(--sable);
    font-weight: 400;
    color: var(--texte-doux);
}

/* Un champ replié : sa valeur proposée et un lien « Modifier » */
.collapsible__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 2px solid var(--trait-clair);
    border-radius: 10px;
    background: var(--creme);
    font-size: 14px;
}

.collapsible__row[hidden],
.collapsible__field[hidden] {
    display: none;
}

.collapsible__text {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--texte-doux);
}

.collapsible__text b {
    color: var(--encre);
}

.collapsible__edit {
    flex: none;
    padding: 0;
    border: none;
    background: none;
    font-weight: 700;
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0;
    font-size: 14px;
}

/* La case garde sa taille même quand le texte passe sur deux lignes */
.checkbox input {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--encre);
}

.dialog__reassure {
    text-align: center;
    color: var(--texte-discret);
}

.dialog__error {
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--rouge);
    color: #ffffff;
    font-weight: 600;
}

/* Message de réussite */
.dialog__success {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 30px var(--marge-cote);
}

.dialog__success[hidden],
.dialog__form[hidden] {
    display: none;
}

/* Paiement intégré : le formulaire de Stripe se monte dans ce bloc, il fixe sa propre hauteur */
.dialog__payment {
    display: flex;
    flex-direction: column;
    padding-bottom: 26px;
}

.dialog__payment[hidden] {
    display: none;
}

.dialog__payment-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 0 var(--marge-cote);
}

.dialog__payment-body > [data-payment-container] {
    align-self: stretch;
    min-height: 120px;
}

.dialog__payment-body > [hidden] {
    display: none;
}

/* ==========================================================================
   8. ANIMATIONS
   Uniquement de la position et de la transparence : le navigateur les anime sans effort.
   ========================================================================== */

/* Apparition au défilement, une seule fois. La classe "js" est posée par main.js :
   sans JavaScript, tout reste visible. */
.js .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 300ms ease,
        transform 300ms ease;
}

.js .reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Si le téléphone demande moins de mouvement, on coupe tout */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }

    .js .reveal {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   9. ORDINATEUR (à partir de 900 px)
   ========================================================================== */

@media (min-width: 900px) {
    :root {
        --marge-cote: clamp(28px, 6vw, 120px);
        --espace-section: clamp(80px, 8vw, 120px);
        --espace-bloc: 44px;
        --hauteur-menu: 72px;
    }

    html {
        scroll-padding-top: 52px;
    }

    body {
        font-size: 17px;
    }

    .only-mobile {
        display: none;
    }

    .only-desktop {
        display: inline;
    }

    h2 {
        font-size: clamp(36px, 3.2vw, 56px);
    }

    h3 {
        font-size: 22px;
    }

    .lead {
        font-size: 19px;
    }

    .small {
        font-size: 15px;
    }

    .grid {
        gap: 28px;
    }

    .grid--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .split {
        grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
    }

    .split--faq {
        grid-template-columns: 380px minmax(0, 1fr);
        align-items: start;
    }

    /* Menu */
    .logo {
        font-size: 24px;
    }

    .topbar__inner {
        gap: 20px;
    }

    .topbar__links {
        display: flex;
        gap: clamp(16px, 2.2vw, 32px);
        font-weight: 500;
        font-size: 16px;
        white-space: nowrap;
    }

    .topbar .button--small {
        white-space: nowrap;
    }

    .topbar__links a {
        color: var(--hero-discret);
        text-decoration: none;
    }

    .topbar__links a:hover {
        color: var(--hero-texte);
    }

    .topbar .button--small {
        height: 42px;
        padding: 0 16px;
        font-size: 16px;
    }

    .topbar.is-compact .topbar__links {
        font-size: 15px;
    }

    /* Hero : toute la hauteur de l'écran. Le texte, puis la scène, le tout centré verticalement. */
    .hero {
        min-height: 100svh;
        gap: clamp(20px, 5vh, 56px);
        justify-content: center;
        padding-top: calc(var(--hauteur-menu) + clamp(4px, 2vh, 28px));
        padding-bottom: clamp(14px, 3vh, 32px);
    }

    .hero__promise {
        align-items: center;
        gap: clamp(8px, 1.6vh, 16px);
        text-align: center;
    }

    .hero__title {
        font-size: clamp(38px, min(4vw, 7.4vh), 60px);
    }

    .hero__lead {
        max-width: 640px;
        font-size: clamp(16px, min(1.25vw, 2.5vh), 19px);
    }

    .hero__action {
        width: auto;
        align-items: center;
        gap: 10px;
        margin-top: clamp(2px, 1vh, 10px);
    }

    .hero__action .button {
        height: clamp(46px, 6.4vh, 52px);
        font-size: 18px;
    }

    /* La scène du hero */

    .talk__stage {
        height: clamp(220px, 32vh, 300px);
    }

    .talk__node {
        left: var(--x);
        top: var(--y);
        width: clamp(76px, 10vh, 88px);
        height: clamp(76px, 10vh, 88px);
    }

    .talk__name {
        font-size: 15px;
    }

    .talk__role {
        font-size: 10px;
    }

    .talk__caption {
        min-height: 1.4em;
        font-size: 17px;
    }

    .scene__stage {
        height: clamp(240px, 36vh, 330px);
    }

    .node {
        left: var(--x);
        top: var(--y);
        width: clamp(68px, 9.5vh, 80px);
        height: clamp(68px, 9.5vh, 80px);
    }

    .node__name {
        font-size: 14px;
    }

    .node__role {
        font-size: 10px;
    }

    .scene__bubble {
        padding: 6px 12px;
        font-size: 15px;
    }

    /* Page merci : le texte à gauche, l'écran de l'app à droite */
    .thanks {
        display: flex;
        align-items: center;
        min-height: 100svh;
    }

    .thanks__inner {
        grid-template-columns: minmax(0, 1fr) 380px;
        align-items: center;
        column-gap: clamp(48px, 7vw, 120px);
    }

    .thanks__title {
        font-size: 72px;
    }

    .thanks__steps li {
        font-size: 17px;
    }

    /* Sur ordinateur, l'écran est dans un téléphone ; la bordure d'encre et l'ombre rouge restent */
    /* .app.thanks__app : plus précis que le téléphone de la démo (.app), dont l'ombre floue ne doit pas s'appliquer ici */
    .app.thanks__app {
        border: 10px solid var(--encre);
        box-shadow: 12px 12px 0 0 var(--rouge);
    }

    /* Pages légales */
    .legal-head {
        padding: calc(var(--hauteur-menu) + 64px) 0 52px;
    }

    .legal-head h1 {
        font-size: 48px;
    }

    .legal__toc ol {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .legal__card {
        grid-template-columns: 260px minmax(0, 1fr);
        column-gap: 20px;
    }

    /* L'intitulé et la valeur sur la même ligne : mêmes marges, même trait */
    .legal__card dt {
        padding-bottom: 12px;
        border-bottom: 1px solid var(--trait-clair);
        line-height: 1.65;
    }

    .legal__card dd {
        padding-top: 12px;
    }

    .legal__card dt:nth-last-child(2) {
        border-bottom: none;
    }

    .included__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 32px;
        row-gap: 20px;
    }

    /* Le problème */
    .scene--radio .scene__stage {
        height: 340px;
    }

    .scene__reaction {
        font-size: 17px;
    }

    .radio__caption {
        font-size: 22px;
    }

    .radio__more {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px;
    }

    /* Comment ça marche : les gestes et les essais à gauche, le téléphone à droite */
    .try {
        grid-template-columns: minmax(0, 1fr) 380px;
        column-gap: clamp(48px, 7vw, 120px);
        row-gap: 32px;
    }

    .try__intro {
        grid-column: 1;
        grid-row: 1;
    }

    .try__intro {
        align-self: end;
    }

    .try__done {
        grid-column: 1;
        grid-row: 2;
        align-self: start;
    }

    .try__stage {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
    }

    .step {
        font-size: 17px;
    }

    .bridge {
        font-size: 21px;
    }

    /* Sur ordinateur, l'écran est dans un téléphone */
    .app {
        width: 360px;
        border: 10px solid #0b0906;
        border-radius: 42px;
        box-shadow:
            0 0 0 1px var(--trait-sombre),
            0 30px 60px rgba(0, 0, 0, 0.45);
    }

    .app__header {
        padding-top: 14px;
        height: 62px;
    }

    /* Avis, tarifs, données */
    .testimonial,
    .trust {
        padding: 28px;
    }

    .h2--small {
        font-size: 36px;
    }

    .testimonial blockquote {
        font-size: 19px;
    }

    .price {
        padding: 32px;
    }

    .price__amount b {
        font-size: 76px;
    }

    .price__examples b {
        font-size: 24px;
    }

    .trust li b {
        font-size: 19px;
    }

    /* Responsable */
    .admin {
        padding: 24px;
        font-size: 15px;
    }

    /* Comparer : on revient à un vrai tableau */
    .compare table {
        font-size: 16px;
    }

    .compare thead tr,
    .compare tbody tr {
        display: table-row;
    }

    .compare thead td {
        display: table-cell;
        background: var(--encre);
    }

    .compare thead th,
    .compare tbody td,
    .compare tbody th {
        padding: 16px 20px;
    }

    .compare thead th {
        font-size: 17px;
    }

    .compare tbody th {
        width: 28%;
        background: transparent;
    }

    /* Questions */
    .faq details {
        padding: 20px 0;
    }

    .faq summary {
        font-size: 19px;
    }

    /* Dernier appel */
    .final__inner {
        align-items: center;
        text-align: center;
    }

    .h2--end {
        font-size: clamp(40px, 3.6vw, 64px);
    }

    .final .button {
        width: auto;
        height: 58px;
        padding: 0 30px;
        font-size: 20px;
    }

    .footer {
        padding: 28px 0;
    }

    .footer__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    /* Popup : une fenêtre centrée, en deux colonnes pour que le bouton soit visible sans défiler.
       À gauche l'équipe et le prix, à droite les informations et le bouton. */
    .dialog {
        width: 940px;
        /* "auto" étirerait la fenêtre sur toute la hauteur (elle est posée sur tout l'écran) : elle prend la hauteur de son contenu */
        height: fit-content;
        max-height: calc(100svh - 40px);
        margin: auto;
        border: var(--bordure);
        border-radius: 22px;
        box-shadow: 10px 10px 0 0 var(--rouge);
    }

    .dialog__head,
    .dialog__fields {
        padding-right: 26px;
        padding-left: 26px;
    }

    .dialog__form {
        display: grid;
        grid-template-columns: 380px minmax(0, 1fr);
        align-items: start;
    }

    .dialog__head {
        grid-column: 1 / span 2;
    }

    .team-size {
        grid-column: 1;
        margin: 0 0 26px 26px;
        padding: 18px 20px;
    }

    .dialog__fields {
        grid-column: 2;
        padding-top: 0;
    }

    /* Le premier titre de la colonne de droite s'aligne sur le haut du bloc de gauche */
    .dialog__fields > .eyebrow:first-child {
        margin-top: 0;
    }

    .dialog__title {
        font-size: 27px;
    }

    .field-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .team-size__amount {
        font-size: 42px;
    }

    .team-size__note {
        text-align: right;
    }
}

/* Largeurs intermédiaires (petits portables, tablettes) : le bouton du menu se raccourcit pour que tout tienne sur une ligne */
@media (min-width: 900px) and (max-width: 1100px) {
    .topbar .only-desktop {
        display: none;
    }

    .topbar .only-mobile {
        display: inline;
    }
}