/**
 * IMAY — La proposition
 *
 * Feuille partagée par la page « proposition » et par la maquette F de
 * l'atelier : les deux doivent rendre exactement la même chose.
 *
 * Tout est enfermé dans « .of ». Ce fichier est chargé sur tout le site
 * (head.php parcourt app/style/), mais aucune règle n'atteint une page qui ne
 * porte pas ce conteneur. Les @font-face ne téléchargent rien tant que la
 * police n'est pas employée.
 *
 * SPÉCIFICITÉ : les remises à zéro passent par :where(), de poids nul. Sans
 * ça « .of a » (0,1,1) l'emporterait sur « .of-bouton » (0,1,0) et les
 * boutons noirs auraient du texte noir. L'erreur a déjà été faite deux fois.
 */

/* ─── Switzer ──────────────────────────────────────────────────────────────
   Grotesque neutre, de Fontshare (ITF Free Font Licence), servie depuis le
   serveur plutôt que depuis leur CDN : le site n'a pas de mod_expires, et une
   dépendance tierce sur le chemin critique du rendu se paye à chaque visite. */
@font-face { font-family: "Switzer"; src: url("font/switzer-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("font/switzer-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("font/switzer-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("font/switzer-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ─── Les jetons ───────────────────────────────────────────────────────────
   Papier blanc, encre presque noire, un gris de texte secondaire, un seul
   accent. Contrastes mesurés sur blanc : encre 19,3:1 · atténué 5,7:1 ·
   accent 5,18:1. Blanc sur l'accent : 5,18:1 également. L'accent précédent
   (#d94a1f) tombait à 4,24:1, sous le seuil pour du texte de 15 px — « Ouvrir
   le site entier » et « Écrire à Imay » étaient en dessous. */
.of {
    --of-encre:   #111111;
    --of-attenue: #6b6b6b;
    --of-trait:   rgb(17 17 17 / .14);
    --of-accent:  #c2410c;
    --of-papier:  #ffffff;
    --of-gris:    #f2f2f1;
    --of-marge:   clamp(20px, 3.5vw, 56px);

    font-family: "Switzer", system-ui, -apple-system, sans-serif;
    font-size: 17px;
    line-height: 1.5;
    color: var(--of-encre);
    background: var(--of-papier);
}
/* La feuille de police du framework applique --font-family-h aux titres avec
   une spécificité qu'un simple « .of h2 » ne bat pas. On redéfinit donc les
   variables pour ce sous-arbre : c'est la seule chose que le framework lit. */
.of, .of * {
    --font-family: "Switzer";
    --font-family-h: "Switzer";
    --font-family-main-title: "Switzer";
}
.of *, .of *::before, .of *::after { box-sizing: border-box; }
:where(.of) :where(h1, h2, h3, h4, p, dl, dd, ul, ol, figure) { margin: 0; }
/* Poids d'un élément et non zéro : « ul { padding-left: 2rem } » de Bootstrap
   (0,0,1) battait une remise à zéro en :where(), et les planches partaient
   32 px trop à droite — assez pour déborder la marge. */
.of ul, .of ol { list-style: none; padding: 0; margin: 0; }
:where(.of) :where(a) { color: inherit; text-decoration: none; }
.of h1, .of h2, .of h3, .of h4 { font-family: "Switzer", system-ui, sans-serif; }
.of img { display: block; max-width: 100%; }
.of :focus-visible { outline: 3px solid var(--of-accent); outline-offset: 2px; }
.of-invisible {
    position: absolute; width: 1px; height: 1px; /* taste-skill-ignore */
    padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.of-sec__entete { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; }
.of-sec__titre { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.of-sec__entete p { font-size: 16px; color: var(--of-attenue); }

.of-bouton {
    display: inline-flex; align-items: center; min-height: 50px; padding: 0 24px;
    background: var(--of-encre); color: #fff; font-weight: 600; font-size: 16px;
    transition: background-color .15s, color .15s;
}
.of-bouton:hover, .of-bouton:focus-visible { background: var(--of-accent); color: #fff; }
.of-bouton--clair { background: var(--of-accent); color: #fff; }
.of-bouton--clair:hover, .of-bouton--clair:focus-visible { background: #fff; color: var(--of-encre); }
.of-lien {
    display: inline-block; font-size: 16px; font-weight: 500;
    border-bottom: 1px solid currentColor; padding-bottom: 2px;  /* taste-skill-ignore : soulignement de lien */
}
.of-lien:hover { color: var(--of-accent); }

/* ─── La barre ─────────────────────────────────────────────────────────────*/
.of-barre {
    display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
    padding: 18px var(--of-marge); border-bottom: 1px solid var(--of-trait); font-size: 14px;  /* taste-skill-ignore : filet de structure, pas d'ornement */
}
.of-barre__nom { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.of-barre nav { display: flex; gap: 22px; }
.of-barre nav a:hover { color: var(--of-accent); }
.of-barre__lieu { color: var(--of-attenue); }

/* ─── ① L'accroche ─────────────────────────────────────────────────────────*/
.of-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(220px, 0.85fr);
    gap: clamp(28px, 5vw, 80px);
    align-items: end;
    padding: clamp(52px, 8vh, 108px) var(--of-marge) clamp(44px, 6vh, 72px);
}
.of-hero__titre {
    font-size: clamp(32px, 4.3vw, 64px);
    font-weight: 600; line-height: 1.02; letter-spacing: -0.03em; max-width: 17ch;
}
.of-hero__sous { margin-top: clamp(20px, 3vh, 32px); max-width: 48ch; font-size: 18px; color: #333; }
.of-hero__actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: clamp(24px, 3.5vh, 40px); }

.of-hero__faits { align-self: end; }
.of-hero__faits > div {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding: 10px 0; border-bottom: 1px solid var(--of-trait);  /* taste-skill-ignore : filet de structure, pas d'ornement */
}
.of-hero__faits > div:first-child { border-top: 1px solid var(--of-trait); /* taste-skill-ignore : filet de structure */ }
.of-hero__faits dt { font-size: 14px; color: var(--of-attenue); }
.of-hero__faits dd { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* ─── ② Quatre phrases, quatre réponses ────────────────────────────────────*/
.of-reponses { padding: clamp(28px, 4vh, 48px) var(--of-marge) clamp(40px, 6vh, 68px); }
.of-rep {
    display: grid;
    grid-template-columns: minmax(240px, 1.1fr) minmax(260px, 1.3fr) minmax(220px, 0.95fr);
    gap: clamp(18px, 2.4vw, 40px);
    align-items: start;
    padding: clamp(22px, 3vh, 34px) 0;
    border-top: 1px solid var(--of-trait);  /* taste-skill-ignore : filet de structure, pas d'ornement */
}
.of-rep:last-child { border-bottom: 1px solid var(--of-trait); /* taste-skill-ignore : filet de structure */ }
.of-rep__dit {
    font-size: clamp(19px, 1.9vw, 27px);
    font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; text-wrap: pretty;
}
.of-rep__nom { font-size: 16px; font-weight: 600; }
.of-rep__detail { margin-top: 7px; font-size: 16px; line-height: 1.5; color: #444; }
.of-rep__vue {
    width: 100%; height: 122px; object-fit: cover; object-position: top center;
    background: var(--of-gris);
}
.of-rep__vue + .of-rep__nompreuve { margin-top: 10px; }
.of-rep__nompreuve { font-size: 16px; font-weight: 600; }
.of-rep__souspreuve { font-size: 14px; color: var(--of-attenue); }

/* ─── ③ « Vous êtes… » ─────────────────────────────────────────────────────
   La mécanique de la page du même nom, resserrée : le métier tourne, la
   capture suit, et le champ s'arrête dès qu'on y touche. */
.of-metier { padding: clamp(40px, 6vh, 76px) var(--of-marge); background: var(--of-gris); }
.of-metier__ligne {
    display: flex; align-items: baseline; flex-wrap: wrap;
    font-size: clamp(30px, 4.6vw, 68px);
    font-weight: 600; line-height: 1.08; letter-spacing: -0.03em;
}
.of-metier__prefixe { color: var(--of-attenue); margin-right: 0.28em; }
/* Le champ se dimensionne sur son contenu : étalé sur toute la largeur, le
   soulignement orange courait tout seul sur quarante centimètres après un mot
   de neuf lettres. « field-sizing » suffit là où il existe ; ailleurs, le
   script mesure le mot dans un miroir et pose la largeur. */
/* ─── L'enveloppe du mot ───────────────────────────────────────────────────
   C'est elle qui porte le soulignement, et c'est sa largeur qui s'anime :
   quand le métier change, le trait orange s'allonge ou se raccourcit au lieu
   de sauter. Sa largeur est posée par le script, qui mesure le mot. */
.of-metier__mot {
    position: relative;
    display: inline-block;
    padding-bottom: 6px;
    border-bottom: 4px solid var(--of-accent);  /* taste-skill-ignore : filet de structure, pas d'ornement */
    vertical-align: baseline;
    transition: width .52s cubic-bezier(.22, 1, .36, 1);
}
.of-metier__champ {
    display: block;
    width: 100%; min-width: 6ch;
    padding: 0;
    border: 0; background: none;
    font: inherit; letter-spacing: inherit; color: var(--of-encre);
    outline: none; white-space: nowrap; overflow-x: auto; scrollbar-width: none;
}
.of-metier__champ::-webkit-scrollbar { display: none; }
.of-metier__champ:focus-visible { outline: 3px solid var(--of-accent); outline-offset: 10px; }

/* ─── La roue des métiers ──────────────────────────────────────────────────
   Tant qu'elle tourne, le champ reste en place mais son texte est transparent
   et c'est la roue qu'on lit : on ne peut pas animer la valeur d'un <input>,
   seulement la remplacer d'un coup. Dès qu'on touche au champ, la roue
   disparaît et le texte revient — c'est le champ qui reprend la main.

   La classe n'est posée que par le script : sans lui, la roue est vide et
   c'est le champ qu'on voit. */
.of-metier__mot.roue-active .of-metier__champ { color: transparent; caret-color: transparent; }
/* La fente déborde de 0,22em en haut et en bas : à ras, elle rognait les
   hampes et les jambages du mot au repos. Elle masque toujours ce qui part
   et ce qui arrive — c'est ce qui fait lire le roulement. */
.of-metier__roue {
    position: absolute;
    inset: -0.22em 0;
    overflow: hidden;
    pointer-events: none;
}
.of-metier__cran {
    position: absolute;
    left: 0; top: 0.22em;          /* compense le débord de la fente */
    white-space: nowrap;
    will-change: transform, opacity;
}
/* Le mot sortant monte et s'efface ; l'entrant arrive du bas. */
.of-metier__cran--attend { transform: translateY(0.62em); opacity: 0; }
.of-metier__cran--arrive {
    transform: none;
    opacity: 1;
    transition: transform .52s cubic-bezier(.22, 1, .36, 1), opacity .3s ease-out .06s;
}
/* Déclarée APRÈS « --arrive » : si les deux se retrouvent sur le même cran,
   c'est le départ qui doit gagner. */
.of-metier__cran--part {
    transform: translateY(-0.62em);
    opacity: 0;
    transition: transform .5s cubic-bezier(.4, 0, .25, 1), opacity .34s ease-in;
}

.of-metier__corps {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr);
    gap: clamp(22px, 3vw, 52px);
    align-items: start;
    margin-top: clamp(26px, 4vh, 44px);
}
.of-metier__cadre { display: block; background: #fff; }
.of-metier__cadre img {
    width: 100%; height: auto; aspect-ratio: 16 / 10;
    object-fit: cover; object-position: top center; background: #fff;
}
.of-metier__titre { font-size: clamp(20px, 2vw, 28px); font-weight: 600; letter-spacing: -0.02em; }
.of-metier__detail { margin-top: 8px; font-size: 16px; color: #444; }
.of-metier__ouvrir {
    display: inline-block; margin-top: 14px; font-size: 16px; font-weight: 600;
    color: var(--of-accent); border-bottom: 1px solid currentColor; padding-bottom: 2px;  /* taste-skill-ignore : soulignement de lien */
}
/* Le prix de départ, posé juste sous la réponse : c'est l'endroit où l'on se
   demande combien ça coûte, et une page qui ne répond pas perd le visiteur. */
.of-metier__prix {
    margin-top: 18px;
    font-size: 17px;
    font-weight: 600;
}
.of-metier__note { margin-top: 14px; max-width: 38ch; font-size: 14px; color: var(--of-attenue); }
.of-metier__dit.est-vide .of-metier__titre { color: var(--of-attenue); }

.of-planche { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: clamp(24px, 3.5vh, 40px); }
.of-planche img {
    width: 100%; height: 150px; object-fit: cover; object-position: top center;
    background: #fff; filter: grayscale(1) contrast(1.05); opacity: .62;
    transition: filter .18s, opacity .18s;
}
.of-planche span { display: block; margin-top: 7px; font-size: 13px; color: var(--of-attenue); }
.of-planche li.est-actif img,
.of-planche a:hover img,
.of-planche a:focus-visible img { filter: none; opacity: 1; }
.of-planche li.est-actif span { color: var(--of-encre); font-weight: 600; }

/* ─── ④ Ce qui tourne ──────────────────────────────────────────────────────*/
.of-tourne { padding: clamp(40px, 6vh, 72px) var(--of-marge) clamp(36px, 5vh, 60px); }
.of-ligne {
    display: grid;
    grid-template-columns: 104px minmax(160px, 1fr) 124px 2fr 148px;
    gap: clamp(14px, 1.6vw, 26px); align-items: center;
    padding: 11px 0; border-top: 1px solid var(--of-trait);  /* taste-skill-ignore : filet de structure, pas d'ornement */
}
.of-ligne:last-child { border-bottom: 1px solid var(--of-trait); /* taste-skill-ignore : filet de structure */ }
.of-ligne:hover { background: #fafafa; }
.of-ligne__vue { width: 104px; height: 65px; object-fit: cover; object-position: top center; background: var(--of-gris); }
/* Un cadre en pointillés se lit comme une image qui manque. Un aplat clair
   se lit comme « rien à montrer », ce qui est le cas. */
.of-ligne__sansvue { display: block; width: 104px; height: 65px; background: var(--of-gris); }
.of-ligne__nom { font-size: 16px; font-weight: 600; }
.of-ligne__cat { font-size: 14px; color: var(--of-attenue); }
.of-ligne__detail { font-size: 16px; color: #444; }
.of-ligne__voir { font-size: 14px; font-weight: 600; text-align: right; }
.of-ligne a.of-ligne__voir:hover { color: var(--of-accent); }
.of-ligne--muette .of-ligne__nom { font-weight: 500; }
.of-ligne--muette .of-ligne__voir { font-weight: 400; color: var(--of-attenue); }

/* ─── ⑤ Qui ────────────────────────────────────────────────────────────────*/
.of-qui {
    display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(24px, 4vw, 64px);
    padding: clamp(32px, 5vh, 56px) var(--of-marge);
    border-top: 1.5px solid var(--of-encre);  /* taste-skill-ignore : filet de structure, pas d'ornement */
}
.of-qui__texte p { margin-top: 12px; max-width: 58ch; font-size: 17px; color: #333; }
.of-qui__liens { display: grid; gap: 12px; justify-items: start; align-content: start; padding-top: 4px; }

/* ─── ⑥ Le pas suivant ─────────────────────────────────────────────────────*/
.of-fin {
    display: flex; align-items: center; justify-content: space-between;
    gap: 32px; flex-wrap: wrap;
    padding: clamp(44px, 7vh, 84px) var(--of-marge);
    background: var(--of-encre); color: #fff;
}
.of-fin__titre {
    font-size: clamp(24px, 2.9vw, 42px);
    font-weight: 600; line-height: 1.08; letter-spacing: -0.028em; max-width: 20ch;
}
.of-fin__sous { margin-top: 12px; max-width: 48ch; font-size: 16px; color: #d2d2d2; }

@media (max-width: 1100px) {
    .of-hero { grid-template-columns: 1fr; align-items: start; }
    .of-rep { grid-template-columns: 1fr 1fr; }
    .of-rep__preuve { grid-column: 1 / 3; }
    .of-metier__corps { grid-template-columns: 1fr; }
    .of-planche { grid-template-columns: repeat(4, 1fr); }
    .of-qui { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .of-rep { grid-template-columns: 1fr; }
    .of-metier__ligne { font-size: 9vw; }
    .of-planche { grid-template-columns: repeat(3, 1fr); }
    .of-planche img { height: 120px; }
    .of-ligne { grid-template-columns: 84px 1fr; row-gap: 3px; }
    .of-ligne__vue, .of-ligne__sansvue { width: 84px; height: 54px; }
    .of-ligne__cat, .of-ligne__detail, .of-ligne__voir { grid-column: 2; text-align: left; }
    .of-hero__actions .of-bouton { width: 100%; justify-content: center; }
    .of-fin .of-bouton { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .of-planche img { transition: none; }
    /* Mouvement réduit : aucune rotation (le script s'abstient), donc ni roue
       ni largeur animée. Le mot reste simplement posé. */
    .of-metier__mot { transition: none; }
    .of-metier__cran--part, .of-metier__cran--arrive { transition: none; }
}

/* ─── Le mouvement ─────────────────────────────────────────────────────────
   Les parties de chaque section montent une fois, à l'entrée. Le masque
   n'est posé que par le script : sans lui, rien ne reste invisible. */
.of-entre > * { opacity: 0; transform: translateY(18px); }
.of-entre.est-vu > * {
    opacity: 1; transform: none;
    transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
}
.of-entre.est-vu > *:nth-child(2) { transition-delay: .06s; }
.of-entre.est-vu > *:nth-child(3) { transition-delay: .12s; }
.of-entre.est-vu > *:nth-child(4) { transition-delay: .18s; }
.of-entre.est-vu > *:nth-child(5) { transition-delay: .24s; }
.of-entre.est-vu > *:nth-child(6) { transition-delay: .30s; }
.of-entre.est-vu > *:nth-child(7) { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
    .of-entre > *, .of-entre.est-vu > * { opacity: 1; transform: none; transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   L'HABILLAGE DU FRAMEWORK
   ═══════════════════════════════════════════════════════════════════════════
   Les six pages publiques gardent la barre de menu et le pied rendus par le
   framework : c'est une contrainte du projet, et les couper casserait le
   plan du site, le sélecteur de thème et le menu du bas sur téléphone. On ne
   les supprime pas, on les habille dans la même langue que le reste.

   Le framework rend « <body id="page-NOM"> » : on ne peut pas poser de classe
   sur le corps depuis une vue, les six pages se nomment donc une à une. */
body#page-accueil,
body#page-services,
body#page-methode,
body#page-realisations,
body#page-entreprise,
body#page-contact,
body#page-vous_etes {
    --of-chrome: 55px;   /* mesuré par _partiels/menu_bas.php ; repli ici */

    background: #fff;
    color: #111;
    font-family: "Switzer", system-ui, -apple-system, sans-serif;
    font-size: 17px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;

    /* Le framework pose « overflow-x: hidden » sur le corps, et la règle force
       l'autre axe à « auto » : le corps devient alors son propre conteneur de
       défilement, haut comme son contenu, donc immobile — et tout
       « position: sticky » posé dedans cesse de coller. « clip » garde la
       protection horizontale sans créer de conteneur de défilement. */
    overflow-x: clip;
    overflow-y: visible;
}
body#page-accueil main, body#page-services main, body#page-methode main,
body#page-realisations main, body#page-entreprise main, body#page-contact main,
body#page-vous_etes main { padding: 0; margin: 0; }
body#page-accueil footer, body#page-services footer, body#page-methode footer,
body#page-realisations footer, body#page-entreprise footer, body#page-contact footer,
body#page-vous_etes footer { margin-top: 0; }

/* La police du framework, réaffectée. « Raleway VF » reste déclarée dans
   imay.css : les sept sites modèles et le bandeau s'en servent nommément. */
:root, * {
    --font-family: "Switzer";
    --font-family-main-title: "Switzer";
    --font-family-h: "Switzer";
}

/* ─── La barre de menu ─────────────────────────────────────────────────────
   Elle redevient celle du framework : fixée, translucide avec son flou, et
   qui se détache en pastille arrondie dès qu'on descend (« .navbar.scrolled »
   dans ground/menu.css). La refonte l'avait mise à plat — fond transparent,
   ombre retirée, position absolue — et il ne restait qu'une rangée de mots
   flottant sur la page : plus de barre du tout.

   On ne garde de nos règles que la typographie. Les COULEURS restent celles
   du thème : c'est ce qui permet à la bascule clair/sombre du pied de page
   de faire quelque chose de cohérent ici. En les forçant à « #111 », le titre
   « Imay » passait en blanc sur blanc dès qu'on choisissait le thème sombre,
   puisque le framework le peint, lui, avec --text-primary. */
#navbar-container .container-fluid { padding-inline: clamp(20px, 3.5vw, 56px); }
#navbar-container #logo { width: 22px; height: 22px; }
#navbar-container .main-title {
    font-family: "Switzer", system-ui, sans-serif;
    font-size: 17px; font-weight: 700; letter-spacing: -0.02em;
}
#navbar-container .nav-link {
    font-family: "Switzer", system-ui, sans-serif;
    font-size: 15px; font-weight: 500; letter-spacing: 0;
    padding: 6px 0; margin-left: 22px;
    color: rgb(var(--text-primary));
    transition: color .15s;
}
#navbar-container .nav-link:hover { color: var(--of-accent); }

/* ─── Le pied ──────────────────────────────────────────────────────────────
   Aplat d'encre, menu posé grand. Le framework y pose #111827 sur plusieurs
   éléments : posé sur notre aplat noir ça donnait 1,2:1, du texte invisible.
   Tout ce qui est dedans prend l'encre claire, sans exception. */
body#page-accueil .footer, body#page-services .footer, body#page-methode .footer,
body#page-realisations .footer, body#page-entreprise .footer, body#page-contact .footer,
body#page-vous_etes .footer,
body#page-accueil .footer *, body#page-services .footer *, body#page-methode .footer *,
body#page-realisations .footer *, body#page-entreprise .footer *, body#page-contact .footer *,
body#page-vous_etes .footer * {
    color: #f4f4f4;
}
body#page-accueil .footer, body#page-services .footer, body#page-methode .footer,
body#page-realisations .footer, body#page-entreprise .footer, body#page-contact .footer,
body#page-vous_etes .footer {
    background: #111;
    font-family: "Switzer", system-ui, sans-serif;
    backdrop-filter: none; -webkit-backdrop-filter: none;  /* taste-skill-ignore : on RETIRE celle du framework */
    border: 0; box-shadow: none;  /* taste-skill-ignore : on RETIRE celle du framework */
}
body#page-accueil .footer-title, body#page-services .footer-title, body#page-methode .footer-title,
body#page-realisations .footer-title, body#page-entreprise .footer-title, body#page-contact .footer-title,
body#page-vous_etes .footer-title {
    /* Le framework les met en petites capitales espacées. C'est le tic
       qu'on reconnaît d'un kilomètre ; on le défait. */
    font-size: 14px; font-weight: 600; opacity: .55;
    text-transform: none; letter-spacing: 0;
}
body#page-accueil .footer-link, body#page-services .footer-link, body#page-methode .footer-link,
body#page-realisations .footer-link, body#page-entreprise .footer-link, body#page-contact .footer-link,
body#page-vous_etes .footer-link {
    font-size: 16px; font-weight: 500; display: inline-block;
    transition: transform .2s cubic-bezier(.16,1,.3,1);
}
body#page-accueil .footer-link:hover, body#page-services .footer-link:hover, body#page-methode .footer-link:hover,
body#page-realisations .footer-link:hover, body#page-entreprise .footer-link:hover, body#page-contact .footer-link:hover,
body#page-vous_etes .footer-link:hover {
    transform: translateX(10px);
}
body#page-accueil .footer-description, body#page-services .footer-description,
body#page-methode .footer-description, body#page-realisations .footer-description,
body#page-entreprise .footer-description, body#page-contact .footer-description,
body#page-vous_etes .footer-description {
    font-size: 16px; opacity: .8; max-width: 62ch;
}
body#page-accueil .footer-copyright, body#page-services .footer-copyright,
body#page-methode .footer-copyright, body#page-realisations .footer-copyright,
body#page-entreprise .footer-copyright, body#page-contact .footer-copyright,
body#page-vous_etes .footer-copyright {
    font-size: 14px; opacity: .7;
}
body#page-accueil .row.footer-content, body#page-services .row.footer-content,
body#page-methode .row.footer-content, body#page-realisations .row.footer-content,
body#page-entreprise .row.footer-content, body#page-contact .row.footer-content,
body#page-vous_etes .row.footer-content,
body#page-accueil .footer-bottom, body#page-services .footer-bottom,
body#page-methode .footer-bottom, body#page-realisations .footer-bottom,
body#page-entreprise .footer-bottom, body#page-contact .footer-bottom,
body#page-vous_etes .footer-bottom {
    border: 0; box-shadow: none;  /* taste-skill-ignore : on RETIRE celle du framework */
}
body#page-accueil .tabs-footer-theme, body#page-services .tabs-footer-theme,
body#page-methode .tabs-footer-theme, body#page-realisations .tabs-footer-theme,
body#page-entreprise .tabs-footer-theme, body#page-contact .tabs-footer-theme,
body#page-vous_etes .tabs-footer-theme,
body#page-accueil .glider-footer-theme, body#page-services .glider-footer-theme,
body#page-methode .glider-footer-theme, body#page-realisations .glider-footer-theme,
body#page-entreprise .glider-footer-theme, body#page-contact .glider-footer-theme,
body#page-vous_etes .glider-footer-theme {
    box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;  /* taste-skill-ignore : on RETIRE celle du framework */
}

/* ─── La bascule clair/sombre, dans le pied ────────────────────────────────
   Le framework la peint avec les jetons du thème : sur fond clair, une
   pastille presque blanche (rgba(243,244,246,.6)), un curseur bleu pâle et
   des icônes encre. Posée sur notre pied noir, ça faisait une tache claire
   venue d'une autre maquette, et l'icône active devenait illisible.

   Elle reprend donc les couleurs du pied : creux sombre, icônes en encre
   claire, curseur blanc et icône active en noir. Même dessin, même geste,
   mais dans la palette de la page.

   Au passage le clavier la retrouve : le framework cache les boutons radio
   par « display: none », ce qui les sort de l'ordre de tabulation et rend la
   bascule inutilisable sans souris. Ils passent en masquage visuel, et c'est
   l'étiquette qui porte l'anneau de focus. */
body#page-accueil .tabs-footer-theme,
body#page-services .tabs-footer-theme,
body#page-methode .tabs-footer-theme,
body#page-realisations .tabs-footer-theme,
body#page-entreprise .tabs-footer-theme,
body#page-contact .tabs-footer-theme,
body#page-vous_etes .tabs-footer-theme {
    background: rgb(255 255 255 / .07);
    border-color: rgb(255 255 255 / .16);
}
body#page-accueil .tab-footer-theme,
body#page-services .tab-footer-theme,
body#page-methode .tab-footer-theme,
body#page-realisations .tab-footer-theme,
body#page-entreprise .tab-footer-theme,
body#page-contact .tab-footer-theme,
body#page-vous_etes .tab-footer-theme {
    color: rgb(244 244 244 / .62);
}
body#page-accueil .tab-footer-theme:hover,
body#page-services .tab-footer-theme:hover,
body#page-methode .tab-footer-theme:hover,
body#page-realisations .tab-footer-theme:hover,
body#page-entreprise .tab-footer-theme:hover,
body#page-contact .tab-footer-theme:hover,
body#page-vous_etes .tab-footer-theme:hover {
    color: #ffffff;
}
body#page-accueil .glider-footer-theme,
body#page-services .glider-footer-theme,
body#page-methode .glider-footer-theme,
body#page-realisations .glider-footer-theme,
body#page-entreprise .glider-footer-theme,
body#page-contact .glider-footer-theme,
body#page-vous_etes .glider-footer-theme {
    background: #f4f4f4;
    border-color: transparent;
    box-shadow: none;  /* taste-skill-ignore : on RETIRE celle du framework */
}
/* Les icônes sont des SVG en « fill: currentColor », et notre règle
   « .footer * { color } » les peint elles aussi : currentColor s'y résout sur
   leur propre couleur, pas sur celle de l'étiquette. « fill » étant hérité,
   le <path> le résout à son tour sur SA couleur : il faut viser le SVG ET ce
   qu'il contient, sans quoi le soleil reste blanc sur le curseur blanc. */
body#page-accueil .tab-footer-theme svg,
body#page-accueil .tab-footer-theme svg *,
body#page-services .tab-footer-theme svg,
body#page-services .tab-footer-theme svg *,
body#page-methode .tab-footer-theme svg,
body#page-methode .tab-footer-theme svg *,
body#page-realisations .tab-footer-theme svg,
body#page-realisations .tab-footer-theme svg *,
body#page-entreprise .tab-footer-theme svg,
body#page-entreprise .tab-footer-theme svg *,
body#page-contact .tab-footer-theme svg,
body#page-contact .tab-footer-theme svg *,
body#page-vous_etes .tab-footer-theme svg,
body#page-vous_etes .tab-footer-theme svg * {
    color: inherit;
}
/* L'icône posée sur le curseur clair repasse en encre. */
body#page-accueil #radio-footer-theme-1:checked ~ .tab-footer-theme:nth-of-type(1),
body#page-accueil #radio-footer-theme-2:checked ~ .tab-footer-theme:nth-of-type(2),
body#page-services #radio-footer-theme-1:checked ~ .tab-footer-theme:nth-of-type(1),
body#page-services #radio-footer-theme-2:checked ~ .tab-footer-theme:nth-of-type(2),
body#page-methode #radio-footer-theme-1:checked ~ .tab-footer-theme:nth-of-type(1),
body#page-methode #radio-footer-theme-2:checked ~ .tab-footer-theme:nth-of-type(2),
body#page-realisations #radio-footer-theme-1:checked ~ .tab-footer-theme:nth-of-type(1),
body#page-realisations #radio-footer-theme-2:checked ~ .tab-footer-theme:nth-of-type(2),
body#page-entreprise #radio-footer-theme-1:checked ~ .tab-footer-theme:nth-of-type(1),
body#page-entreprise #radio-footer-theme-2:checked ~ .tab-footer-theme:nth-of-type(2),
body#page-contact #radio-footer-theme-1:checked ~ .tab-footer-theme:nth-of-type(1),
body#page-contact #radio-footer-theme-2:checked ~ .tab-footer-theme:nth-of-type(2),
body#page-vous_etes #radio-footer-theme-1:checked ~ .tab-footer-theme:nth-of-type(1),
body#page-vous_etes #radio-footer-theme-2:checked ~ .tab-footer-theme:nth-of-type(2) {
    color: #111111;
}
/* Le bouton radio redevient atteignable au clavier, sans réapparaître. */
body#page-accueil .tabs-footer-theme input.radio-footer,
body#page-services .tabs-footer-theme input.radio-footer,
body#page-methode .tabs-footer-theme input.radio-footer,
body#page-realisations .tabs-footer-theme input.radio-footer,
body#page-entreprise .tabs-footer-theme input.radio-footer,
body#page-contact .tabs-footer-theme input.radio-footer,
body#page-vous_etes .tabs-footer-theme input.radio-footer {
    display: block;
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
body#page-accueil .tabs-footer-theme input.radio-footer:focus-visible + .tab-footer-theme,
body#page-services .tabs-footer-theme input.radio-footer:focus-visible + .tab-footer-theme,
body#page-methode .tabs-footer-theme input.radio-footer:focus-visible + .tab-footer-theme,
body#page-realisations .tabs-footer-theme input.radio-footer:focus-visible + .tab-footer-theme,
body#page-entreprise .tabs-footer-theme input.radio-footer:focus-visible + .tab-footer-theme,
body#page-contact .tabs-footer-theme input.radio-footer:focus-visible + .tab-footer-theme,
body#page-vous_etes .tabs-footer-theme input.radio-footer:focus-visible + .tab-footer-theme {
    outline: 2px solid #f4f4f4;
    outline-offset: 2px;
}
/* Rien de ce qui se lit ne descend sous 13 px : le menu du bas du framework
   et l'état du panneau de discussion étaient à 12 et 11,5 px. */
body#page-accueil #bottomMenu .label, body#page-services #bottomMenu .label,
body#page-methode #bottomMenu .label, body#page-realisations #bottomMenu .label,
body#page-entreprise #bottomMenu .label, body#page-contact #bottomMenu .label,
body#page-vous_etes #bottomMenu .label,
body#page-accueil .invidia-panel-status, body#page-services .invidia-panel-status,
body#page-methode .invidia-panel-status, body#page-realisations .invidia-panel-status,
body#page-entreprise .invidia-panel-status, body#page-contact .invidia-panel-status,
body#page-vous_etes .invidia-panel-status {
    font-size: 13px;
}

