/* =============================================================================
   Aurin Solutions — vitrine
   Chargée après style.css, qui porte le design system commun.
   Source : docs/design-models/home.html
   ========================================================================== */

/* -----------------------------------------------------------------------------
   0. Haut de page
   Un voile d'accent sous la première section, repris de la maquette Réalisations.
   Accroché au premier enfant de <main> pour que chaque page en bénéficie sans
   porter de classe : aucune n'y pose de fond.

   background-image plutôt que la propriété raccourcie background — une page qui
   aurait besoin de sa propre couleur de fond la garde.
   -------------------------------------------------------------------------- */

main > section:first-child {
    background-image: linear-gradient(180deg, var(--c-accent-soft), transparent 62%);
}

/* -----------------------------------------------------------------------------
   1. En-tête
   -------------------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-line);
}

.site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3) var(--sp-6);
    padding-block: var(--sp-3);
}

.site-header__logo {
    color: var(--c-text);
    text-decoration: none;
}

.site-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-3);
}

.site-header__cta {
    min-height: 42px;
    padding-inline: var(--sp-4);
}

.site-nav {
    border-top: 1px solid var(--c-line);
}

.site-nav__inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-6);
    padding-block: var(--sp-3);
}

.site-nav__link {
    color: var(--c-text-2);
    font-size: var(--fs-base);
    text-decoration: none;
    transition: color var(--t-fast);
}

.site-nav__link:hover {
    color: var(--c-text);
}

.site-nav__link.is-current {
    color: var(--c-text);
    text-decoration: underline;
    text-decoration-color: var(--c-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

/* -----------------------------------------------------------------------------
   2. Hero
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(48px, 7vw, 96px);
    border-bottom: 1px solid var(--c-line);
}

/* Grille de papier millimétré, discrète — dessinée en CSS, donc sans requête. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, var(--c-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--c-line) 1px, transparent 1px);
    background-size: 72px 72px;
    opacity: .5;
    -webkit-mask-image: radial-gradient(120% 90% at 50% 0, #000 40%, transparent 100%);
    mask-image: radial-gradient(120% 90% at 50% 0, #000 40%, transparent 100%);
    pointer-events: none;
}

.hero__inner {
    position: relative;
    display: grid;
    align-items: center;
    gap: clamp(32px, 5vw, 64px);
    grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}

.hero__eyebrow {
    margin-bottom: var(--sp-4);
    color: var(--c-accent);
    font-family: var(--ff-mono);
    font-size: var(--fs-mono-xs);
    font-weight: 500;
    letter-spacing: .06em;
}

.hero__title {
    max-width: 12ch;
    margin-bottom: var(--sp-6);
    font-size: var(--fs-4xl);
    line-height: 1.04;
}

.hero__title-accent {
    display: block;
    color: var(--c-accent);
}

.hero__lead {
    max-width: 48ch;
    margin-bottom: var(--sp-8);
    color: var(--c-text-2);
    font-size: var(--fs-lg);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
}

.hero__note {
    color: var(--c-text-3);
    font-size: var(--fs-mono-xs);
}

/* -----------------------------------------------------------------------------
   3. Illustration du hero — « avant / après »
   -------------------------------------------------------------------------- */

.hero__figure {
    position: relative;
    min-height: 340px;
}

/* Avant : le tableur fatigué, incliné et repoussé au second plan. */
.quote-sheet {
    position: absolute;
    top: 0;
    left: 4%;
    width: 78%;
    padding: var(--sp-3);
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    background: var(--c-bg-alt);
    transform: rotate(-3deg);
    opacity: .75;
}

.quote-sheet__name {
    margin-bottom: var(--sp-3);
    color: var(--c-text-3);
    font-size: var(--fs-mono-xs);
}

.quote-sheet__row {
    display: block;
    height: 8px;
    margin-bottom: var(--sp-2);
    border-radius: 2px;
    background: var(--c-line-strong);
    opacity: .55;
}

.quote-sheet__row:nth-child(3) { width: 92%; }
.quote-sheet__row:nth-child(4) { width: 78%; }
.quote-sheet__row:nth-child(5) { width: 86%; }

/* Après : le devis généré, devant et net. */
.quote-card {
    position: relative;
    z-index: 1;
    margin: 56px 0 0 auto;
    width: min(400px, 92%);
    padding: var(--sp-4) var(--sp-6) var(--sp-3);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    background: var(--c-surface);
    box-shadow: var(--sh-3);
}

.quote-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding-bottom: var(--sp-3);
}

.quote-card__ref {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0;
    font-size: var(--fs-mono-xs);
}

.quote-card__ref::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: var(--r-pill);
    background: var(--c-accent);
}

.quote-card__lines {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0;
    margin: 0;
}

.quote-card__lines dt,
.quote-card__lines dd {
    margin: 0;
    padding: var(--sp-3) 0;
    border-top: 1px dashed var(--c-line);
    font-size: var(--fs-base);
}

