/* ==========================================================================
   Site créatrices — mise en page
   S'appuie sur modernist.css pour les jetons et les composants. Les valeurs
   reprennent celles des prototypes ; les points de rupture sont 700 px et
   1024 px, comme dans les maquettes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base et sens d'écriture
   -------------------------------------------------------------------------- */

.app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Le lien d'évitement, visible seulement au clavier. */
/* Texte réservé aux lecteurs d'écran.
   ARIA interdit aria-label sur un <label> : l'attribut y est simplement
   ignoré, et le bouton reste sans nom annoncé. Un vrai texte masqué est lu. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip {
    position: absolute;
    inset-inline-start: -9999px;
    top: 0;
    z-index: 100;
    padding: 12px 16px;
    background: var(--color-text);
    color: var(--color-bg);
    font-size: 13px;
    font-weight: 700;
}

.skip:focus {
    inset-inline-start: 0;
}

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */

.head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    border-bottom: 2px solid var(--color-divider);
    position: sticky;
    top: 0;
    background: var(--color-bg);
    z-index: 10;
}

.head-brand {
    display: flex;
    align-items: baseline;
    gap: 10px;
    text-decoration: none;
    color: var(--color-text);
}

.head-logo {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -0.02em;
}

.head-kicker {
    display: none;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-neutral-600);
}

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

.head-nav .btn {
    white-space: nowrap;
    font-size: 12px;
}

/* Sous 360 px — un iPhone SE, et la moitié des téléphones d'entrée de gamme —
   la marque et les quatre commandes dépassaient de 17 px : le bouton du menu
   sortait de l'écran, alors que c'est le seul accès à la navigation sur
   petit écran. On resserre plutôt que de masquer : aucune commande ne se
   perd, et le pas est assez petit pour ne pas se voir. */
@media (max-width: 359px) {
    .head { padding: 13px 10px; gap: 8px; }
    .head-logo { font-size: 15px; }
    .head-nav { gap: 4px; }
    .head-nav .btn { padding-inline: calc(var(--space-3) * 0.7); }
}

/* Les liens de navigation ne sont pas des boutons du design system :
   ils prennent l'accent quand ils désignent la page ouverte. */
.head-link[aria-current='page'] {
    color: var(--color-accent);
}

.head-inline {
    display: none;
}

/* Menu déroulant sur petit écran, sans JavaScript : une case à cocher
   masquée porte l'état ouvert/fermé. */
.menu-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.menu-button {
    display: inline-flex;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
}

.menu-panel {
    display: none;
    position: sticky;
    top: 57px;
    z-index: 9;
    background: var(--color-bg);
    border-bottom: 2px solid var(--color-text);
    flex-direction: column;
}

.menu-toggle:checked ~ .menu-panel {
    display: flex;
}

.menu-panel a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 14px;
    border-bottom: 2px solid var(--color-divider);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    text-decoration: none;
}

.menu-panel a:last-child {
    border-bottom: 0;
    color: var(--color-accent-700);
}