/* ─── Le menu du bas ───────────────────────────────────────────────────────
   Il s'escamote à la descente et revient à la montée (voir
   _partiels/menu_bas.php) : fixé en permanence, il recouvrait entièrement un
   titre à certaines hauteurs de défilement. La classe n'est posée que par le
   script : sans lui, le menu garde son comportement d'origine. */
.of-menu-bas { transition: transform .28s cubic-bezier(.4, 0, .2, 1); }
.of-menu-bas.est-parti { transform: translateY(calc(100% + 24px)); }
@media (prefers-reduced-motion: reduce) { .of-menu-bas { transition: none; } }


/* ═══════════════════════════════════════════════════════════════════════════
   LES PAGES INTÉRIEURES
   ═══════════════════════════════════════════════════════════════════════════
   Elles ouvrent toutes de la même façon : un titre, une phrase, une action.
   Cinq copies d'un même bloc finissent toujours par diverger. */
.of-tete {
    padding: clamp(44px, 7vh, 88px) var(--of-marge) clamp(36px, 5vh, 60px);
}
/* Le titre monte à 5,2vw : à 4,2vw l'inspecteur ne trouvait aucune dominante
   dans le premier écran, et il avait raison — la page démarrait à plat. */
.of-tete__titre {
    font-size: clamp(34px, 5.2vw, 76px);
    font-weight: 600; line-height: 1.03; letter-spacing: -0.03em; max-width: 18ch;
}
.of-tete__sous { margin-top: clamp(18px, 2.6vh, 28px); max-width: 54ch; font-size: 18px; color: #333; }
.of-tete__actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: clamp(22px, 3vh, 36px); }