.quote-card__lines dd {
    text-align: right;
}

.quote-card__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    margin: 0;
    padding: var(--sp-4) 0 var(--sp-3);
    border-top: 1px solid var(--c-line-strong);
}

.quote-card__total .mono {
    color: var(--c-text-3);
    font-size: var(--fs-mono-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.quote-card__total strong {
    font-size: var(--fs-xl);
}

.quote-card__footnote {
    margin: 0;
    padding: var(--sp-2);
    border-radius: var(--r-sm);
    background: var(--c-bg-alt);
    color: var(--c-text-3);
    /* Une seule ligne dans les deux langues : l'anglais est le plus long des deux. */
    font-size: calc(var(--fs-mono-xs) * .9);
    text-align: center;
}

.hero__figure-caption {
    position: absolute;
    left: 0;
    bottom: 8px;
    max-width: 42%;
    margin: 0;
    color: var(--c-text-3);
    font-size: var(--fs-mono-xs);
}

/* -----------------------------------------------------------------------------
   4. Bandeau des avantages
   -------------------------------------------------------------------------- */

.advantages {
    border-bottom: 1px solid var(--c-line);
}

.advantages__grid {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    padding-block: var(--sp-8);
}

.advantage {
    padding: var(--sp-2) var(--sp-6);
    border-left: 1px solid var(--c-line);
}

.advantage:first-child {
    padding-left: 0;
    border-left: 0;
}

.advantage__index {
    margin-bottom: var(--sp-2);
    color: var(--c-accent);
    font-size: var(--fs-mono-xs);
    font-weight: 500;
}

.advantage__title {
    margin-bottom: var(--sp-1);
    font-weight: 500;
}

.advantage__text {
    margin: 0;
    color: var(--c-text-2);
}

/* -----------------------------------------------------------------------------
   5. Mobilier de section
   -------------------------------------------------------------------------- */

/* Le libellé est suivi d'un filet qui court jusqu'au bout du conteneur. */
.section__label--rule {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}

.section__label--rule::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--c-line);
}

.section__title {
    margin-bottom: 0;
}

.section__header {
    display: grid;
    align-items: start;
    gap: var(--sp-6);
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    margin-bottom: var(--sp-12);
}

.section__header .lead {
    margin: 0;
}

/* -----------------------------------------------------------------------------
   6. Situations
   -------------------------------------------------------------------------- */

.situations {
    margin-top: var(--sp-12);
    border-top: 1px solid var(--c-line);
}

.situation {
    display: grid;
    align-items: start;
    gap: var(--sp-6);
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    padding-block: var(--sp-8);
    border-bottom: 1px solid var(--c-line);
}

.situation__quote {
    margin: 0;
    padding-left: var(--sp-4);
    border-left: 3px solid var(--c-accent);
    font-size: var(--fs-xl);
    font-weight: 500;
    line-height: 1.3;
}

.situation__answer {
    margin: 0;
    color: var(--c-text-2);
}

.situations__outro {
    margin: var(--sp-8) 0 0;
    color: var(--c-text-2);
}

/* -----------------------------------------------------------------------------
   7. Cartes de service
   -------------------------------------------------------------------------- */

.service {
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.service__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-6);
}

.service__index {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin: 0;
    color: var(--c-accent);
    font-size: var(--fs-mono-xs);
    font-weight: 500;
}

.service__index::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--c-line);
}

.service__case {
    padding: var(--sp-4) var(--sp-6) var(--sp-6);
    border-top: 1px solid var(--c-line);
    background: var(--c-bg);
}

.section--alt .service__case {
    background: var(--c-bg-alt);
}

.service__case-label {
    margin-bottom: var(--sp-2);
    color: var(--c-accent);
    font-size: var(--fs-mono-xs);
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
   8. Méthode
   -------------------------------------------------------------------------- */

.method {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--c-line);
    list-style: none;
}

.method__step {
    display: grid;
    align-items: start;
    gap: var(--sp-3) var(--sp-6);
    grid-template-columns: auto minmax(0, 1fr);
    padding-block: var(--sp-8);
    border-bottom: 1px solid var(--c-line);
}

.method__index {
    margin: 0;
    color: var(--c-accent);
    font-size: var(--fs-mono-xs);
    font-weight: 500;
    line-height: 1.8;
}

.method__title {
    margin: 0;
    font-size: var(--fs-xl);
}

.method__badge {
    grid-column: 2;
    margin: 0;
}

.method__text {
    grid-column: 2;
    margin: 0;
    color: var(--c-text-2);
}

/* L'étape qui porte la promesse reçoit un cadre à elle. */
.method__step--highlight {
    padding: var(--sp-8);
    border: 1px solid var(--c-accent);
    border-radius: var(--r-lg);
}

/* Sur grand écran, le texte passe en deuxième colonne, comme sur la maquette. */
@media (min-width: 900px) {
    .method__step {
        grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
    }

    .method__text {
        grid-column: 3;
        grid-row: 1 / span 2;
    }
}

