/* ============================================================
   ORKESTRA — feuille unique. Direction : éditorial brutaliste.
   Règles du système, à ne pas transgresser :
     - aucun coin arrondi, aucune ombre portée ;
     - la structure se voit : filets 1px partout, jamais de vide seul ;
     - un seul accent (vermillon), utilisé comme de l'encre, pas comme
       du décor ; jamais pour du texte courant (contraste insuffisant) ;
     - toute étiquette, tout compteur, toute métadonnée est en monospace ;
     - aucune police téléchargée, aucune requête externe.
   ============================================================ */

:root {
    --papier: #f3f1ec;
    --papier-2: #e9e6df;
    --encre: #111111;
    --encre-douce: #5c5a55;
    --rouge: #ff3b1f;
    --rouge-encre: #d02508;      /* variante lisible en petit sur papier */
    --filet: #111111;
    --filet-doux: #cbc7bd;

    --fond: var(--papier);
    --fond-2: var(--papier-2);
    --texte: var(--encre);
    --texte-doux: var(--encre-douce);
    --accent: var(--rouge);
    --accent-lisible: var(--rouge-encre);
    --inverse-fond: #111111;
    --inverse-texte: #f3f1ec;
    --inverse-doux: #a5a19a;

    --titre: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --serif: Georgia, "Times New Roman", serif;
    --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mono: Consolas, "SF Mono", Menlo, "Courier New", monospace;

    --large: 1440px;
    --texte-large: 62ch;
    --bord: 1px solid var(--filet);
    --bord-doux: 1px solid var(--filet-doux);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --fond: #0c0c0c;
        --fond-2: #171717;
        --texte: #f0eeea;
        --texte-doux: #9a968f;
        --filet: #f0eeea;
        --filet-doux: #3a3a38;
        --accent: #ff4a2f;
        --accent-lisible: #ff6a52;
        --inverse-fond: #f3f1ec;
        --inverse-texte: #111111;
        --inverse-doux: #5c5a55;
    }
}

:root[data-theme="dark"] {
    --fond: #0c0c0c;
    --fond-2: #171717;
    --texte: #f0eeea;
    --texte-doux: #9a968f;
    --filet: #f0eeea;
    --filet-doux: #3a3a38;
    --accent: #ff4a2f;
    --accent-lisible: #ff6a52;
    --inverse-fond: #f3f1ec;
    --inverse-texte: #111111;
    --inverse-doux: #5c5a55;
}

/* ---------- Socle ---------- */

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

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation: none !important;
        transition-duration: .001ms !important;
    }
}

body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3 {
    font-family: var(--titre);
    font-weight: 900;
    line-height: .92;
    letter-spacing: -.035em;
    text-transform: uppercase;
    margin: 0 0 .4em;
    color: var(--texte);
}

h1 { font-size: clamp(2.6rem, 7.5vw, 6.6rem); }
h2 { font-size: clamp(1.9rem, 4.6vw, 3.6rem); }
h3 {
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    letter-spacing: -.015em;
    line-height: 1.08;
}

p { margin: 0 0 1em; max-width: var(--texte-large); }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