/* ─── Services : quatre domaines détaillés ─────────────────────────────────*/
.of-dom {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.15fr) minmax(220px, 0.95fr);
    gap: clamp(18px, 2.4vw, 44px);
    align-items: start;
    padding: clamp(24px, 3.4vh, 38px) var(--of-marge);
    border-top: 1px solid var(--of-trait);  /* taste-skill-ignore : filet de structure, pas d'ornement */
}
.of-dom:last-of-type { border-bottom: 1px solid var(--of-trait); /* taste-skill-ignore : filet de structure */ }
.of-dom__nom { font-size: clamp(20px, 2.1vw, 30px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; }
.of-dom__ligne { margin-top: 8px; font-size: 16px; color: #444; max-width: 32ch; }
.of-dom__liste li { padding: 7px 0; font-size: 16px; }
.of-dom__liste li:first-child { font-weight: 600; padding-top: 0; }
.of-dom__vue { width: 100%; height: 132px; object-fit: cover; object-position: top center; background: var(--of-gris); }
.of-dom__vue + .of-dom__nompreuve { margin-top: 10px; }
.of-dom__nompreuve { font-size: 16px; font-weight: 600; }
.of-dom__souspreuve { font-size: 14px; color: var(--of-attenue); }

/* ─── Méthode : les cinq temps ─────────────────────────────────────────────*/
.of-temps { padding: 0 var(--of-marge) clamp(36px, 5vh, 60px); }
.of-barreproportions { display: flex; gap: 6px; height: 22vh; min-height: 150px; margin-bottom: 10px; }
.of-segment { flex: var(--of-poids) 1 0; min-width: 11%; padding: 16px; background: var(--of-gris); }
.of-segment--accent { background: var(--of-accent); color: #fff; }
.of-segment--encre  { background: var(--of-encre); color: #fff; }
.of-segment__duree { font-size: clamp(16px, 1.6vw, 22px); font-weight: 600; letter-spacing: -0.02em; display: block; }
.of-barreproportions__note { font-size: 14px; color: var(--of-attenue); max-width: 64ch; margin-bottom: clamp(26px, 4vh, 44px); }

.of-etape {
    display: grid;
    grid-template-columns: 150px minmax(200px, 1fr) 2fr minmax(180px, 0.8fr);
    gap: clamp(16px, 2vw, 36px);
    align-items: start;
    padding: clamp(18px, 2.6vh, 30px) 0;
    border-top: 1px solid var(--of-trait);  /* taste-skill-ignore : filet de structure, pas d'ornement */
}
.of-etape:last-child { border-bottom: 1px solid var(--of-trait); /* taste-skill-ignore : filet de structure */ }
.of-etape__duree { font-size: 16px; font-weight: 600; color: var(--of-attenue); }
.of-etape__titre { font-size: clamp(19px, 1.9vw, 26px); font-weight: 600; letter-spacing: -0.025em; }
.of-etape__texte { font-size: 16px; color: #444; max-width: 46ch; }
.of-etape__mots { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--of-attenue); }

/* ─── Réalisations : les sept fiches ───────────────────────────────────────*/
.of-fiche {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.85fr);
    gap: clamp(20px, 3vw, 48px);
    align-items: start;
    padding: clamp(28px, 4vh, 48px) var(--of-marge);
    border-top: 1px solid var(--of-trait);  /* taste-skill-ignore : filet de structure, pas d'ornement */
}
.of-fiche:last-of-type { border-bottom: 1px solid var(--of-trait); /* taste-skill-ignore : filet de structure */ }
.of-fiche__vue { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; background: var(--of-gris); }
.of-fiche__sansvue { display: block; width: 100%; aspect-ratio: 16 / 10; background: var(--of-gris); }
/* Sous le titre et non au-dessus : un mot seul posé au-dessus d'un titre se
   lit comme un intitulé, et la direction n'en veut aucun. */
.of-fiche__cat { margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--of-attenue); }
.of-fiche__titre { font-size: clamp(21px, 2.2vw, 32px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.08; }
.of-fiche__lien { display: inline-block; margin-top: 12px; font-size: 16px; font-weight: 600; color: var(--of-accent); border-bottom: 1px solid currentColor; padding-bottom: 2px; /* taste-skill-ignore : soulignement de lien, pas un filet */ }
.of-fiche__prive { display: inline-block; margin-top: 12px; font-size: 15px; color: var(--of-attenue); }
.of-fiche__dl { margin-top: 18px; display: grid; gap: 14px; }
.of-fiche__dl dt { font-size: 14px; font-weight: 600; color: var(--of-attenue); }
.of-fiche__dl dd { margin: 2px 0 0; font-size: 16px; color: #333; }

/* ─── Entreprise ───────────────────────────────────────────────────────────*/
.of-faits-grille {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
    /* Du souffle en haut : collé au premier écran, le bouton se lisait comme
       un intitulé posé au-dessus du premier chiffre. */
    padding: clamp(28px, 4vh, 52px) var(--of-marge) 0;
}
.of-faitcase { background: var(--of-gris); padding: 20px 18px; }
.of-faitcase__val { font-size: clamp(24px, 2.6vw, 38px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.of-faitcase__lib { margin-top: 8px; font-size: 14px; color: var(--of-attenue); }

.of-savoir { display: grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: 0 clamp(32px, 5vw, 80px); }
.of-savoir li { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; font-size: 16px; border-bottom: 1px solid var(--of-trait); /* taste-skill-ignore : filet de structure */ }
.of-savoir li span:first-child { font-weight: 600; }
.of-savoir li span:last-child { color: var(--of-attenue); text-align: right; }

/* ─── Contact : le formulaire ──────────────────────────────────────────────
   Le seul endroit du site où les traits sont permis : un champ sans bord ne
   se voit pas, et un formulaire qu'on ne voit pas ne se remplit pas. */
.of-boite { background: var(--of-gris); padding: clamp(22px, 3vw, 44px); }
.of-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px clamp(18px, 2.4vw, 34px); }
.of-champ--large { grid-column: 1 / -1; }
.of-champ label { display: block; margin-bottom: 7px; font-size: 16px; font-weight: 600; }
.of-champ label span[aria-hidden] { color: var(--of-accent); }
.of-champ__note { font-weight: 400; color: var(--of-attenue); }
.of-champ input, .of-champ select, .of-champ textarea {
    width: 100%; min-height: 52px; padding: 13px 15px;
    border: 2px solid var(--of-encre); border-radius: 0; background: #fff;  /* taste-skill-ignore : filet de structure, pas d'ornement */
    font-family: inherit; font-size: 16px; line-height: 1.4; color: var(--of-encre);
}
.of-champ textarea { min-height: 170px; resize: vertical; }
.of-champ input::placeholder, .of-champ textarea::placeholder { color: var(--of-attenue); }
.of-champ input:focus-visible, .of-champ select:focus-visible, .of-champ textarea:focus-visible {
    outline: 3px solid var(--of-accent); outline-offset: 2px;
}
.of-form.was-validated input:invalid, .of-form.was-validated select:invalid,
.of-form.was-validated textarea:invalid { border-color: #a4160a; background: #fff4f2; }
.of-champ__compteur { margin-top: 7px; font-size: 14px; color: var(--of-attenue); }
.of-champ__compteur.est-bon { color: #16621f; font-weight: 600; }
.of-envoi { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.of-envoi__note { font-size: 14px; color: var(--of-attenue); max-width: 36ch; }
.of-piege { position: absolute; left: -9999px; width: 1px; height: 1px; /* taste-skill-ignore */ overflow: hidden; }
.of-merci { background: var(--of-gris); padding: 28px; border-left: 4px solid var(--of-accent); }
.of-merci__titre { font-size: clamp(22px, 2.4vw, 32px); font-weight: 600; letter-spacing: -0.025em; margin-bottom: 8px; }
.of-erreurs { background: #a4160a; color: #fff; padding: 16px 18px; margin-bottom: 18px; font-weight: 500; }

@media (max-width: 1000px) {
    .of-dom { grid-template-columns: 1fr 1fr; }
    .of-dom__preuve { grid-column: 1 / 3; }
    .of-fiche { grid-template-columns: 1fr; }
    .of-etape { grid-template-columns: 130px 1fr; row-gap: 6px; }
    .of-etape__texte, .of-etape__mots { grid-column: 2; }
    .of-faits-grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
    .of-dom { grid-template-columns: 1fr; }
    .of-dom__preuve { grid-column: 1; }
    .of-barreproportions { display: block; height: auto; min-height: 0; }
    .of-segment { min-height: 64px; margin-bottom: 6px; display: flex; align-items: center; }
    .of-etape { grid-template-columns: 1fr; }
    .of-etape__texte, .of-etape__mots { grid-column: 1; }
    .of-savoir { grid-template-columns: 1fr; }
    .of-form { grid-template-columns: 1fr; }
    .of-envoi .of-bouton { width: 100%; justify-content: center; }
    .of-tete__actions .of-bouton { width: 100%; justify-content: center; }
}

/* ─── Ce qui sort, ce qui tourne ───────────────────────────────────────────*/
.of-sortie {
    display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr);
    gap: clamp(20px, 3vw, 48px); align-items: start;
}
.of-sortie__video { width: 100%; height: auto; display: block; background: #fff; }
.of-sortie__mot p { font-size: 16px; color: #444; }
.of-sortie__mot .of-lien { margin-top: 14px; }

.of-tourne-planche { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.of-tourne-planche img {
    width: 100%; height: auto; aspect-ratio: 16 / 10;
    object-fit: cover; object-position: top center; background: #fff;
}
.of-tourne-planche span { display: block; margin-top: 9px; font-size: 16px; font-weight: 600; }
.of-tourne-planche a:hover span { color: var(--of-accent); }

@media (max-width: 900px) {
    .of-sortie { grid-template-columns: 1fr; }
    .of-tourne-planche { grid-template-columns: repeat(2, 1fr); }
}

/* ─── La planche des sept, en pied de page intérieure ──────────────────────
   Employée par Services, Méthode et Contact : elle vit donc ici et non dans
   la feuille d'une seule page. */
.of-metier-court { padding: clamp(36px, 5vh, 64px) var(--of-marge); background: var(--of-gris); }
.of-metier-court .of-planche { margin-top: 0; }
.of-metier-court .of-planche img { opacity: 1; filter: none; }

/* ─── L'état vide ──────────────────────────────────────────────────────────
   Quand le champ est vide, ou qu'aucun modèle ne correspond, on ne montre pas
   un cadre gris et un regret : on montre un site qui se dessine tout seul, en
   boucle. C'est la seule chose honnête à mettre là — et c'est exactement ce
   qu'on propose de faire.

   Tout est en CSS : aucune image, aucune vidéo, rien à télécharger. */
.of-metier__esquisse { display: none; }
.of-metier__corps.est-vide .of-metier__cadre { display: none; }
.of-metier__corps.est-vide .of-metier__esquisse {
    display: block;
    background: #fff;
    aspect-ratio: 16 / 10;
}
.of-metier__esquisse svg { display: block; width: 100%; height: 100%; }

.es-trait {
    fill: none;
    stroke: var(--of-encre);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .22;
    stroke-dasharray: var(--es-long, 1600);
    stroke-dashoffset: var(--es-long, 1600);
    animation: es-trace 7s cubic-bezier(.5, 0, .2, 1) var(--es-pas, 0s) infinite both;
}
.es-cadre     { --es-long: 1500; }
.es-barre     { --es-long: 460; --es-pas: .55s; }
.es-menu      { --es-long: 80; }
.es-cadre-img { --es-long: 600; }
.es-diag      { --es-long: 220; }

.es-pastille {
    fill: var(--of-encre);
    opacity: 0;
    animation: es-parait 7s ease-out var(--es-pas, 0s) infinite both;
}
.es-soleil { fill: var(--of-accent); opacity: 0; }

/* Les blocs poussent depuis leur bord gauche, comme une ligne qui s'écrit. */
.es-bloc, .es-filet, .es-bouton {
    fill: var(--of-encre);
    transform: scaleX(0);
    transform-origin: left center;
    animation: es-pousse 7s cubic-bezier(.22, 1, .36, 1) var(--es-pas, 0s) infinite both,
               es-pousse-vue 7s linear var(--es-pas, 0s) infinite both;
}
.es-bloc  { fill-opacity: .86; }
.es-filet { fill-opacity: .26; }
.es-bouton { fill: var(--of-accent); }

/* La main arrive sur le bouton et appuie. */
.es-doigt {
    fill: var(--of-encre);
    opacity: 0;
    transform-origin: 96px 230px;
    animation: es-doigt 7s cubic-bezier(.4, 0, .2, 1) 2.3s infinite both;
}

@keyframes es-trace {
    0%          { stroke-dashoffset: var(--es-long, 1600); opacity: 0; }
    4%          { opacity: .22; }
    26%, 84%    { stroke-dashoffset: 0; opacity: .22; }
    95%, 100%   { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes es-parait {
    0%          { opacity: 0; }
    6%, 84%     { opacity: .55; }
    95%, 100%   { opacity: 0; }
}
/* L'opacité de repos est portée par la classe, pas par l'image-clé : les
   barres de titre, les filets de texte et le bouton n'ont pas la même. */
@keyframes es-pousse {
    0%        { transform: scaleX(0); }
    14%, 100% { transform: scaleX(1); }
}
@keyframes es-pousse-vue {
    0%        { opacity: 0; }
    3%, 84%   { opacity: 1; }
    95%, 100% { opacity: 0; }
}
@keyframes es-doigt {
    0%          { opacity: 0; transform: translate(42px, 34px) scale(1); }
    8%          { opacity: .85; }
    26%         { opacity: .85; transform: translate(0, 0) scale(1); }
    32%         { transform: translate(0, 0) scale(.62); }
    38%         { transform: translate(0, 0) scale(1); }
    62%, 68%    { opacity: .85; transform: translate(0, 0) scale(1); }
    78%, 100%   { opacity: 0; transform: translate(0, 0) scale(1); }
}

/* Le mot qui accompagne l'esquisse : promesse, pas excuse. */
.of-metier__dit.est-vide .of-metier__titre { color: var(--of-encre); }

@media (prefers-reduced-motion: reduce) {
    /* Pas d'animation : le dessin est simplement là, fini. */
    .es-trait, .es-pastille, .es-bloc, .es-filet, .es-bouton, .es-doigt { animation: none; }
    .es-trait  { stroke-dashoffset: 0; opacity: .22; }
    .es-pastille { opacity: .55; }
    .es-bloc, .es-filet, .es-bouton { transform: none; opacity: 1; }
    .es-doigt  { opacity: .85; }
}