/* -----------------------------------------------------------------------------
   9. Pied de page
   -------------------------------------------------------------------------- */

.site-footer {
    border-top: 1px solid var(--c-line);
}

/* Deux blocs poussés aux extrémités plutôt qu'une liste de colonnes : la marque et
   les pages n'ont aucune colonne à partager, et space-between garde la navigation
   sur le bord droit quelle que soit la largeur de l'accroche. */
.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(24px, 3vw, 44px);
    align-items: flex-start;
    justify-content: space-between;
    padding-top: clamp(36px, 4vw, 52px);
    padding-bottom: clamp(24px, 2.6vw, 32px);
}

.site-footer__tagline {
    max-width: 30ch;
    margin: var(--sp-3) 0 0;
    color: var(--c-text-2);
    font-size: 14px;
    line-height: 1.6;
}

.site-footer__nav {
    display: grid;
    gap: var(--sp-3);
    align-content: start;
    justify-items: end;
    text-align: right;
}

.site-footer__nav a {
    min-height: 24px;
    color: var(--c-text-2);
    font-size: 14.5px;
    text-decoration: none;
    transition: color var(--t-fast);
}

/* Vers l'encre, pas vers l'accent, comme la navigation de l'en-tête. L'accent est
   réservé à ce qui est actionnable au-delà de la navigation. */
.site-footer__nav a:hover {
    color: var(--c-text);
}

.site-footer__label {
    margin: 0;
    color: var(--c-text-3);
    font-family: var(--ff-mono);
    font-size: var(--fs-mono-xs);
    font-weight: 500;
    letter-spacing: .05em;
    line-height: 1;
    text-transform: uppercase;
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3) var(--sp-6);
    padding-top: var(--sp-4);
    padding-bottom: clamp(26px, 3vw, 34px);
    border-top: 1px solid var(--c-line);
    color: var(--c-text-3);
    font-size: var(--fs-mono-xs);
}

.site-footer__bottom p {
    margin: 0;
}

.site-footer__bottom a {
    color: var(--c-text-3);
    text-decoration: none;
    transition: color var(--t-fast);
}

.site-footer__bottom a:hover {
    color: var(--c-text);
}

/* -----------------------------------------------------------------------------
   10. Pages d'erreur
   -------------------------------------------------------------------------- */

.error__inner {
    display: grid;
    align-items: center;
    gap: clamp(32px, 5vw, 64px);
    grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
}

.error__eyebrow {
    margin-bottom: var(--sp-4);
    color: var(--c-accent);
    font-size: var(--fs-mono-xs);
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.error__title {
    max-width: 14ch;
    margin-bottom: var(--sp-6);
    font-size: var(--fs-4xl);
    line-height: 1.04;
}

.error__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin: var(--sp-8) 0 0;
}

/* Le code d'erreur, posé sur le même papier millimétré que le hero de l'accueil. */
.error__code {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(200px, 22vw, 300px);
    margin: 0;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    background: var(--c-bg-alt);
    background-image:
        linear-gradient(to right, var(--c-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--c-line) 1px, transparent 1px);
    background-size: 48px 48px;
    font-size: clamp(5rem, 12vw, 9rem);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1;
}

.error__code-accent {
    color: var(--c-accent);
}

.error__routes {
    padding-top: 0;
    border-top: 1px solid var(--c-line);
}

.routes {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    margin-top: var(--sp-6);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.route {
    padding: var(--sp-6);
    border-left: 1px solid var(--c-line);
}

.route:first-child {
    border-left: 0;
}

.route__index {
    margin-bottom: var(--sp-2);
    color: var(--c-accent);
    font-size: var(--fs-mono-xs);
    font-weight: 500;
}

.route__title {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-base);
    font-weight: 500;
    letter-spacing: normal;
}

.route__title a {
    color: var(--c-text);
    text-decoration: none;
}

.route__title a:hover {
    color: var(--c-accent);
}

.route__text {
    margin: 0;
    color: var(--c-text-2);
}

.error__report {
    margin: var(--sp-8) 0 0;
    color: var(--c-text-2);
}

/* -----------------------------------------------------------------------------
   11. Page « Qui je suis »
   -------------------------------------------------------------------------- */

.about-intro {
    border-bottom: 1px solid var(--c-line);
}

.about-intro__title {
    max-width: 22ch;
    margin-bottom: var(--sp-6);
    font-size: var(--fs-4xl);
    line-height: 1.06;
}

.about-intro__brand {
    color: var(--c-accent);
}

/* Une phrase par ligne : la coupure tombe entre elles, jamais au milieu d'une
   proposition. Chaque phrase continue de se replier seule sur écran étroit. */
.about-intro__sentence {
    display: block;
    /* Équilibre les lignes de chaque phrase, pour qu'une coupure ne tombe jamais
       au milieu d'un groupe comme « il n'y a ». Ignoré par les navigateurs qui ne
       le gèrent pas, lesquels reviennent simplement au repli ordinaire. */
    text-wrap: balance;
}