.lien, .prose a {
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.lien:hover, .prose a:hover { background: var(--accent); color: #fff; }

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

strong { font-weight: 700; }

ul { margin: 0; padding: 0; list-style: none; }

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

.saut {
    position: absolute;
    left: -9999px;
    background: var(--encre);
    color: var(--papier);
    padding: .8rem 1.2rem;
    z-index: 100;
    font-family: var(--mono);
    text-transform: uppercase;
    font-size: .8rem;
}
.saut:focus { left: 0; top: 0; }

/* ---------- Trame ---------- */

.wrap {
    width: 100%;
    max-width: var(--large);
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2.5rem);
}

section { padding: clamp(3rem, 6vw, 6rem) 0; border-top: var(--bord); }
section.sans-filet { border-top: 0; }
section.serree { padding: clamp(2rem, 3vw, 3rem) 0; }

.fond-2 { background: var(--fond-2); }

.invert {
    background: var(--inverse-fond);
    color: var(--inverse-texte);
    border-top: 0;
}
.invert h1, .invert h2, .invert h3 { color: var(--inverse-texte); }
.invert .doux { color: var(--inverse-doux); }
.invert .kicker { color: var(--inverse-texte); }

/* En-tête de section : numéro + libellé, en monospace, sur un filet. */

.kicker {
    display: flex;
    align-items: baseline;
    gap: .8rem;
    /* C'est un <p> : sans cela, la largeur de lecture de 62ch tronquerait le
       filet au milieu de la page, ce qui casse toute la trame. */
    max-width: none;
    font-family: var(--mono);
    font-size: .74rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--texte);
    margin: 0 0 1.6rem;
    padding-bottom: .6rem;
    border-bottom: var(--bord);
}
.kicker .no { color: var(--accent); font-weight: 700; }
.kicker .fin { margin-left: auto; color: var(--texte-doux); }
.invert .kicker { border-bottom-color: var(--inverse-texte); }
.invert .kicker .fin { color: var(--inverse-doux); }

.chapo {
    font-family: var(--serif);
    font-size: clamp(1.15rem, 1.9vw, 1.6rem);
    line-height: 1.35;
    max-width: 42ch;
}

.doux { color: var(--texte-doux); }
.mono {
    font-family: var(--mono);
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.petit { font-size: .88rem; }

/* ---------- Bandeau supérieur ---------- */

.masthead {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--fond);
    border-bottom: var(--bord);
}

.masthead-in {
    display: flex;
    align-items: stretch;
    min-height: 56px;
}

.logo {
    display: flex;
    align-items: center;
    font-family: var(--titre);
    font-weight: 900;
    font-size: 1.1rem;
    letter-spacing: -.02em;
    text-transform: uppercase;
    padding-right: 1.6rem;
    border-right: var(--bord);
}
.logo .pt { color: var(--accent); }