@media (min-width: 1024px) {
    .head { padding: 16px 40px; }
    .head-logo { font-size: 22px; }
    .head-kicker { display: inline; }
    .head-inline { display: flex; align-items: center; gap: 8px; }
    .head-compact { display: none; }
    .menu-panel { display: none !important; }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.sec {
    padding: 26px 14px;
    border-bottom: 2px solid var(--color-divider);
}

.sec-plain { border-bottom: 0; }

.sec-stack {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

@media (min-width: 700px) {
    .sec { padding: 32px 22px; }
}

@media (min-width: 1024px) {
    .sec { padding: 44px 40px; }
}

.eyebrow {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-neutral-600);
}

.eyebrow-accent {
    letter-spacing: 0.2em;
    color: var(--color-accent);
}

.h1 {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.h2 {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(24px, 3vw, 34px);
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.lede {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    max-width: 520px;
    color: var(--color-neutral-600);
    text-wrap: pretty;
}

.note {
    font-size: 11px;
    color: var(--color-neutral-600);
}

.note-wide {
    font-size: 12px;
    line-height: 1.6;
    color: var(--color-neutral-600);
    max-width: 720px;
}

/* --------------------------------------------------------------------------
   Grilles
   -------------------------------------------------------------------------- */

.grid-2,
.grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
}

.grid-gap {
    gap: 26px;
}

@media (min-width: 700px) {
    .grid-2, .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

.box {
    border: 2px solid var(--color-divider);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.box-accent {
    border-color: var(--color-accent);
    padding: 22px;
}

/* --------------------------------------------------------------------------
   Accueil
   -------------------------------------------------------------------------- */

.hero {
    display: grid;
    grid-template-columns: 1fr;
    border-bottom: 2px solid var(--color-divider);
}

.hero-main {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.hero-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(34px, 5vw, 62px);
    line-height: 0.95;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.hero-actions .btn {
    padding: 16px 20px;
    gap: 18px;
}

.hero-side {
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
    background: var(--color-neutral-100);
}

.hero-stat {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 15px 0;
    border-bottom: 2px solid var(--color-divider);
}

.hero-stat-value {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -0.02em;
}

@media (min-width: 1024px) {
    .hero { grid-template-columns: 1.3fr 1fr; }
    .hero-main { border-inline-end: 2px solid var(--color-divider); }

    /* Chiffres absents : le héros prend toute la largeur plutôt que de
       laisser une colonne vide. */
    .hero:not(:has(.hero-side)) { grid-template-columns: 1fr; }
    .hero:not(:has(.hero-side)) .hero-main { border-inline-end: 0; }
}

.steps {
    display: grid;
    grid-template-columns: 1fr;
    border: 2px solid var(--color-divider);
}

.step {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    border-bottom: 2px solid var(--color-divider);
}

.step:last-child { border-bottom: 0; }

.step-n {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.14em;
    color: var(--color-accent);
}

.step-t { font-weight: 700; font-size: 17px; }

.step-b {
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-neutral-600);
    text-wrap: pretty;
}

@media (min-width: 1024px) {
    .steps { grid-template-columns: repeat(3, 1fr); }
    .step { border-bottom: 0; border-inline-end: 2px solid var(--color-divider); }
    .step:last-child { border-inline-end: 0; }
}

.earn-value {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 38px;
    letter-spacing: -0.03em;
    color: var(--color-accent);
}

.tool {
    border: 2px solid var(--color-divider);
    padding: 18px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.tool .ic {
    width: 18px;
    height: 18px;
    color: var(--color-accent);
    margin-top: 2px;
}

.tool-t { font-weight: 700; font-size: 14px; }

.tool-b {
    font-size: 12px;
    line-height: 1.6;
    color: var(--color-neutral-600);
}




.cta {
    background: var(--color-accent);
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    justify-content: space-between;
    align-items: center;
}

.cta-t {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(26px, 4vw, 44px);
    line-height: 1;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    max-width: 620px;
}

.cta-b {
    background: #fff;
    color: var(--color-accent-ink);
    border: 0;
    cursor: pointer;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   Programme
   -------------------------------------------------------------------------- */

.scroller {
    border: 2px solid var(--color-divider);
    overflow-x: auto;
}

.scroller .table {
    min-width: 620px;
}

.table td.num,
.table th.num {
    text-align: end;
}

.table .rate {
    font-weight: 800;
    color: var(--color-accent-700);
}

.rule {
    display: flex;
    gap: 13px;
    padding: 13px 0;
    border-bottom: 2px solid var(--color-divider);
    align-items: flex-start;
}

.rule .ic {
    width: 15px;
    height: 15px;
    color: var(--color-accent);
    margin-top: 3px;
}

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

.rule-b {
    font-size: 12px;
    line-height: 1.6;
    color: var(--color-neutral-600);
}

.kv {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: baseline;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--color-divider);
    font-size: 13px;
}

.kv-k { color: var(--color-neutral-600); }
.kv-v { font-weight: 700; text-align: end; }

.sim-total {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(32px, 5vw, 50px);
    line-height: 1;
    letter-spacing: -0.03em;
}

.sim input[type='range'] {
    width: 100%;
    accent-color: var(--color-accent);
}

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

.faq details {
    border-top: 2px solid var(--color-divider);
}

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

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

.faq summary .ic { flex: none; width: 14px; height: 14px; }
.faq details[open] summary .ic { transform: rotate(180deg); }

.faq-a {
    padding: 0 0 18px;
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--color-neutral-600);
    max-width: 760px;
    text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Formulaires
   -------------------------------------------------------------------------- */

.form-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
    align-items: start;
}

@media (min-width: 1024px) {
    .form-cols { grid-template-columns: 1.4fr 1fr; }
}

.field-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.field-row .field { flex: 1 1 220px; margin-bottom: 0; }
.field-wide { flex: 1 1 100% !important; }

.field label {
    display: block;
    font-size: 12px;
    margin-bottom: 5px;
    color: var(--color-neutral-600);
}

.field-error .input { border-color: var(--color-accent); }

.error-msg {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-accent-700);
}

/* Bandeau d'erreur en tête de formulaire, annoncé aux lecteurs d'écran. */
.alert {
    border: 2px solid var(--color-accent);
    padding: 14px 16px;
    font-size: 13px;
    color: var(--color-accent-700);
    font-weight: 700;
}

.progress {
    display: flex;
    gap: 2px;
    margin-top: 6px;
}

.progress span {
    flex: 1;
    height: 6px;
    background: var(--color-divider);
}

.progress span.on { background: var(--color-accent); }

/* L'attribut hidden doit gagner contre un display posé par une classe (.btn
   est en inline-flex) : sinon un bouton masqué par le serveur resterait visible. */
[hidden] { display: none !important; }

/* Choix multiples : la case reste accessible, l'étiquette porte le style. */
.choice {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 14px;
    border: 2px solid var(--color-divider);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    background: transparent;
    color: var(--color-text);
}

.choice input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.choice:has(input:checked) {
    background: var(--color-text);
    color: var(--color-bg);
}

.choice:has(input:focus-visible) {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

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

/* « consent-line », pas « consent » : ce dernier nom est celui du bandeau
   cookies, fixé en bas de l'écran (plus bas dans ce fichier). Sous le même
   nom, les deux cases de l'étape 3 devenaient ce bandeau, l'une sur l'autre. */
.consent-line {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    border: 2px solid var(--color-divider);
    cursor: pointer;
    font-size: 12px;
    line-height: 1.6;
}

.consent-line input {
    flex: none;
    margin-top: 2px;
    accent-color: var(--color-accent);
    width: 16px;
    height: 16px;
}

.perk {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding-bottom: 11px;
    border-bottom: 2px solid var(--color-divider);
    font-size: 12px;
    line-height: 1.6;
    color: var(--color-neutral-600);
}

.perk .ic {
    width: 14px;
    height: 14px;
    color: var(--color-accent);
    margin-top: 3px;
}

/* Confirmation d'envoi */
.sent {
    background: var(--color-accent);
    color: #fff;
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: end;
    min-height: 420px;
}

.sent-t {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(34px, 6vw, 72px);
    line-height: 0.9;
    letter-spacing: -0.035em;
    text-transform: uppercase;
}

.sent-cta {
    background: #fff;
    color: var(--color-accent-ink);
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 17px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sent-alt {
    border: 2px solid rgba(255, 255, 255, 0.55);
    background: none;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 15px 22px;
    text-align: center;
}

@media (min-width: 700px) {
    .sent { grid-template-columns: repeat(2, 1fr); }
}

/* Connexion */
.code-cells {
    display: flex;
    gap: 8px;
}

.code-cells input {
    width: 48px;
    height: 58px;
    border: 2px solid var(--color-divider);
    background: var(--color-surface);
    text-align: center;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 22px;
    color: var(--color-text);
}

.code-cells input:focus-visible {
    border-color: var(--color-accent);
    outline: none;
}

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

.foot {
    background: var(--color-text);
    color: var(--color-bg);
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: auto;
}

.foot-b {
    font-size: 13px;
    line-height: 1.6;
    opacity: 0.7;
    max-width: 300px;
}

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

.foot-col a {
    font-size: 13px;
    color: inherit;
    opacity: 0.85;
    text-decoration: none;
}

.foot-col a:hover { opacity: 1; color: inherit; }

.foot-title {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    /* 0,55 tenait sur le pied de page clair (5,41:1) mais tombait à 3,85:1
       une fois le pied inversé en mode sombre. 0,7 passe des deux côtés. */
    opacity: 0.7;
}

/* Le bandeau légal est une case de la grille du pied comme les autres : sans
   le dire, il se rangeait à côté des colonnes de liens plutôt qu'en dessous —
   sur deux colonnes il occupait la seconde, sur trois la première, et sur
   mobile il flottait en boîte au milieu des marges de la section.
   Il traverse donc toute la grille, et ressort des marges horizontales et du
   bas de la section pour aller d'un bord à l'autre : c'est bien ce qu'il
   visait, puisqu'il réajoute déjà lui-même l'écart horizontal à chaque
   palier. Des marges logiques, pour que l'arabe se retourne tout seul. */
.foot-legal {
    grid-column: 1 / -1;
    margin-inline: -14px;
    margin-block-end: -26px;
    background: var(--color-text);
    color: var(--color-bg);
    padding: 14px;
    border-top: 2px solid var(--color-neutral-600);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

@media (min-width: 700px) {
    .foot { grid-template-columns: repeat(2, 1fr); }

    .foot-legal {
        margin-inline: -22px;
        margin-block-end: -32px;
        padding: 14px 22px;
    }
}

@media (min-width: 1024px) {
    .foot { grid-template-columns: 1.5fr 1fr 1fr; }

    .foot-legal {
        margin-inline: -40px;
        margin-block-end: -44px;
        padding: 14px 40px;
    }
}

/* --------------------------------------------------------------------------
   Icônes
   -------------------------------------------------------------------------- */

.ic {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

/* En écriture arabe, les flèches de progression pointent dans l'autre sens. */
[dir='rtl'] .ic-flip { transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   Page d'erreur
   -------------------------------------------------------------------------- */

.err {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}

.err-code {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(56px, 12vw, 120px);
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   Blog
   Une colonne de lecture étroite : au-delà d'environ 70 signes par ligne,
   l'œil perd le début de la suivante.
   -------------------------------------------------------------------------- */

.post-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* La colonne de lecture : à gauche sur téléphone, centrée dès que l'écran est
   plus large qu'elle — un article collé à gauche laissait la moitié de
   l'écran vide. Les sections autour (autres articles, appel) restent pleines. */
.post-col {
    display: flex;
    flex-direction: column;
    max-width: 680px;
}

.post-head .post-col { gap: 14px; }

/* Le guide réutilise .post-body sans colonne : il garde sa pile. */
.post-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.post-body .post-col { gap: 18px; }

.post-head .lede {
    max-width: 640px;
    font-size: 17px;
}

.post-p {
    margin: 0;
    font-size: 16px;
    line-height: 1.75;
    text-wrap: pretty;
}

@media (min-width: 960px) {
    .post-col {
        max-width: 780px;
        margin-inline: auto;
    }

    .post-head .lede { max-width: none; }

    .post-p,
    .post-list { font-size: 17px; }

    .post-body .post-col { gap: 20px; }
}

.post-h2 {
    margin: 22px 0 0;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(21px, 2.6vw, 26px);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.post-h3 {
    margin: 12px 0 0;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 17px;
    line-height: 1.3;
}

.post-list {
    margin: 0;
    padding-inline-start: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 16px;
    line-height: 1.7;
}

.post-list li::marker {
    color: var(--color-accent);
    font-weight: 700;
}

/* La barre est du côté où commence la ligne : à droite en arabe. */
.post-quote {
    margin: 10px 0;
    padding-inline-start: 20px;
    border-inline-start: 3px solid var(--color-accent);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(18px, 2.4vw, 22px);
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.post-warn {
    margin: 0;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 15px 17px;
    border: 2px solid var(--color-text);
    font-size: 14px;
    line-height: 1.6;
}

.post-warn .ic {
    width: 17px;
    height: 17px;
    flex: none;
    margin-top: 2px;
    color: var(--color-accent);
}

.post-cta {
    margin-top: 10px;
    gap: 16px;
    width: fit-content;
}

.post-body .scroller { max-width: 100%; }

/* Liste des articles */

.post-lead {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 26px;
    border: 2px solid var(--color-text);
    text-decoration: none;
    color: inherit;
}

.post-lead:hover { background: var(--color-neutral-100); }

.post-lead-t {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(24px, 3.4vw, 34px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    max-width: 760px;
}

.post-lead-b {
    font-size: 15px;
    line-height: 1.65;
    color: var(--color-neutral-600);
    max-width: 640px;
}

.post-card {
    text-decoration: none;
    color: inherit;
    gap: 10px;
}

.post-card:hover { background: var(--color-neutral-100); }

.post-card-t {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 17px;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

/* Renvoi vers un autre article, posé dans le fil du texte. */
.post-see {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 2px solid var(--color-divider);
    border-inline-start: 3px solid var(--color-accent);
    text-decoration: none;
    color: inherit;
}

.post-see:hover {
    background: var(--color-neutral-100);
    border-color: var(--color-text);
    border-inline-start-color: var(--color-accent);
}

.post-see-k {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
    flex: none;
}

.post-see-t {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    flex: 1;
}

.post-see .ic { flex: none; width: 15px; height: 15px; }

@media (max-width: 560px) {
    .post-see { flex-wrap: wrap; gap: 8px; }
    .post-see-t { flex-basis: 100%; }
}

/* Fil d'Ariane */
.trail {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border-bottom: 2px solid var(--color-divider);
    font-size: 12px;
    color: var(--color-neutral-600);
}

.trail a { color: inherit; text-decoration: none; }
.trail a:hover { color: var(--color-accent); text-decoration: underline; }
.trail .ic { width: 12px; height: 12px; opacity: 0.5; }
.trail [aria-current] { color: var(--color-text); font-weight: 700; }

@media (min-width: 1024px) {
    .trail { padding: 14px 32px; }
}

/* --------------------------------------------------------------------------
   Bascule clair / sombre
   Une seule icône visible à la fois : la lune quand la page est claire (elle
   annonce le sombre), le soleil quand elle est sombre.
   -------------------------------------------------------------------------- */

.theme-toggle .ic-sun { display: none; }
.theme-toggle .ic-moon { display: block; }

:root[data-theme='dark'] .theme-toggle .ic-sun { display: block; }
:root[data-theme='dark'] .theme-toggle .ic-moon { display: none; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) .theme-toggle .ic-sun { display: block; }
    :root:not([data-theme='light']) .theme-toggle .ic-moon { display: none; }
}

.foot-legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.foot-legal a:hover { text-decoration: none; }

/* --------------------------------------------------------------------------
   Bandeau de consentement
   Les deux réponses ont la même classe, la même taille et le même contraste :
   c'est ce que « refuser aussi facilement qu'accepter » veut dire.
   -------------------------------------------------------------------------- */

.consent {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px 16px;
    background: var(--color-bg);
    border-top: 2px solid var(--color-text);
}

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

.consent-t {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: -0.01em;
}

.consent-b {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-neutral-600);
    max-width: 720px;
}

.consent-b a { color: var(--color-accent); }

.consent-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* flex: 1 sur les deux : aucune des deux réponses n'est plus grande. */
.consent-btn {
    flex: 1;
    justify-content: center;
    min-width: 130px;
}

@media (min-width: 700px) {
    .consent {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 28px;
        padding: 18px 32px;
    }

    .consent-actions { flex: none; }
    .consent-btn { flex: none; }
}

/* Le bandeau est fixe : sans cette réserve, il recouvre les derniers liens du
   pied de page tant que la question n'a pas reçu de réponse. Les valeurs sont
   prises au-dessus de la plus haute hauteur mesurée à chaque largeur, dans les
   trois langues — le français est le plus long, l'arabe le plus court. Une
   réserve trop généreuse ne se voit pas : le bandeau la recouvre. */
.app-consent { padding-bottom: 220px; }

@media (min-width: 700px) {
    .app-consent { padding-bottom: 170px; }
}

@media (min-width: 900px) {
    .app-consent { padding-bottom: 130px; }
}

/* --------------------------------------------------------------------------
   Boutique d'une créatrice (site/storefront.php)
   -------------------------------------------------------------------------- */

.sf-item {
    display: flex;
    flex-direction: column;
    border: 2px solid var(--color-divider);
}

.sf-link {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.sf-link:hover .sf-name { text-decoration: underline; }

.sf-media {
    /* Carré et plafonné, comme les tuiles du portail (18/10/2026). */
    aspect-ratio: 1 / 1;
    max-height: 240px;
    overflow: hidden;
    background: var(--color-surface);
}

.sf-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sf-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sf-brand {
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-neutral-600);
}

.sf-name { font-weight: 600; font-size: 14px; line-height: 1.3; }

.sf-price {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 16px;
}

/* La note d'essayage : la seule chose de cette page qui n'existe nulle part
   ailleurs, donc elle se distingue du reste plutôt que de s'y fondre. */
.sf-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    padding: 12px 14px;
    border-top: 2px solid var(--color-divider);
    font-size: 12px;
    line-height: 1.55;
    color: var(--color-neutral-700);
}

.sf-note .ic { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--color-accent); }

/* Le gabarit de la boutique d'une créatrice : même en-tête et même pied que
   le reste, en plus court. Rien d'inventé — seulement ce qui est retiré. */
.sf-head .head-nav { gap: 8px; }

/* Le pseudo est l'identité de cette page, pas une décoration : il s'affiche
   dès qu'il y a la place, et pas seulement sur grand écran comme le
   sous-titre du site créatrices. */
@media (min-width: 700px) {
    .sf-head .head-kicker { display: inline; }
}

/* Une seule colonne : il n'y a plus de menu à ranger, juste une signature et
   les mentions légales. */
.foot-thin { grid-template-columns: 1fr; }

@media (min-width: 700px) {
    .foot-thin { grid-template-columns: 1fr; }
}

@media (min-width: 1024px) {
    .foot-thin { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Pas à pas illustrés (guide)

   L'illustration n'est pas une capture d'écran, et c'est délibéré. Une capture
   est figée dans une langue : il en faudrait quatre par étape, à refaire à
   chaque retouche de l'interface, et celle qui traîne montre un écran qui
   n'existe plus. Ici la figure est du texte et des bordures — elle se traduit
   avec le reste, se retourne toute seule en arabe grâce aux propriétés
   logiques, suit le thème sombre, se lit à la voix, et pèse zéro octet.
   -------------------------------------------------------------------------- */

.tuto {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 2px solid var(--color-divider);
    padding: 20px;
}

.tuto-goal {
    font-size: 14px;
    line-height: 1.65;
    color: var(--color-neutral-700);
    margin: 0;
}

/* Où le geste se passe, dit avant de le décrire : une lectrice qui connaît
   déjà l'écran n'a pas besoin de lire les quatre étapes. */
.tuto-where {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent-700);
}

.tuto-where .ic {
    width: 15px;
    height: 15px;
}

.tuto-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tuto-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 14px;
    align-items: start;
}

.tuto-n {
    grid-row: span 2;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 13px;
    line-height: 1;
    padding: 7px 9px;
    border: 2px solid var(--color-divider);
    color: var(--color-accent-700);
}

.tuto-b {
    font-size: 14px;
    line-height: 1.65;
    margin: 0;
}

/* La figure : une reproduction schématique de l'élément à chercher à l'écran.
   `aria-hidden` serait une erreur — le libellé exact du bouton est justement
   ce que l'étape demande de repérer. */
.tuto-fig {
    margin: 8px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.fig-champ {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-width: 100%;
}

.fig-champ-l {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-neutral-600);
}

.fig-champ-v {
    border: 2px solid var(--color-divider);
    background: var(--color-surface);
    padding: 9px 12px;
    font-size: 13px;
    color: var(--color-neutral-700);
    overflow-wrap: anywhere;
}

/* Les mêmes jetons que `.btn-primary`, et pas une couleur écrite à la main :
   la figure doit reproduire le bouton réel, donc elle suit le thème comme lui.
   Écrit `#fff` au départ, elle échouait au contraste en thème sombre — le vrai
   bouton, lui, prend `--color-bg`, qui devient foncé quand le fond s'éclaire. */
.fig-bouton {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--color-accent);
    color: var(--color-bg);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 11px 16px;
}

.fig-bouton .ic {
    width: 16px;
    height: 16px;
}

.fig-ligne {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 2px solid var(--color-divider);
    padding: 11px 13px;
    width: 100%;
}

.fig-ligne-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.fig-ligne-t {
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.fig-ligne-b {
    font-size: 12px;
    color: var(--color-neutral-600);
    overflow-wrap: anywhere;
}

.fig-tag {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 7px;
    border: 2px solid var(--color-accent);
    color: var(--color-accent-700);
    white-space: nowrap;
}

.fig-ligne .ic-fin { color: var(--color-neutral-400); }

/* Une ancre visée depuis un sommaire atterrissait derrière l'en-tête : il est
   `sticky`, haut de 68px, et le titre s'arrêtait à 44px du haut — donc caché.
   Les six ancres du guide y renvoyaient toutes, et le sommaire est justement
   ce qui sert à une lectrice pressée. La marge de défilement laisse la place
   de l'en-tête, sur le site comme dans le portail, dont la barre est plus
   basse. */
[id] { scroll-margin-block-start: 84px; }