.about-path__inner {
    display: grid;
    align-items: start;
    gap: clamp(24px, 4vw, 56px);
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    margin-top: var(--sp-12);
}

/* Les trois libellés se lisent comme une invite de terminal : un bloc centré dont
   les lignes restent alignées à gauche sur un bord commun — des lignes centrées une
   à une auraient l'air d'une légende, pas d'un écran. Centré verticalement dans sa
   colonne, ce qui occupe aussi une partie de l'espace laissé à côté du texte. */
.about-path__meta {
    display: flex;
    flex-direction: column;
    align-self: center;
    gap: var(--sp-3);
    width: fit-content;
    margin: 0 auto;
    color: var(--c-text-2);
    font-family: var(--ff-mono);
    font-size: clamp(15px, 1.7vw, 22px);
    line-height: 1.4;
}

.about-path__line {
    margin: 0;
    white-space: nowrap;
}

.about-path__accent {
    color: var(--c-accent);
}

/* L'invite est à l'écran avant la moindre frappe, comme sur un vrai terminal : elle
   se tient hors du span rogné. Décorative, c'est un élément réel qu'on peut masquer
   aux technologies d'assistance plutôt qu'un contenu généré, qu'un lecteur d'écran
   énoncerait à chaque ligne. */
.about-path__prompt {
    margin-right: .6em;
    color: var(--c-text-3);
}

.about-path__text {
    display: inline-block;
}

/* --- La frappe, et le curseur qui attend au bout ------------------------------ */

@keyframes about-path-type {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}

@keyframes about-path-caret {
    50% { opacity: 0; }
}

/* clip-path plutôt qu'une largeur animée : aucun décompte de caractères n'est
   nécessaire, l'effet survit donc à une traduction de n'importe quelle longueur. */
html.js .about-path__text {
    clip-path: inset(0 100% 0 0);
}

/* Le fondu d'apparition générique brouillerait la frappe — seule la frappe s'anime. */
html.js .about-path__meta[data-reveal] {
    opacity: 1;
    transform: none;
}

html.js .about-path__meta.is-visible .about-path__text {
    animation: about-path-type var(--type-duration) steps(24, end) var(--type-delay) forwards;
}

html.js .about-path__meta.is-visible .about-path__line:nth-child(1) .about-path__text {
    --type-duration: .9s;
    --type-delay: .1s;
}

html.js .about-path__meta.is-visible .about-path__line:nth-child(2) .about-path__text {
    --type-duration: .45s;
    --type-delay: 1.05s;
}

html.js .about-path__meta.is-visible .about-path__line:nth-child(3) .about-path__text {
    --type-duration: .4s;
    --type-delay: 1.55s;
}

/* Dessiné seulement si le script tourne : un bloc immobile se lirait comme un
   défaut d'affichage plutôt que comme un curseur. */
html.js .about-path__line:last-child::after {
    content: "";
    display: inline-block;
    width: .5em;
    height: 1.05em;
    margin-left: .18em;
    background: var(--c-accent);
    vertical-align: -.16em;
}

html.js .about-path__meta.is-visible .about-path__line:last-child::after {
    animation: about-path-caret 1s steps(2, end) 2s infinite;
}

@media (prefers-reduced-motion: reduce) {
    html.js .about-path__text,
    html.js .about-path__meta.is-visible .about-path__text {
        clip-path: none;
        animation: none;
    }

    html.js .about-path__meta.is-visible .about-path__line:last-child::after {
        animation: none;
    }
}

/* Même traitement que le texte courant d'un dossier : --fs-base clampe à 15,5 px
   sous 1455 px de large, d'où une taille explicite, une interligne plus serrée et la
   couleur de texte secondaire. */
.about-path__prose p {
    color: var(--c-text);
    font-size: 16px;
    line-height: 1.72;
}

.about-path__link {
    margin: var(--sp-8) 0 0;
    padding-top: var(--sp-6);
    border-top: 1px solid var(--c-line);
}

/* Un « in » typographique plutôt que la marque LinkedIn : aucun visuel déposé dans
   le dépôt, et cela correspond à la maquette. */
.profile-link__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--r-sm);
    background: var(--c-text);
    color: var(--c-bg);
    font-family: var(--ff-mono);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
}

.about-rules__title {
    max-width: 18ch;
    margin-bottom: var(--sp-12);
}

/* --- Section 03 : engagements et fiche technique ------------------------------ */

.about-stack {
    display: grid;
    align-items: start;
    gap: clamp(32px, 5vw, 64px);
    grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
    margin-top: var(--sp-12);
}

.about-stack__lead {
    color: var(--c-text-2);
}

/* Sur l'accueil, un titre de section vit dans un en-tête à deux colonnes et ne
   porte donc pas de marge basse. Ici, il est suivi directement de texte. */
.about-stack .section__title,
.about-ai .section__title {
    margin-bottom: var(--sp-4);
}