.nav { display: flex; align-items: stretch; margin-left: 0; }
.nav a {
    display: flex;
    align-items: center;
    padding: 0 1.2rem;
    border-right: var(--bord);
    font-family: var(--mono);
    font-size: .74rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.nav a:hover { background: var(--accent); color: #fff; }
.nav a[aria-current="page"] { background: var(--texte); color: var(--fond); }

.outils {
    display: flex;
    align-items: stretch;
    margin-left: auto;
    border-left: var(--bord);
}

/* ---------- Sélecteur de langue ----------
   Un <details> plutôt qu'un <select> : le menu déroulant natif ne se met pas
   en forme de façon fiable (sa flèche système se superpose à la nôtre et rogne
   la fin du libellé). Ici tout est à nous, ça marche au clavier, et sans JS. */

.choix-langue { position: relative; display: flex; }

.choix-langue > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: .5rem;
    height: 100%;
    padding: 0 1rem;
    border-right: var(--bord);
    font-family: var(--mono);
    font-size: .74rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
}
.choix-langue > summary::-webkit-details-marker { display: none; }
.choix-langue > summary:hover { background: var(--accent); color: #fff; }

.choix-langue .fleche {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    flex: 0 0 auto;
}
.choix-langue[open] > summary { background: var(--texte); color: var(--fond); }
.choix-langue[open] .fleche { transform: rotate(180deg); }

.choix-langue > ul {
    position: absolute;
    top: 100%;
    right: -1px;
    z-index: 60;
    min-width: 13rem;
    background: var(--fond);
    border: var(--bord);
    border-top: 0;
}
.choix-langue > ul a {
    display: flex;
    align-items: baseline;
    gap: .8rem;
    padding: .7rem 1rem;
    border-bottom: var(--bord-doux);
    font-size: .92rem;
}
.choix-langue > ul li:last-child a { border-bottom: 0; }
.choix-langue > ul a b {
    font-family: var(--mono);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--texte-doux);
    flex: 0 0 1.9rem;
}
.choix-langue > ul a:hover { background: var(--accent); color: #fff; }
.choix-langue > ul a:hover b { color: #fff; }
.choix-langue > ul a[aria-current] { background: var(--fond-2); font-weight: 700; }
.choix-langue > ul a[aria-current] b { color: var(--accent); }

.select-mini {
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .45rem 1.9rem .45rem .9rem;
    color: var(--texte);
    background-color: var(--fond);
    border: var(--bord);
    cursor: pointer;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right .95rem center, right .7rem center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
.select-mini:hover { background-color: var(--accent); color: #fff; }

.bouton-icone {
    width: 48px;
    border: 0;
    border-right: var(--bord);
    background: transparent;
    color: var(--texte);
    font-size: 1rem;
    cursor: pointer;
    font-family: var(--mono);
}
.bouton-icone:last-child { border-right: 0; }
.bouton-icone:hover { background: var(--accent); color: #fff; }

.burger { display: none; }

@media (max-width: 940px) {
    .burger { display: block; }
    .masthead-in { position: relative; }
    .nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background: var(--fond);
        border-bottom: var(--bord);
    }
    .nav a { border-right: 0; border-bottom: var(--bord-doux); padding: .95rem 1.2rem; }
    .masthead.ouvert .nav { display: flex; }
}

/* ---------- Bandeau défilant ---------- */

.ticker {
    border-bottom: var(--bord);
    background: var(--texte);
    color: var(--fond);
    overflow: hidden;
    white-space: nowrap;
}
.ticker-piste {
    display: inline-block;
    padding: .5rem 0;
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    animation: defile 46s linear infinite;
}
.ticker-piste span { padding: 0 1.2rem; }
.ticker-piste b { color: var(--accent); font-weight: 400; }

@keyframes defile {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Sans animation, la piste doit rester lisible immobile : on n'en montre
   qu'une moitié et on la centre plutôt que de laisser un texte coupé. */
@media (prefers-reduced-motion: reduce) {
    .ticker { white-space: normal; }
    .ticker-piste { display: block; text-align: center; }
    .ticker-piste > span:nth-child(n + 7) { display: none; }
}

/* Sans animation ET sur petit écran, six mentions font trois lignes : on
   n'en garde que trois, le bandeau reste une ligne de contexte, pas un pavé. */
@media (prefers-reduced-motion: reduce) and (max-width: 700px) {
    .ticker-piste > span:nth-child(n + 4) { display: none; }
}

/* ---------- Une ---------- */

.une { padding: clamp(2.5rem, 5vw, 4.5rem) 0 0; border-top: 0; }

.une h1 { margin-bottom: .28em; }
.une h1 .rouge { color: var(--accent); }

.une-bas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: end;
    padding-bottom: clamp(2rem, 4vw, 3.5rem);
}
/* Par défaut les deux colonnes s'alignent par le bas — c'est ce qui fait
   « poser » le visuel sur la ligne de base du texte. Quand la colonne de
   droite est nettement plus haute (un formulaire, un tableau d'offres), il
   faut repasser en alignement haut, sinon la colonne courte tombe en bas de
   page et laisse un trou. */
.une-bas.haut { align-items: start; }

@media (max-width: 900px) { .une-bas { grid-template-columns: minmax(0, 1fr); } }

.actions { display: flex; flex-wrap: wrap; gap: 0; margin: 1.8rem 0 0; }

/* ---------- Boutons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.05rem 1.8rem;
    border: var(--bord);
    background: transparent;
    color: var(--texte);
    font-family: var(--mono);
    font-size: .8rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .12s, color .12s;
}
.btn + .btn { border-left: 0; }
@media (max-width: 520px) {
    .actions { flex-direction: column; align-items: stretch; }
    .btn + .btn { border-left: var(--bord); border-top: 0; }
}

.btn:hover { background: var(--texte); color: var(--fond); }

.btn-plein { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-plein:hover { background: var(--texte); border-color: var(--texte); color: var(--fond); }

.invert .btn { border-color: var(--inverse-texte); color: var(--inverse-texte); }
.invert .btn:hover { background: var(--inverse-texte); color: var(--inverse-fond); }
.invert .btn-plein { background: var(--accent); border-color: var(--accent); color: #fff; }
.invert .btn-plein:hover { background: var(--inverse-texte); border-color: var(--inverse-texte); color: var(--inverse-fond); }

.note-cta {
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .06em;
    line-height: 1.5;
    color: var(--texte-doux);
    margin-top: 1rem;
    max-width: 44ch;
}

/* ---------- Captures d'écran de l'application ----------

   De vraies captures de la fenêtre d'Orkestra Control, une par langue de
   l'application (voir outils/images.py). Le filet 1 px remplace l'ombre
   portée que le système s'interdit : c'est lui qui détache l'image du
   papier. Aucun arrondi — l'image n'est pas « posée », elle est encadrée.

   width/height sont écrits dans le HTML : sans eux la page saute quand
   l'image arrive. L'image est donc réservée à son ratio exact dès le
   premier rendu.                                                         */

.capture {
    margin: 0;
}
.capture img {
    display: block;
    width: 100%;
    height: auto;
    border: var(--bord);
    background: var(--fond-2);
}

/* La capture du héros prend toute la largeur utile. Ce n'est pas une envie
   de grand format : à la demi-largeur d'une colonne, l'interface capturée
   descend sous 6 px de hauteur de texte et l'argument tombe — on montre un
   logiciel qu'on ne peut pas lire. Le plafond est la largeur NATIVE de la
   capture : au-delà, le navigateur agrandirait des pixels. */
.capture-hero {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    max-width: 1266px;
}

/* Colonne de texte du héros. La capture ayant pris toute la largeur en
   dessous, le texte n'a plus de voisin de droite : une grille à deux
   colonnes ne laisserait qu'un vide. Le chapô garde sa mesure de lecture
   par .chapo — on ne l'étire pas au format de la capture. */
.une-texte {
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* Deuxième capture, sous les trois blocs : même règle, même plafond. */
.capture-large {
    margin-top: clamp(2rem, 5vw, 3.5rem);
    max-width: 1266px;
}

.legende {
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .08em;
    color: var(--texte-doux);
    margin-top: .7rem;
    max-width: none;
}

/* ---------- Compteurs ---------- */

.compteurs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: var(--bord);
    border-bottom: var(--bord);
}
.compteur { padding: 1.6rem clamp(.8rem, 2vw, 1.6rem); border-right: var(--bord-doux); }
.compteur:last-child { border-right: 0; }
.compteur b {
    display: block;
    font-family: var(--titre);
    font-weight: 900;
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    line-height: .85;
    letter-spacing: -.045em;
    color: var(--accent);
}
.compteur span {
    display: block;
    margin-top: .7rem;
    font-family: var(--mono);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--texte-doux);
}
@media (max-width: 760px) {
    .compteurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .compteur:nth-child(2) { border-right: 0; }
    .compteur:nth-child(-n + 2) { border-bottom: var(--bord-doux); }
}

/* ---------- Colonnes ---------- */

.duo-texte {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: clamp(1.5rem, 4vw, 4rem);
}
@media (max-width: 900px) { .duo-texte { grid-template-columns: minmax(0, 1fr); } }

.prose { font-size: 1.05rem; }
.prose p { margin-bottom: 1.1em; }

.encart { border: var(--bord); padding: clamp(1.2rem, 2vw, 1.8rem); }
.encart h3 { margin-bottom: .6em; }
.encart p { font-size: .96rem; }
.encart .pourquoi {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: var(--bord-doux);
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .04em;
    line-height: 1.6;
    color: var(--texte-doux);
    max-width: none;
}

.exergue {
    border-left: 4px solid var(--accent);
    padding-left: 1.4rem;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    line-height: 1.35;
    max-width: 34ch;
}

/* ---------- Blocs numérotés ---------- */

/* auto-fit, pour la même raison que .etapes : deux blocs occupent deux
   colonnes pleines, trois en occupent trois. */
.blocs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); border-top: var(--bord); }
.bloc { padding: 2rem clamp(1rem, 2vw, 2rem) 2.2rem; border-right: var(--bord-doux); }
.bloc:last-child { border-right: 0; }
.bloc .no {
    font-family: var(--mono);
    font-size: .74rem;
    letter-spacing: .18em;
    color: var(--accent);
    display: block;
    margin-bottom: 1.4rem;
}
.bloc h3 { margin-bottom: .7em; }
.bloc p { color: var(--texte-doux); font-size: .96rem; }

@media (max-width: 900px) {
    .blocs { grid-template-columns: minmax(0, 1fr); }
    .bloc { border-right: 0; border-bottom: var(--bord-doux); }
    .bloc:last-child { border-bottom: 0; }
}

.liste-mono { margin-top: 1.3rem; }
.liste-mono li {
    position: relative;
    padding: .5rem 0 .5rem 1.5rem;
    border-top: var(--bord-doux);
    font-size: .92rem;
}
.liste-mono li:last-child { border-bottom: var(--bord-doux); }
.liste-mono li::before {
    content: "+";
    position: absolute;
    left: 0;
    top: .5rem;
    font-family: var(--mono);
    color: var(--accent);
}
.liste-mono li.non { color: var(--texte-doux); }
.liste-mono li.non::before { content: "\2212"; color: var(--texte-doux); }
.invert .liste-mono li { border-color: rgba(255, 255, 255, .18); }

/* ---------- Étapes ---------- */

/* auto-fit : quatre étapes tiennent en quatre colonnes, cinq en cinq, sans
   rangée orpheline et sans toucher au gabarit. */
.etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border-top: 1px solid currentColor; }
.etape { padding: 1.8rem clamp(.9rem, 2vw, 1.8rem) 0; border-right: 1px solid currentColor; }
.etape:last-child { border-right: 0; }
.etape .no {
    font-family: var(--titre);
    font-weight: 900;
    font-size: 2.6rem;
    line-height: 1;
    letter-spacing: -.05em;
    color: var(--accent);
    display: block;
    margin-bottom: .8rem;
}
.etape h3 { font-size: 1rem; margin-bottom: .6em; }
.etape p { font-size: .92rem; }
@media (max-width: 900px) {
    .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .etape:nth-child(2) { border-right: 0; }
    .etape:nth-child(-n + 2) { padding-bottom: 1.6rem; border-bottom: 1px solid currentColor; }
}
@media (max-width: 560px) {
    .etapes { grid-template-columns: minmax(0, 1fr); }
    .etape { border-right: 0; border-bottom: 1px solid currentColor; padding-bottom: 1.6rem; }
    .etape:last-child { border-bottom: 0; }
}

/* ---------- Mur de thèmes ---------- */

.mur {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    border-top: var(--bord);
    border-left: var(--bord);
}
.vignette {
    border-right: var(--bord);
    border-bottom: var(--bord);
    display: block;
}
.vignette .bandes { display: flex; height: 88px; }
.vignette .bandes i { flex: 1 1 auto; }
.vignette .bandes i:first-child { flex: 2.2 1 auto; }
.vignette .txt {
    padding: .5rem .6rem .6rem;
    border-top: var(--bord);
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    gap: .4rem;
}
.vignette .txt b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.vignette .txt span { color: var(--texte-doux); flex: 0 0 auto; }
.vignette:hover .txt { background: var(--accent); color: #fff; }
.vignette:hover .txt span { color: #fff; }

/* ---------- Tableau ---------- */

.tableau-enveloppe { overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: var(--bord); }

table.cmp { width: 100%; min-width: 680px; border-collapse: collapse; }
table.cmp th, table.cmp td {
    padding: .95rem 1rem;
    text-align: left;
    vertical-align: top;
    border-bottom: var(--bord-doux);
    font-size: .93rem;
}
table.cmp thead th {
    font-family: var(--mono);
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    border-bottom: var(--bord);
    color: var(--texte-doux);
}
table.cmp tbody th {
    font-family: var(--mono);
    font-size: .74rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--texte);
}
table.cmp .nous { background: var(--texte); color: var(--fond); font-weight: 700; }
table.cmp thead .nous { color: var(--fond); }

/* ---------- Offres ---------- */

.offres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: var(--bord); }
@media (max-width: 860px) { .offres { grid-template-columns: minmax(0, 1fr); } }

.offre { padding: clamp(1.6rem, 3vw, 2.6rem); border-right: var(--bord); display: flex; flex-direction: column; }
.offre:last-child { border-right: 0; }
@media (max-width: 860px) {
    .offre { border-right: 0; border-bottom: var(--bord); }
    .offre:last-child { border-bottom: 0; }
}

.offre.forte { background: var(--inverse-fond); color: var(--inverse-texte); }
.offre.forte h3 { color: var(--inverse-texte); }
.offre.forte .sous, .offre.forte .doux { color: var(--inverse-doux); }
.offre.forte .liste-mono li { border-color: rgba(255, 255, 255, .18); }
.offre.forte .btn { border-color: var(--accent); background: var(--accent); color: #fff; }
.offre.forte .btn:hover { background: var(--inverse-texte); border-color: var(--inverse-texte); color: var(--inverse-fond); }

.offre .etiquette {
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent);
    display: block;
    margin-bottom: 1rem;
}
.offre h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); margin-bottom: .3em; }
.offre .sous { font-size: .92rem; color: var(--texte-doux); margin-bottom: 1.6rem; }

.montant {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    flex-wrap: wrap;
    padding: 1.2rem 0;
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
}
.montant .val {
    font-family: var(--titre);
    font-weight: 900;
    font-size: clamp(2.4rem, 4.5vw, 3.6rem);
    line-height: .85;
    letter-spacing: -.045em;
}
.montant .unite {
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--texte-doux);
}
.offre.forte .montant .unite { color: var(--inverse-doux); }

/* ---------- Paliers de licence (1 / 2 / 3 postes) ----------

   Sélecteur en CSS pur : des boutons radio, des `label`, et des règles
   `:checked ~` qui ne laissent voir que le montant du palier choisi. Aucun
   script — le site doit rester juste sans JavaScript, et les trois montants
   sont dans le HTML, donc lisibles par un lecteur d'écran comme par un
   moteur de recherche.

   Les radios sont sorties du flux mais PAS en `display:none` ni
   `visibility:hidden` : ces deux-là les retirent de l'ordre de tabulation et
   le clavier ne peut plus changer de palier.                              */

.paliers {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;             /* un fieldset a une largeur minimale implicite */
}
.paliers input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.paliers label {
    display: inline-block;
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .45rem .7rem;
    border: 1px solid currentColor;
    margin: 0 -1px -1px 0;    /* filets partagés, jamais doublés */
    cursor: pointer;
}
.paliers input:checked + label {
    background: var(--texte);
    color: var(--fond);
}
/* Dans la carte inversée, le palier coché s'inverse à son tour. */
.offre.forte .paliers input:checked + label {
    background: var(--inverse-texte);
    color: var(--inverse-fond);
}
.paliers input:focus-visible + label {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.paliers .montant { margin-top: 1.1rem; }

/* Un seul montant visible : celui du palier coché. L'attribut `data-prix`
   sert des deux côtés — ici pour l'affichage, dans site.js pour convertir. */
.paliers .montant .val { display: none; }
.paliers input:nth-of-type(1):checked ~ .montant [data-prix="1"],
.paliers input:nth-of-type(2):checked ~ .montant [data-prix="2"],
.paliers input:nth-of-type(3):checked ~ .montant [data-prix="3"] {
    display: block;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.offre .actions { margin: 1.4rem 0 0; }
.offre .actions .btn { width: 100%; }
.offre .liste-mono { flex: 1 1 auto; }
.offre .garantie {
    margin-top: 1.4rem;
    font-family: var(--mono);
    font-size: .72rem;
    line-height: 1.6;
    letter-spacing: .04em;
    color: var(--texte-doux);
    max-width: none;
}
.offre.forte .garantie { color: var(--inverse-doux); }

.barre-devise {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .8rem;
    margin-bottom: 1rem;
    font-family: var(--mono);
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--texte-doux);
}
.barre-devise .select-mini { border: var(--bord); }

.ref-devise {
    font-family: var(--mono);
    font-size: .68rem;
    line-height: 1.6;
    letter-spacing: .04em;
    color: var(--texte-doux);
    margin-top: .8rem;
    max-width: none;
}
.offre.forte .ref-devise { color: var(--inverse-doux); }

/* ---------- FAQ ---------- */

.faq { border-top: var(--bord); }
.faq details { border-bottom: var(--bord-doux); }
.faq summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    gap: 1.2rem;
    align-items: baseline;
    padding: 1.3rem 2.5rem 1.3rem 0;
    position: relative;
    font-family: var(--titre);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -.02em;
    font-size: clamp(1rem, 1.7vw, 1.3rem);
    line-height: 1.1;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .no {
    font-family: var(--mono);
    font-weight: 400;
    font-size: .74rem;
    letter-spacing: .1em;
    color: var(--accent);
    flex: 0 0 auto;
}
.faq summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 1.2rem;
    font-family: var(--mono);
    font-size: 1.4rem;
    line-height: 1;
    color: var(--accent);
}
.faq details[open] summary::after { content: "\2212"; }
.faq .rep { padding: 0 2.5rem 1.6rem 3.6rem; color: var(--texte-doux); }
.faq .rep p { max-width: 68ch; }