.promises {
    margin: var(--sp-8) 0 0;
    padding: 0;
    list-style: none;
}

.promise {
    position: relative;
    margin-bottom: var(--sp-6);
    padding-left: var(--sp-6);
}

.promise::before {
    content: "";
    position: absolute;
    top: .6em;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: var(--r-pill);
    background: var(--c-accent);
}

.promise__title {
    margin: 0 0 var(--sp-1);
    font-weight: 500;
}

.promise__text {
    margin: 0;
    color: var(--c-text-2);
}

/* La fiche technique elle-même est définie une fois, au § 13. Seule sa note de fin
   est propre à cette page. */
.spec__note {
    margin: 0;
    padding: var(--sp-4) var(--sp-6);
    background: var(--c-bg-alt);
    color: var(--c-text-3);
    font-size: var(--fs-mono-xs);
}

/* --- Section 04 : l'IA --------------------------------------------------------- */

.about-ai {
    display: grid;
    align-items: start;
    gap: clamp(32px, 5vw, 64px);
    grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
    margin-top: var(--sp-12);
}

.about-ai p {
    color: var(--c-text-2);
}

.about-ai__benefits {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.benefit__label {
    margin: 0 0 var(--sp-2);
    color: var(--c-accent);
    font-size: var(--fs-mono-xs);
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.about-ai__note {
    max-width: 72ch;
    margin: var(--sp-12) 0 0;
    padding-top: var(--sp-6);
    border-top: 1px solid var(--c-line);
    color: var(--c-text-2);
}

/* La carte de fin de page est la .cta-card commune de style.css. */

/* =============================================================================
   12. Page « Réalisations »
   Valeurs reprises de docs/design-models/work.html — lues à la source Claude
   Design, non relevées sur une capture.
   ========================================================================== */

/* --- Hero ------------------------------------------------------------------ */

.work-hero {
    padding: clamp(40px, 6vw, 72px) 0 clamp(32px, 4vw, 48px);
    border-bottom: 1px solid var(--c-line);
}

.work-hero__inner {
    display: grid;
    align-items: end;
    gap: clamp(20px, 4vw, 56px);
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.work-hero__title {
    max-width: 20ch;
    margin: 0;
    font-size: clamp(2.4rem, 5.6vw, 4.1rem);
    line-height: 1.02;
    letter-spacing: -.032em;
}

/* En ligne et non en bloc : la coupure vient de la largeur, comme à la source. */
.work-hero__accent {
    color: var(--c-accent);
}

.work-hero__lead {
    max-width: 46ch;
    margin: 0;
    color: var(--c-text-2);
    font-size: clamp(17px, 1.4vw, 19px);
    line-height: 1.6;
}

/* --- Un dossier ---------------------------------------------------------------- */

.case {
    padding-block: var(--section-y);
    scroll-margin-top: 80px;
}

.case--alt {
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
    background: var(--c-bg-alt);
}

.case__eyebrow {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 0 0 clamp(18px, 2.4vw, 26px);
}

.case__number {
    color: var(--c-accent);
    font-family: var(--ff-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .06em;
}

.case__sector {
    color: var(--c-text-3);
    font-family: var(--ff-mono);
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.case__rule {
    flex: 1 1 0;
    height: 1px;
    background: var(--c-line);
}

.case__title {
    margin: 0 0 clamp(28px, 4vw, 44px);
    color: var(--c-accent);
    font-size: clamp(1.9rem, 3.6vw, 2.85rem);
    line-height: 1.06;
    letter-spacing: -.028em;
    text-align: center;
}

/* Flex plutôt qu'une grille à point de rupture : les valeurs de base laissent la
   colonne latérale passer sous le texte d'elle-même, à la largeur où cela devient
   nécessaire. */
.case__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: clamp(20px, 3.4vw, 56px);
}

.case__body {
    display: flex;
    flex: 1 1 440px;
    flex-direction: column;
    min-width: 0;
    gap: clamp(24px, 3vw, 38px);
}

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

.case__label {
    margin: 0;
    color: var(--c-text-3);
    font-family: var(--ff-mono);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.case__note {
    color: var(--c-text-3);
    font-family: var(--ff-mono);
    font-size: 11px;
    line-height: 1;
}

/* Texte pleine force et non ton secondaire : c'est le corps du dossier. */
.case__prose {
    margin: 0;
    color: var(--c-text);
    font-size: 16px;
    line-height: 1.72;
}

.delivered {
    display: grid;
    gap: 8px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.delivered__item {
    display: flex;
    align-items: baseline;
    gap: 12px;
    color: var(--c-text-2);
    font-size: 15px;
    line-height: 1.6;
}

.delivered__arrow {
    color: var(--c-accent);
    font-family: var(--ff-mono);
    font-size: 12px;
    line-height: 1.5;
}

/* --- Captures ------------------------------------------------------------------ */

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

.case__eyebrow--shots {
    margin: 0;
}

.shot {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}

.shot__frame {
    overflow: hidden;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    background: var(--c-surface);
    box-shadow: var(--sh-2);
}

.shot__frame--half {
    box-shadow: var(--sh-1);
}

.shot__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 9px 12px;
    border-bottom: 1px solid var(--c-line);
    background: var(--c-bg-alt);
}

.shot__frame--half .shot__bar {
    padding: 8px 11px;
}

/* Sur le dossier à fond alterné, la barre prend le fond de page à la place, pour que
   le cadre continue de se détacher de la section derrière lui. */
.case--alt .shot__bar {
    background: var(--c-bg);
}

.shot__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--r-pill);
    background: var(--c-line-strong);
}

.shot__frame--half .shot__dot {
    width: 7px;
    height: 7px;
}

.shot__label {
    margin-left: 8px;
    color: var(--c-text-3);
    font-family: var(--ff-mono);
    font-size: 11px;
    line-height: 1;
}

.shot__frame--half .shot__label {
    font-size: 10.5px;
}

.shot__image {
    display: block;
    width: 100%;
    height: auto;
}

.shot__caption {
    color: var(--c-text-3);
    font-family: var(--ff-mono);
    font-size: 11.5px;
    line-height: 1.5;
}

.shots-pair {
    display: grid;
    gap: clamp(14px, 2vw, 20px);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* --- Fiche technique du projet -------------------------------------------------- */

/* Définition unique du composant, partagée avec la page « Qui je suis ». La plaque
   inverse la page comme le fait la pastille du logo — sombre sur page claire, claire
   sur page sombre — d'où des intitulés en accent de marque, lisibles sur les deux. */
.spec {
    overflow: hidden;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    background: var(--c-surface);
    box-shadow: var(--sh-1);
}

/* Uniquement dans un dossier : la fiche y est une colonne à part et suit le lecteur,
   parce que le texte à côté est long. */
.spec--aside {
    flex: 1 1 280px;
    min-width: 0;
    position: sticky;
    top: 96px;
}

/* Pas de border-bottom : chaque ligne porte déjà son propre border-top, et les deux
   ensemble donneraient un filet de 2 px sous l'en-tête. Écart délibéré avec la
   source, qui présente ce doublement. */
.spec__head {
    display: grid;
    gap: 6px;
    padding: clamp(18px, 2.2vw, 22px) clamp(20px, 2.4vw, 26px);
    background: var(--c-text);
}

.spec__title {
    margin: 0;
    color: var(--c-bg);
    font-size: clamp(15px, 1.7vw, 17px);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -.015em;
}

.spec__subtitle {
    margin: 0;
    color: var(--c-line-strong);
    font-family: var(--ff-mono);
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: .02em;
}

.spec__rows {
    display: grid;
    margin: 0;
}

.spec__row {
    display: grid;
    gap: 6px;
    padding: clamp(16px, 2vw, 20px) clamp(20px, 2.4vw, 26px);
    border-top: 1px solid var(--c-line);
}

.spec__key {
    color: var(--c-accent);
    font-family: var(--ff-mono);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.spec__value {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--c-text);
    font-family: var(--ff-mono);
    font-size: 15px;
    line-height: 1.55;
}

/* Drapeau dessiné en trois bandes : pas d'emoji, donc un rendu identique partout. */
.flag {
    display: inline-flex;
    flex: none;
    overflow: hidden;
    width: 18px;
    height: 12px;
    border: 1px solid var(--c-line-strong);
    border-radius: 2px;
}

.flag span {
    flex: 1;
}

.flag span:nth-child(1) { background: #002654; }
.flag span:nth-child(2) { background: #F6F5F2; }
.flag span:nth-child(3) { background: #CE1126; }

.spec__link {
    margin: 0;
    padding: 14px clamp(20px, 2.4vw, 26px);
    border-top: 1px solid var(--c-line);
    background: var(--c-bg-alt);
}

.spec__link a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: var(--c-accent);
    font-family: var(--ff-mono);
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
}

.spec__link a:hover {
    color: var(--c-accent-hover);
}

/* --- Carte de fin de page ------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   13. Page Contact
   -------------------------------------------------------------------------- */

/* Le dégradé du hero est déjà global (section 0). Seul le filet de fin est propre à
   cette page. */
.contact-hero {
    padding: clamp(40px, 6vw, 72px) 0 clamp(32px, 4vw, 48px);
    border-bottom: 1px solid var(--c-line);
}

.contact-hero__inner {
    display: grid;
    align-items: center;
    gap: clamp(20px, 4vw, 56px);
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

.contact-hero__title {
    max-width: 20ch;
    margin: 0;
    font-size: var(--fs-4xl);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -.032em;
}

.contact-hero__title-accent {
    color: var(--c-accent);
}

.contact-hero__lead {
    max-width: 46ch;
    margin: 0;
    color: var(--c-text-2);
    font-size: var(--fs-lg);
    line-height: 1.6;
}

/* Flex plutôt que grille : les deux colonnes ont des minimums très différents, et
   flex-basis l'exprime mieux qu'une liste de pistes. */
.contact-main__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: clamp(24px, 3.4vw, 56px);
}

.contact-form-wrap {
    flex: 1 1 440px;
    min-width: 0;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    padding: clamp(24px, 3vw, 32px);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    background: var(--c-surface);
    box-shadow: var(--sh-1);
}

/* Le composant .field apporte sa propre marge basse, que la gouttière flex fournit
   déjà ici. */
.contact-form .field {
    margin-bottom: 0;
}

.contact-form__head {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding-bottom: var(--sp-1);
    border-bottom: 1px solid var(--c-line);
}

.contact-form__title {
    margin: 0;
    font-size: clamp(1.15rem, 1.8vw, 1.4rem);
    font-weight: 500;
    letter-spacing: -.018em;
    line-height: 1.2;
}

.contact-form__required,
.contact-form__privacy,
.contact-form__notice {
    margin: 0;
    color: var(--c-text-3);
    font-family: var(--ff-mono);
    font-size: var(--fs-mono-xs);
    line-height: 1.5;
}

/* Mis à part du texte d'aide sous les champs, dont il ne relève pas. */
.contact-form__notice {
    padding: var(--sp-3) var(--sp-4);
    border-left: 2px solid var(--c-line-strong);
    border-radius: var(--r-sm);
    background: var(--c-bg-alt);
    color: var(--c-text-2);
}

.field__required {
    color: var(--c-accent);
}

.field__optional {
    color: var(--c-text-3);
    font-family: var(--ff-mono);
    font-size: var(--fs-mono-xs);
    font-weight: 400;
}

/* Pas d'interligne propre : le 1,5 de .field__control s'applique ici aussi, comme
   sur la maquette — un textarea qui respire autrement que les champs au-dessus casse
   le rythme de la carte. */
.contact-form__textarea {
    min-height: 120px;
    resize: vertical;
}

/* La légende n'est pas un élément flex et les options forment un enfant unique :
   l'espacement passe par la marge de la légende. */
.contact-needs {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border: 0;
}

.contact-needs__options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 44px;
    padding: 0 var(--sp-4);
    border: 1px solid var(--c-line);
    border-radius: var(--r-pill);
    background: var(--c-surface);
    color: var(--c-text-2);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
}

.chip:hover {
    border-color: var(--c-line-strong);
}

/* :has() atteint le label depuis le bouton radio qu'il contient — l'état coché vit
   sur l'input, la mise en forme appartient à l'enveloppe. */
.chip:has(.chip__input:checked) {
    border-color: var(--c-accent);
    background: var(--c-accent-soft);
    color: var(--c-text);
}

/* L'anneau appartient à toute la puce, pas au point de 14 px qu'elle contient. */
.chip:has(.chip__input:focus-visible) {
    outline: 2px solid var(--c-accent);
    outline-offset: 3px;
}

.chip__input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--c-accent);
}

.chip__input:focus-visible {
    outline: none;
}

.contact-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    align-items: center;
    margin-top: var(--sp-1);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--c-line);
}

.contact-form__privacy {
    flex: 1 1 220px;
}

.contact-form__status {
    font-family: var(--ff-mono);
    font-size: 13.5px;
}

/* --- La colonne à côté du formulaire -------------------------------------------- */

.contact-aside {
    display: flex;
    flex: 1 1 300px;
    flex-direction: column;
    gap: clamp(16px, 2vw, 20px);
    min-width: 0;
}

.contact-next {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: clamp(20px, 2.4vw, 26px);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    background: var(--c-bg-alt);
}

/* Mise en capitales ici et non dans le bundle : une valeur traduite ne doit jamais
   porter ses propres capitales — la langue suivante pourrait n'en pas vouloir. */
.contact-next__label {
    margin: 0;
    color: var(--c-text-3);
    font-family: var(--ff-mono);
    font-size: var(--fs-mono-xs);
    font-weight: 500;
    letter-spacing: .07em;
    line-height: 1;
    text-transform: uppercase;
}

.contact-next__list {
    display: grid;
    gap: var(--sp-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-next__step {
    display: flex;
    gap: var(--sp-4);
    align-items: baseline;
}

.contact-next__number {
    flex: 0 0 auto;
    color: var(--c-accent);
    font-family: var(--ff-mono);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

.contact-next__text {
    color: var(--c-text-2);
    font-size: 14.5px;
    line-height: 1.6;
}

.contact-next__strong {
    color: var(--c-text);
    font-weight: 500;
}

/* En pointillés, pour se lire comme la voie alternative plutôt que comme une
   seconde carte de même poids. */
.contact-alt {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: clamp(20px, 2.4vw, 26px);
    border: 1px dashed var(--c-line-strong);
    border-radius: var(--r-lg);
}

.contact-alt__text {
    margin: 0;
    color: var(--c-text-2);
    font-size: 14.5px;
    line-height: 1.6;
}

/* Le lien fléché lui-même est la .link-arrow commune de style.css. */

/* -----------------------------------------------------------------------------
   14. Modale de confirmation
   Rendue côté serveur après un envoi réussi, et retirée du document à la fermeture
   plutôt que masquée : rien ne s'attarde derrière la page.
   -------------------------------------------------------------------------- */

.modal {
    position: fixed;
    z-index: 60;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-6);
    background: color-mix(in srgb, var(--c-text) 55%, transparent);
}

.modal__panel {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    align-items: flex-start;
    width: min(460px, 100%);
    padding: clamp(24px, 3vw, 32px);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    background: var(--c-surface);
    box-shadow: var(--sh-2);
}

.modal__eyebrow {
    margin: 0;
    color: var(--c-accent);
    font-family: var(--ff-mono);
    font-size: var(--fs-mono-xs);
    font-weight: 500;
    letter-spacing: .07em;
    line-height: 1;
    text-transform: uppercase;
}

.modal__title {
    margin: 0;
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 500;
    letter-spacing: -.018em;
    line-height: 1.2;
}

.modal__text {
    margin: 0 0 var(--sp-2);
    color: var(--c-text-2);
    font-size: 15.5px;
    line-height: 1.65;
}

/* -----------------------------------------------------------------------------
   15. Legal notice
   -------------------------------------------------------------------------- */

.legal-hero {
    padding: clamp(40px, 6vw, 72px) 0 clamp(32px, 4vw, 48px);
    border-bottom: 1px solid var(--c-line);
}

.legal-hero__title {
    margin: 0;
    font-size: clamp(2rem, 4.4vw, 3.2rem);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.05;
}

.legal-hero__updated {
    margin: var(--sp-4) 0 0;
    color: var(--c-text-3);
    font-family: var(--ff-mono);
    font-size: var(--fs-mono-xs);
    line-height: 1.5;
}

.legal-main {
    padding-top: clamp(40px, 6vw, 72px);
    padding-bottom: var(--section-y);
}

/* Plus étroit que le conteneur du site, et délibérément : un texte juridique se lit
   ligne à ligne, et 1092 px de largeur le rendraient illisible. Surcharge le
   max-width de .container — même spécificité, cette feuille se charge après. */
.legal__inner {
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 4vw, 40px);
    max-width: 820px;
}

.legal-section {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.legal-section__title {
    display: flex;
    gap: var(--sp-3);
    align-items: baseline;
    margin: 0;
    font-size: clamp(1.1rem, 1.7vw, 1.3rem);
    font-weight: 500;
    letter-spacing: -.015em;
    line-height: 1.25;
}

.legal-section__number {
    flex: 0 0 auto;
    color: var(--c-accent);
    font-family: var(--ff-mono);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

.legal-section__text,
.legal-section__contact {
    margin: 0;
    color: var(--c-text-2);
    font-size: 15.5px;
    line-height: 1.7;
}

.legal-question {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: center;
    padding-top: clamp(8px, 1vw, 12px);
    border-top: 1px solid var(--c-line);
}

.legal-question__text {
    margin: 0;
    color: var(--c-text-2);
    font-size: 14.5px;
    line-height: 1.6;
}

/* -----------------------------------------------------------------------------
   16. Apparition au défilement, en cascade
   La source attribue le délai en JavaScript, par cycles de quatre éléments. Le faire
   en CSS garde le comportement sans que le script ait à toucher aux styles.
   -------------------------------------------------------------------------- */

/* Masqué uniquement si le script est disponible — voir reveal.js. */
html.js [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--t-reveal), transform var(--t-reveal);
}

html.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

html.js [data-reveal]:nth-of-type(4n + 2) { transition-delay: 70ms; }
html.js [data-reveal]:nth-of-type(4n + 3) { transition-delay: 140ms; }
html.js [data-reveal]:nth-of-type(4n + 4) { transition-delay: 210ms; }

@media (prefers-reduced-motion: reduce) {
    html.js [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =============================================================================
   17. Texte courant justifié
   Un seul endroit pour toute la règle, pour qu'elle ne diverge pas entre les pages.

   hyphens n'est pas facultatif ici : sans lui, le français justifié ouvre des
   rivières de blanc entre les mots. Il s'appuie sur l'attribut lang du document pour
   choisir un dictionnaire, raison pour laquelle cet attribut doit rester juste.

   Volontairement exclus : les titres, les libellés et sur-titres en monospace, les
   légendes de captures et les éléments de liste (une ou deux lignes — les justifier
   ne fait que créer des trous), les valeurs de la fiche technique (elles se lisent
   comme un tableau), et l'état vide, centré par construction.
   ========================================================================== */

.lead,
.hero__lead,
.advantage__text,
.situation__answer,
.situations__outro,
.card__text,
.method__text,
.about-path__prose p,
.about-stack__lead,
.about-ai p,
.about-ai__note,
.promise__text,
.case__prose,
.work-hero__lead,
.cta-card__lead,
.route__text,
.error__report,
.contact-hero__lead,
.legal-section__text {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}