/* ---------- Formulaire ---------- */

.form { border-top: var(--bord); }
.champ { display: grid; gap: .4rem; padding: 1.1rem 0; border-bottom: var(--bord-doux); }
.champ label {
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.champ .aide { font-size: .84rem; color: var(--texte-doux); }
.champ input, .champ select, .champ textarea {
    font: inherit;
    width: 100%;
    padding: .75rem .85rem;
    color: var(--texte);
    background: var(--fond);
    border: var(--bord);
}
.champ input:focus, .champ textarea:focus { outline: 3px solid var(--accent); outline-offset: 0; }
.champ-case {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    padding: 1.1rem 0;
    border-bottom: var(--bord-doux);
}
.champ-case input { width: auto; margin-top: .25rem; flex: 0 0 auto; accent-color: var(--accent); }
.champ-case label { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; line-height: 1.6; }
.pot { position: absolute; left: -9999px; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; }
@media (max-width: 620px) { .duo { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Pied ---------- */

.pied {
    background: var(--inverse-fond);
    color: var(--inverse-texte);
    padding: clamp(2.5rem, 5vw, 4rem) 0 1.6rem;
}
.pied .signature {
    font-family: var(--titre);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -.045em;
    line-height: .82;
    font-size: clamp(3.5rem, 14vw, 11rem);
    margin: 0 0 2.5rem;
    color: var(--inverse-texte);
}
.pied .signature .pt { color: var(--accent); }
.pied-grille {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: 2rem;
    border-top: 1px solid currentColor;
    padding-top: 1.8rem;
}
@media (max-width: 860px) { .pied-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pied-grille { grid-template-columns: minmax(0, 1fr); } }
.pied h4 {
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--inverse-doux);
    margin: 0 0 1rem;
    font-weight: 400;
}
.pied ul { display: grid; gap: .55rem; font-size: .9rem; }
.pied a:hover { color: var(--accent); }
.pied .baseline { color: var(--inverse-doux); font-size: .92rem; max-width: 34ch; }
.pied-bas {
    margin-top: 2.5rem;
    padding-top: 1.4rem;
    border-top: 1px solid currentColor;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--inverse-doux);
}
.langues { display: flex; gap: 1.2rem; }
.langues a:hover { color: var(--accent); }

/* ---------- Divers ---------- */

.centre-large { max-width: 78ch; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }