/* =============================================================================
   Clippit — système de design, conforme à la charte graphique v1
   =============================================================================

   Palette : les quatre couleurs de la charte, et rien d'autre.
     #020873  bleu profond, dominant
     #16ff2d  vert vif, accent uniquement
     #ffffff  blanc
     #efefef  gris

   La rampe --bleu-* n'introduit pas de nouvelles couleurs : ce sont des mélanges
   de #020873 avec le noir, ce que la charte prescrit explicitement pour les
   fonds (« dégradés de bleu et de noir »). Chaque valeur est calculée, pas
   choisie à l'œil.

   Contrainte d'accessibilité mesurée : le vert sur blanc plafonne à 1,37:1. Il
   est donc interdit en texte sur fond clair. Il ne sert que comme aplat, avec du
   noir ou du bleu par-dessus (15,4:1 et 12,0:1), ou sur fond sombre (14,8:1).

   Typographie : Montserrat, et elle seule. Variable 100–900, romain et italique.
   Les titres sont en Black 900 capitales, l'emphase se fait en regular italique,
   jamais par la couleur, comme le prescrit la page « Utilisation titrage ».
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Polices auto-hébergées
   -------------------------------------------------------------------------- */
/* Ordre volontaire : chaque sous-ensemble `latin-ext` est declare AVANT son
   `latin`. Les deux plages se chevauchent — U+0152-0153, les ligatures Œ et œ,
   tombent dans le `U+0100-02BA` de latin-ext comme dans le `U+0152-0153` de
   latin — et quand deux faces correspondent, c'est la derniere declaree qui
   gagne. Avec latin-ext en dernier, le seul « œ » de « mise en œuvre » suffisait
   a faire telecharger 69 Ko de latin-ext sur chaque visite, soit 19 % du
   chargement initial, pour un caractere. C'est pour cette raison que les
   feuilles de Google Fonts emettent latin-ext en premier. */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../assets/fonts/montserrat-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../assets/fonts/montserrat-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('../assets/fonts/montserrat-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('../assets/fonts/montserrat-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -----------------------------------------------------------------------------
   Jetons
   -------------------------------------------------------------------------- */
:root {
    /* Charte */
    --bleu: #020873;
    --vert: #16ff2d;
    --blanc: #ffffff;
    --gris: #efefef;

    /* Rampe bleu vers noir, pour les fonds. Valeurs de repli, remplacées juste
       en dessous par les mélanges qui les ont produites. */
    --bleu-800: #020762;
    --bleu-700: #01054b;
    --bleu-600: #010434;
    --bleu-900: #00021d;
    --bleu-950: #00010e;
    /* Éclaircissement, réservé aux états de survol */
    --bleu-clair: #202684;

    /* Texte. Aucune teinte nouvelle : du noir de la charte, et un gris qui est
       ce même noir à 67 % sur blanc. Mesuré à 7,5:1, au-delà du seuil AA pour
       du texte courant. */
    --texte: #000000;
    --texte-doux: #555555;
    --texte-sombre-fond: rgba(255, 255, 255, 0.78);

    /* Typographie */
    --police: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Échelle fluide. Le pas de 1,25 donne une hiérarchie lisible sans écarts
       brutaux entre les niveaux. */
    --t-xs: 0.8125rem;
    --t-sm: 0.9375rem;
    --t-base: 1.0625rem;
    --t-md: clamp(1.125rem, 0.4vw + 1rem, 1.25rem);
    --t-lg: clamp(1.375rem, 1vw + 1rem, 1.75rem);
    --t-xl: clamp(1.75rem, 2vw + 1rem, 2.5rem);
    --t-2xl: clamp(2.25rem, 3.4vw + 1rem, 4rem);
    --t-3xl: clamp(2.75rem, 5vw + 1rem, 5.25rem);

    /* Espacement, base 4 px */
    --e-1: 0.25rem;
    --e-2: 0.5rem;
    --e-3: 0.75rem;
    --e-4: 1rem;
    --e-5: 1.5rem;
    --e-6: 2rem;
    --e-7: 3rem;
    --e-8: 4rem;
    --e-9: 6rem;
    --e-10: 8rem;

    /* Rayons. La charte montre des blocs très arrondis et des bulles en pilule. */
    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 22px;
    --r-xl: 32px;
    --r-pilule: 999px;

    /* Ombres, sobres : la charte interdit les ombrages appuyés sur le logo et
       privilégie une identité épurée. */
    --ombre-1: 0 1px 2px rgba(1, 4, 52, 0.06), 0 2px 8px rgba(1, 4, 52, 0.04);
    --ombre-2: 0 2px 4px rgba(1, 4, 52, 0.06), 0 12px 32px rgba(1, 4, 52, 0.08);

    --duree: 200ms;
    --courbe: cubic-bezier(0.2, 0.8, 0.2, 1);

    --largeur: 1200px;
    --hauteur-entete: 76px;
}

/* La rampe est dérivée à l'exécution, pour que la dépendance à la couleur de la
   charte soit portée par la feuille et non par un commentaire : changer --bleu
   déplace toute la rampe. Les hexadécimaux ci-dessus restent le repli exact,
   ils sont le résultat de ces mêmes mélanges. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
    :root {
        --bleu-800: color-mix(in srgb, var(--bleu) 85%, #000);
        --bleu-700: color-mix(in srgb, var(--bleu) 65%, #000);
        --bleu-600: color-mix(in srgb, var(--bleu) 45%, #000);
        --bleu-900: color-mix(in srgb, var(--bleu) 25%, #000);
        --bleu-950: color-mix(in srgb, var(--bleu) 12%, #000);
        --bleu-clair: color-mix(in srgb, var(--bleu) 88%, #fff);
    }
}

/* -----------------------------------------------------------------------------
   Réinitialisation
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* WCAG 2.2, 2.4.11 « Focus non masqué ». Le bandeau est collant : sans cette
       marge, un élément atteint au clavier plus bas dans la page peut être
       amené juste sous le bandeau, donc entièrement caché. `scroll-margin-top`
       sur les ancres ne couvre que la navigation par ancre, pas le focus. */
    scroll-padding-top: calc(var(--hauteur-entete) + var(--e-4));
}

body {
    font-family: var(--police);
    font-size: var(--t-base);
    font-weight: 400;
    line-height: 1.65;
    color: var(--texte);
    background: var(--blanc);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* `clip` et non `hidden` : `hidden` ferait du body un conteneur de
       défilement, ce qui casse les chronologies `scroll()` et `view()` du
       bandeau et des révélations. `clip` découpe sans créer de conteneur. */
    overflow-x: clip;
}

/* `pretty` supprime les lignes veuves en fin de paragraphe, `balance` répartit
   les lignes d'un titre court. Les deux sont sans effet là où ils ne sont pas
   pris en charge, donc sans repli à prévoir. */
p, li, dd, figcaption { text-wrap: pretty; }

/* L'attribut `hidden` ne vaut qu'un `display: none` dans la feuille du
   navigateur : n'importe quelle règle d'auteur posant un `display` le rend
   inopérant. C'était le cas des boîtes d'erreur du formulaire, en `display:
   flex`, dont l'icône restait affichée sous chaque champ, sans message, en
   permanence. La règle est posée ici une fois pour toutes plutôt que corrigée
   au cas par cas. */
[hidden] { display: none !important; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
/* `<picture>` est en ligne par défaut : sans cela il ne transmet pas sa largeur
   à l'image quand il devient élément de grille ou de flex. `display: contents`
   l'efface de l'arbre de mise en page et laisse l'image prendre sa place.
   Mais en l'effaçant, il expose aussi ses `<source>`, qui ne sont pas masqués
   par la feuille de style du navigateur : ils devenaient trois éléments de
   grille vides par image, et repoussaient chaque badge en troisième colonne.
   D'où la seconde règle, qui n'est pas décorative. */
picture { display: contents; }
picture > source { display: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

/* Cible d'ancre dégagée du bandeau fixe */
/* Pas de `scroll-margin-top` ici, volontairement. Il s'ajouterait au
   `scroll-padding-top` de `html` lors d'une navigation native vers une ancre :
   arriver sur `/#metiers` depuis les mentions légales posait la section à
   192 px du haut, alors qu'un clic sur la même entrée de menu depuis l'accueil
   la posait à 92 px, le script n'appliquant que le rembourrage. Les deux
   chemins tombent maintenant au même endroit. */

/* -----------------------------------------------------------------------------
   Focus
   -------------------------------------------------------------------------- */
/* WCAG 1.4.11 exige 3:1 pour l'anneau de focus contre les couleurs adjacentes.
   Aucune des deux couleurs de la charte ne satisfait cette règle partout : le
   vert sur blanc plafonne à 1,37:1, le bleu sur bleu profond à 1,4:1. L'anneau
   est donc lié au fond, pas fixe.

   Fond clair : bleu, 16,3:1 sur blanc et 12,0:1 sur le vert.
   Fond sombre : vert, 15,0:1 sur le bleu profond.
   Le décalage de 3 px ménage un liseré de fond entre l'élément et l'anneau, ce
   qui garde l'anneau vert distinguable d'un bouton vert. */
:focus-visible {
    outline: 3px solid var(--bleu);
    outline-offset: 3px;
}
.entete :focus-visible,
.section--sombre :focus-visible,
.pied :focus-visible,
.notification :focus-visible { outline-color: var(--vert); }

.lien-evitement {
    position: fixed;
    top: var(--e-2);
    left: 50%;
    z-index: 200;
    transform: translate(-50%, -200%);
    padding: var(--e-3) var(--e-5);
    background: var(--vert);
    color: #000;
    font-weight: 800;
    border-radius: var(--r-pilule);
    transition: transform var(--duree) var(--courbe);
}
.lien-evitement:focus { transform: translate(-50%, 0); }

/* -----------------------------------------------------------------------------
   Structure
   -------------------------------------------------------------------------- */
.conteneur {
    width: 100%;
    max-width: var(--largeur);
    margin-inline: auto;
    padding-inline: var(--e-5);
}

.section { padding-block: var(--e-9); }
.section--serree { padding-block: var(--e-7); }

.section--sombre {
    position: relative;
    color: var(--blanc);
    background: var(--bleu-900);
    isolation: isolate;
}

/* Fond de la charte : dégradé bleu vers noir, plus une touche de vert très
   discrète en angle, « comme un point lumineux ». */
.fond-charte::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(120% 90% at 82% 8%, var(--bleu) 0%, transparent 58%),
        radial-gradient(70% 60% at 96% 96%, rgba(22, 255, 45, 0.16) 0%, transparent 62%),
        linear-gradient(160deg, var(--bleu-900) 0%, var(--bleu-950) 100%);
}

/* Quadrillage léger, pour la notion de structure et d'organisation de la donnée */
/* Le quadrillage est posé en absolu : la section doit établir un contexte de
   positionnement. */
.trame { position: relative; }
.trame::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(120% 100% at 50% 0%, #000 35%, transparent 88%);
}


/* -----------------------------------------------------------------------------
   Titrage — le cœur de la charte
   -------------------------------------------------------------------------- */
/* Montserrat Black, capitales. L'emphase se fait par un mot en regular
   italique, jamais par la couleur. */
.titre {
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    text-wrap: balance;
}
.titre em {
    font-weight: 400;
    font-style: italic;
    letter-spacing: -0.005em;
}

.titre--geant { font-size: var(--t-3xl); }
.titre--grand { font-size: var(--t-2xl); }
.titre--moyen { font-size: var(--t-xl); }
.titre--petit {
    font-size: var(--t-lg);
    letter-spacing: -0.01em;
}

/* Étiquette de section : bulle verte, texte noir en Black. C'est le motif que la
   charte utilise elle-même pour ses propres titres de page. */
.etiquette {
    display: inline-block;
    padding: 0.4em 1.1em;
    background: var(--vert);
    color: #000;
    font-size: var(--t-xs);
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: var(--r-pilule);
}

.intro {
    max-width: 62ch;
    font-size: var(--t-md);
    color: var(--texte-doux);
}
.section--sombre .intro { color: var(--texte-sombre-fond); }

.entete-section {
    display: flex;
    flex-direction: column;
    gap: var(--e-4);
    margin-bottom: var(--e-7);
}
.entete-section--centre {
    align-items: center;
    text-align: center;
}
.entete-section--centre .intro { text-align: center; }

/* -----------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    /* 48 px de haut minimum : cible tactile confortable */
    min-height: 48px;
    padding: 0.75rem 1.6rem;
    font-size: var(--t-sm);
    font-weight: 800;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    border-radius: var(--r-pilule);
    transition: transform var(--duree) var(--courbe), background-color var(--duree), color var(--duree), border-color var(--duree);
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; }
/* Sur un écran tactile, l'état de survol reste collé après l'appui : le bouton
   restait soulevé, la carte aussi, ce qui se lit comme un défaut d'affichage.
   Les effets qui déplacent quelque chose sont donc réservés aux pointeurs qui
   savent survoler. */
@media (hover: hover) {
    .btn:hover { transform: translateY(-2px); }
}

/* Un seul bouton vert par écran : c'est l'accent, pas un style de composant. */
.btn--accent { background: var(--vert); color: #000; }
.btn--accent:hover { background: #34ff48; }

.btn--bleu { background: var(--bleu); color: var(--blanc); }
.btn--bleu:hover { background: var(--bleu-clair); }

.btn--contour {
    border: 2px solid currentColor;
    color: var(--bleu);
}
/* Le bandeau de navigation et celui du consentement sont sur fond sombre sans
   etre contenus dans .section--sombre : sans cette regle, le bouton restait
   bleu sur bleu nuit, soit 1,3:1 de contraste. */
.entete .btn--contour,
.mesure .btn--contour,
.section--sombre .btn--contour { color: var(--blanc); }
.btn--contour:hover { background: rgba(2, 8, 115, 0.06); }
.section--sombre .btn--contour:hover { background: rgba(255, 255, 255, 0.1); }

/* -----------------------------------------------------------------------------
   Bandeau de navigation
   -------------------------------------------------------------------------- */
.entete {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    background: rgba(0, 2, 29, 0.82);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
/* Le bandeau se densifie au fil des cent premiers pixels de défilement, piloté
   par la position de défilement elle-même. C'est le dernier écouteur de
   défilement retiré du script : plus rien ne s'exécute en JavaScript pendant
   que l'utilisateur fait défiler la page. Une bascule binaire à un seuil donné
   se voyait comme un saut ; l'interpolation la remplace. */
@supports (animation-timeline: scroll()) {
    .entete {
        animation: entete-densifie linear both;
        animation-timeline: scroll(root block);
        animation-range: 0 100px;
    }
}
@keyframes entete-densifie {
    from { background-color: rgba(0, 2, 29, 0.82); border-bottom-color: rgba(255, 255, 255, 0.09); }
    to { background-color: rgba(0, 2, 29, 0.97); border-bottom-color: rgba(22, 255, 45, 0.28); }
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-5);
    height: var(--hauteur-entete);
}
.nav__logo { display: flex; align-items: center; }
.nav__logo img { width: auto; height: 34px; }

.nav__liens {
    display: flex;
    align-items: center;
    gap: var(--e-2);
}
.nav__lien {
    /* Un libellé de navigation ne se casse pas en deux lignes : le bandeau a une
       hauteur fixe, la deuxième ligne y serait rognée. Les liens ne se
       compriment pas non plus, sans quoi le texte se casse quand la place se
       resserre. */
    white-space: nowrap;
    flex: none;
    padding: var(--e-2) var(--e-3);
    color: rgba(255, 255, 255, 0.82);
    font-size: var(--t-sm);
    font-weight: 600;
    border-radius: var(--r-sm);
    transition: color var(--duree), background-color var(--duree);
}
.nav__lien:hover { color: var(--blanc); background: rgba(255, 255, 255, 0.08); }
.nav__actions { display: flex; align-items: center; gap: var(--e-3); margin-left: var(--e-3); }
.nav__actions .btn { min-height: 42px; padding: 0.5rem 1.2rem; font-size: var(--t-xs); }

.burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: var(--e-3);
    /* 44 px minimum de cible tactile */
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
}
.burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--blanc);
    border-radius: 2px;
    transition: transform var(--duree) var(--courbe), opacity var(--duree);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -----------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    padding-block: calc(var(--hauteur-entete) + var(--e-9)) var(--e-9);
    overflow: hidden;
}
.hero__grille {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--e-8);
    align-items: center;
}
.hero__annonce {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    margin-bottom: var(--e-5);
    /* Serré du côté de la pastille verte, aéré du côté du libellé. */
    padding: 0.4rem 0.9rem 0.4rem 0.4rem;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--r-pilule);
    font-size: var(--t-xs);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}
.hero__annonce b {
    padding: 0.15rem 0.7rem;
    background: var(--vert);
    color: #000;
    font-weight: 900;
    border-radius: var(--r-pilule);
    /* Une pastille coupée en deux lignes perd sa lisibilité de badge. */
    white-space: nowrap;
}
.hero__titre { margin-bottom: var(--e-5); }
.hero__texte {
    max-width: 52ch;
    margin-bottom: var(--e-6);
    font-size: var(--t-md);
    color: var(--texte-sombre-fond);
}
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-3);
    margin-bottom: var(--e-7);
}
.hero__preuves {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2) var(--e-6);
    padding-top: var(--e-5);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: var(--t-xs);
    color: rgba(255, 255, 255, 0.7);
}
.hero__preuves li { display: flex; align-items: center; gap: var(--e-2); }
/* Repere discret. Un contour ovale evoquait le trombone mais se lisait comme un
   zero a cette taille : le trombone n'est utilise qu'aux tailles ou il est
   reconnaissable, conformement a son role d'element graphique secondaire. */
.hero__preuves li::before {
    content: '';
    width: 3px;
    height: 15px;
    flex: none;
    background: var(--vert);
    border-radius: var(--r-pilule);
}

.hero__visuel { display: flex; justify-content: center; }
.hero__visuel img {
    /* width: auto explicite : sans lui, les attributs de dimensions étirent
       l'image quand seule la hauteur est plafonnée. */
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 420px;
}

/* -----------------------------------------------------------------------------
   Bandeau de confiance
   -------------------------------------------------------------------------- */
.confiance {
    padding-block: var(--e-6);
    background: var(--gris);
}
.confiance__grille {
    display: flex;
    flex-wrap: wrap;
    /* Alignés en haut : les badges n'ont pas la même hauteur, un centrage
       ferait flotter le libellé au milieu du vide. */
    align-items: start;
    justify-content: space-between;
    gap: var(--e-5) var(--e-7);
}
.confiance__mention {
    /* Décalage optique, pour se poser sur la première ligne des badges. */
    padding-top: var(--e-4);
    font-size: var(--t-xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--texte-doux);
}
/* Ces trois badges sont les cartes officielles Microsoft : elles portent leur
   propre texte, sur un fond blanc qui fait partie de l'image, et partagent la
   même largeur de gabarit (1043 px). On les dimensionne donc par la largeur et
   non par la hauteur : à hauteur égale, celle qui est presque carrée afficherait
   un texte deux fois plus petit que les deux autres. Elles restent alignées en
   haut, la carte « Spécialiste » étant plus haute par nature. */
.confiance__badges {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: var(--e-5);
    width: min(100%, 660px);
}
.confiance__badges img {
    width: 100%;
    height: auto;
    border-radius: var(--r-sm);
}

/* -----------------------------------------------------------------------------
   Blocs et bulles — vocabulaire de la charte
   -------------------------------------------------------------------------- */
.bulle {
    display: inline-block;
    padding: 0.32em 0.9em;
    font-size: var(--t-xs);
    font-weight: 600;
    border-radius: var(--r-pilule);
    /* Un liseré en plus de l'aplat : à 7 % d'opacité sur blanc, la pastille se
       distinguait mal du fond de la carte, et la rangée de bulles se lisait
       comme une ligne de texte flottante plutôt que comme des étiquettes. */
    background: rgba(2, 8, 115, 0.055);
    border: 1px solid rgba(2, 8, 115, 0.12);
    color: var(--bleu);
}
.section--sombre .bulle {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.86);
}

/* Les cartes étaient plates : un liseré gris d'un pixel sur fond blanc, sans
   ombre au repos, donc rien ne les détachait de la page. Elles gagnent un
   dégradé très léger vers le haut, une ombre discrète dès le repos, et un
   marqueur d'angle qui n'apparaît qu'au survol. */
.bloc {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
    padding: var(--e-6);
    background:
        linear-gradient(180deg, rgba(2, 8, 115, 0.028), rgba(2, 8, 115, 0) 120px),
        var(--blanc);
    border: 1px solid var(--gris);
    border-radius: var(--r-lg);
    box-shadow: var(--ombre-1);
    transition: transform var(--duree) var(--courbe), box-shadow var(--duree), border-color var(--duree);
}
/* Deux traits d'angle, en haut à droite. Ils marquent le survol sans déplacer
   quoi que ce soit dans la carte, donc sans faire sauter le texte. */
.bloc::after {
    content: '';
    position: absolute;
    top: 14px;
    right: 14px;
    width: 14px;
    height: 14px;
    border-top: 2px solid var(--vert);
    border-right: 2px solid var(--vert);
    border-radius: 0 4px 0 0;
    opacity: 0;
    transform: translate(-4px, 4px);
    transition: opacity var(--duree), transform var(--duree) var(--courbe);
}
@media (hover: hover) {
    .bloc:hover {
        transform: translateY(-4px);
        border-color: rgba(2, 8, 115, 0.24);
        box-shadow: var(--ombre-2);
    }
    .bloc:hover::after { opacity: 1; transform: none; }
}
/* Sur les aplats bleu et vert, le vert de l'angle disparaîtrait ou jurerait. */
.bloc--bleu::after { border-color: var(--vert); }
.bloc--vert::after { border-color: #000; }
/* L'en-tête de carte est un `<summary>` : le marqueur du navigateur est retiré,
   le chevron est dessiné plus bas. L'icône est passée dans le titre, `<summary>`
   n'acceptant qu'un seul élément de titre pour contenu. */
.bloc__entete {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    list-style: none;
}
.bloc__entete::-webkit-details-marker { display: none; }
.bloc__entete > h4 { display: flex; align-items: center; gap: var(--e-3); }
.bloc__intitule { display: block; }
/* Jeu d'icones lineaires dessinees en currentColor : meme grille, meme graisse
   de trait, meme niveau de detail. Elles heritent de la couleur du bloc, donc
   restent lisibles sur blanc comme sur les aplats bleu et vert. Les
   pictogrammes produits Microsoft qui servaient avant avaient chacun leurs
   couleurs de marque et des luminances allant de 226/255 a tres sombre : a 24 px
   sur un fond colore, plusieurs disparaissaient. */
.bloc__icone {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: var(--r-md);
    background: rgba(2, 8, 115, 0.07);
    color: var(--bleu);
    transition: background-color var(--duree), color var(--duree);
}
.bloc__icone .icone { width: 23px; height: 23px; }
/* La tuile s'inverse au survol : le bleu de marque prend l'aplat, l'icône passe
   en blanc. C'est le seul endroit de la carte où la couleur change, ce qui
   suffit à désigner celle qu'on survole. */
@media (hover: hover) {
    .bloc:hover .bloc__icone { background: var(--bleu); color: var(--blanc); }
    .bloc--bleu:hover .bloc__icone { background: var(--blanc); color: var(--bleu); }
    .bloc--vert:hover .bloc__icone { background: #000; color: var(--vert); }
}

.bloc--bleu .bloc__icone { background: rgba(255, 255, 255, 0.16); color: var(--blanc); }
.bloc--vert .bloc__icone { background: rgba(0, 0, 0, 0.1); color: #000; }
.section--sombre .bloc:not(.bloc--bleu):not(.bloc--vert) .bloc__icone {
    background: rgba(2, 8, 115, 0.07);
    color: var(--bleu);
}
.bloc h3, .bloc h4 { font-size: var(--t-base); font-weight: 800; letter-spacing: -0.005em; }
.bloc p { font-size: var(--t-sm); color: var(--texte-doux); }
.bloc__bulles { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: auto; padding-top: var(--e-2); }

/* Bloc bleu plein, comme sur la page « Bloc box et bulles » */
.bloc--bleu {
    background: var(--bleu);
    border-color: transparent;
    color: var(--blanc);
}
.bloc--bleu p { color: rgba(255, 255, 255, 0.8); }
.bloc--bleu .bulle { background: rgba(255, 255, 255, 0.14); color: var(--blanc); }

/* Bloc vert plein. Un seul par page : c'est un accent, pas une variante banale. */
.bloc--vert {
    background: var(--vert);
    border-color: transparent;
    color: #000;
}
.bloc--vert p { color: rgba(0, 0, 0, 0.72); }
.bloc--vert .bulle { background: rgba(0, 0, 0, 0.1); color: #000; }

/* -----------------------------------------------------------------------------
   Métiers
   -------------------------------------------------------------------------- */
/* Trois familles présentées à plat, chacune ancrée. Aucun contenu n'est masqué :
   tout est lisible sans JavaScript, indexable, et imprimable. */
.famille + .famille { margin-top: var(--e-8); }
.famille__entete {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--e-3) var(--e-4);
    margin-bottom: var(--e-5);
    padding-bottom: var(--e-4);
    border-bottom: 2px solid var(--gris);
}
/* Ce marqueur remplace une numérotation 01/02/03. Les trois familles sont des
   choix parallèles, pas une séquence : un numéro n'y encodait rien et se lisait
   comme de la décoration. Le mode d'engagement, lui, est exactement ce qui les
   distingue, et c'est la question que se pose le visiteur. */
.famille__mode {
    align-self: center;
    padding: 0.25em 0.8em;
    font-size: var(--t-xs);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--bleu);
    border: 1.5px solid color-mix(in srgb, var(--bleu) 28%, transparent);
    border-radius: var(--r-pilule);
}
.famille__resume { flex: 1 1 22ch; font-size: var(--t-sm); color: var(--texte-doux); }

.grille {
    display: grid;
    gap: var(--e-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

/* Alignement des cartes entre elles. Sans cela, un titre qui passe sur deux
   lignes décale le corps de texte de sa carte par rapport à ses voisines, et la
   rangée se lit en escalier. Chaque carte devient une sous-grille de la grille
   parente : les titres partagent une ligne, les descriptions une autre, les
   bulles une troisième, quelle que soit la longueur de chacun.

   Le nombre de lignes à réserver dépend du contenu, et les deux grilles de la
   page n'ont pas la même structure : les cartes de métiers portent des bulles,
   les raccourcis de l'espace client non. `:has()` fait la distinction sans
   ajouter de classe au balisage. */
@supports (grid-template-rows: subgrid) {
    .grille > .bloc {
        display: grid;
        grid-template-rows: subgrid;
        gap: var(--e-3);
    }
    .grille > .bloc:has(.bloc__bulles) { grid-row: span 3; }
    .grille > .bloc:not(:has(.bloc__bulles)) { grid-row: span 2; }
}

/* -----------------------------------------------------------------------------
   Approche
   -------------------------------------------------------------------------- */
.etapes {
    display: grid;
    gap: var(--e-5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    counter-reset: etape;
}
.etape {
    position: relative;
    padding-top: var(--e-5);
    border-top: 2px solid rgba(255, 255, 255, 0.16);
    counter-increment: etape;
}
.etape::before {
    content: counter(etape, decimal-leading-zero);
    display: block;
    margin-bottom: var(--e-3);
    font-size: var(--t-lg);
    font-weight: 900;
    color: var(--vert);
    line-height: 1;
}
.etape h3 {
    margin-bottom: var(--e-2);
    font-size: var(--t-base);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.005em;
}
.etape p { font-size: var(--t-sm); color: var(--texte-sombre-fond); }

/* -----------------------------------------------------------------------------
   Chiffres
   -------------------------------------------------------------------------- */
/* Quatre valeurs posées à même le fond bleu ne tenaient pas ensemble : rien ne
   les délimitait, et les deux mentions (« N1–N3 », « FR ») ne se lisaient pas
   comme les deux nombres. Chacune devient une fiche du vocabulaire de la charte,
   avec une icône qui donne au groupe sa cohérence, et un filet vert en tête qui
   marque le point d'entrée de la lecture. */
.chiffres {
    display: grid;
    gap: var(--e-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.chiffre {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
    padding: var(--e-6) var(--e-5) var(--e-5);
    border-radius: var(--r-lg);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.13);
    overflow: clip;
    transition: background-color var(--duree), border-color var(--duree), transform var(--duree) var(--courbe);
}
/* Filet vert en tête de fiche. Court au repos, il court sur toute la largeur au
   survol : l'accent reste dosé, et le survol se voit sans changer les couleurs. */
.chiffre::before {
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    width: 46px;
    height: 3px;
    background: var(--vert);
    transition: width var(--duree) var(--courbe);
}
.chiffre:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.24);
    transform: translateY(-3px);
}
.chiffre:hover::before { width: 100%; }
.chiffre__icone {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.09);
    color: var(--vert);
}
.chiffre__icone svg { width: 21px; height: 21px; }
.chiffre__valeur {
    font-size: var(--t-2xl);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    /* Les chiffres s'alignent en colonne d'une fiche à l'autre. */
    font-variant-numeric: tabular-nums;
}
/* La silhouette de la France remplace le texte « FR ». Sa hauteur est calée sur
   celle des chiffres voisins pour que les quatre valeurs restent sur la même
   ligne optique, et non sur la taille de police, qui donnerait une image trop
   petite : une capitale n'occupe qu'environ 70 % du cadratin. */
/* Réservé aux technologies d'assistance : présent dans l'arbre d'accessibilité,
   absent de l'écran. `clip-path` plutôt que `display: none`, qui retirerait
   aussi l'élément de cet arbre. */
.lecture-seule {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.carte-fr {
    /* Le cadre du tracé fait 118 unités de haut, dont 99 pour le continent, le
       reste étant la descente de la Corse. Pour que le continent occupe la même
       hauteur qu'une capitale, soit environ 0,70 em en Montserrat, il faut donc
       un cadre de 0,70 / 0,84 ≈ 0,86 em. Aligné sur la ligne de base comme un
       caractère, ce qui laisse la Corse descendre légèrement en dessous, ce
       qu'elle fait aussi sur une carte. */
    height: 0.86em;
    width: auto;
    font-size: var(--t-2xl);
    vertical-align: baseline;
    fill: currentColor;
    /* Les angles du tracé sont vifs ; un filet de la même couleur, aux jointures
       arrondies, les adoucit sans épaissir la forme de façon perceptible. */
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linejoin: round;
}
.chiffre__libelle {
    /* `auto` pour coller le libellé au bas de la fiche : les quatre libellés
       s'alignent alors entre eux, quelle que soit la hauteur de la valeur. */
    margin-top: auto;
    font-size: var(--t-sm);
    color: var(--texte-doux);
    text-wrap: pretty;
}
.section--sombre .chiffre__libelle { color: var(--texte-sombre-fond); }

/* -----------------------------------------------------------------------------
   Partenaires
   -------------------------------------------------------------------------- */
.section--bleu-700 { background: var(--bleu-700); }
.chiffres--espace { margin-bottom: var(--e-9); }
.partenaires__titre {
    text-align: center;
    margin-bottom: var(--e-6);
    /* Ce titre annonce une liste de logos : il ne doit pas rivaliser avec les
       titres de section. Opacité plutôt qu'une teinte nouvelle. */
    opacity: 0.7;
}
.partenaires {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--e-4);
}
.partenaires img {
    /* Les sept fichiers fournis sont des bitmaps 100 % opaques : ils déclarent
       un canal alpha mais aucun pixel transparent, leur fond blanc fait partie
       de l'image. Posés directement sur le bleu profond, ils affichaient sept
       rectangles clairs. Ils reçoivent donc une tuile blanche, qui prolonge
       leur propre fond et se lit comme un choix de mise en page.
       Aucun filtre de désaturation : les couleurs de marque (le cyan Cisco, le
       vert Veeam) portent l'essentiel de leur lisibilité, un grayscale les
       ramenait tous vers le même gris clair. */
    width: 100%;
    height: 44px;
    object-fit: contain;
    box-sizing: border-box;
    background: var(--blanc);
    border-radius: var(--r-sm);
    padding: var(--e-3) var(--e-4);
    transition: transform var(--duree);
}
.partenaires img:hover { transform: translateY(-3px); }

/* -----------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact__grille {
    display: grid;
    gap: var(--e-8);
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
}
.coord { display: flex; flex-direction: column; gap: var(--e-5); }
.coord__ligne { display: flex; gap: var(--e-4); align-items: flex-start; }
.coord__icone {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: none;
    background: rgba(22, 255, 45, 0.14);
    border-radius: var(--r-md);
    color: var(--vert);
}
.coord__icone svg { width: 20px; height: 20px; }
.coord dt {
    font-size: var(--t-xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}
.coord dd { font-size: var(--t-md); font-weight: 600; }
/* Le téléphone et l'adresse électronique sont, sur un téléphone, les deux
   actions les plus directes de la page : appeler et écrire. Ils étaient hauts
   de 22 px, sous le seuil de 24 px du critère 2.5.8, et l'exception « en
   ligne » ne les couvre pas puisqu'ils sont seuls dans leur définition, sans
   texte autour. Le remplissage vertical les porte à 32 px et les rend
   confortables au pouce. */
.coord dd a {
    display: inline-block;
    padding-block: 0.3rem;
}
.coord dd a:hover { color: var(--vert); }

.formulaire {
    display: grid;
    gap: var(--e-4);
    padding: var(--e-6);
    background: var(--blanc);
    border-radius: var(--r-xl);
    color: var(--texte);
}
.champ { display: grid; gap: var(--e-2); }
.champ label {
    font-size: var(--t-xs);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--texte-doux);
}
.champ label .requis { color: var(--bleu); }
.champ label .facultatif {
    /* Pas de capitales ni de graisse : c'est une précision, pas une consigne. */
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    opacity: 0.75;
}
.champ input, .champ textarea {
    width: 100%;
    min-height: 48px;
    padding: 0.75rem 1rem;
    background: var(--gris);
    /* La bordure ne peut pas être transparente : le seul repère du champ était
       alors son fond, à 1,15:1 sur la carte blanche, très en dessous des 3:1
       demandés pour la limite d'un composant. Ce bleu délavé est à 4,1:1 sur le
       fond du champ comme sur la carte, et laisse le bleu franc au focus. */
    border: 2px solid color-mix(in srgb, var(--bleu) 60%, var(--blanc));
    border-radius: var(--r-md);
    transition: border-color var(--duree), background-color var(--duree);
}
.champ textarea {
    min-height: 130px;
    resize: vertical;
    /* Le champ suit la longueur du texte là où c'est pris en charge, sans
       jamais descendre sous sa hauteur de départ. */
    field-sizing: content;
    max-height: 60vh;
}
.champ input:focus, .champ textarea:focus {
    background: var(--blanc);
    border-color: var(--bleu);
    outline: none;
}
/* La carte du formulaire est blanche, alors qu'elle vit dans une section
   sombre : l'anneau vert hérité y tomberait à 1,37:1. Il repasse au bleu. */
.formulaire :focus-visible { outline-color: var(--bleu); }
.champ input:focus-visible,
.champ textarea:focus-visible { outline: 3px solid var(--bleu); outline-offset: 1px; }

/* Erreur de champ. La couleur ne porte pas seule l'information : il y a une
   icône et un texte. Le rouge n'appartenant pas à la charte, c'est le bleu qui
   marque l'anomalie, renforcé par la bordure du champ et l'icône. */
.champ__erreur {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--bleu);
}
.champ__erreur svg { width: 15px; height: 15px; flex: none; }
.champ input[aria-invalid="true"],
.champ textarea[aria-invalid="true"] {
    border-color: var(--bleu);
    background: var(--blanc);
    /* Un second liseré intérieur, pour que l'anomalie se voie sans la couleur. */
    box-shadow: inset 0 0 0 1px var(--bleu);
}

/* Champ piège anti-robot : masqué visuellement, hors tabulation côté markup. */
.piege {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.mention-rgpd { font-size: var(--t-xs); color: var(--texte-doux); }
.mention-rgpd a { color: var(--bleu); text-decoration: underline; }

/* -----------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.pied {
    padding-block: var(--e-8) var(--e-5);
    background: var(--bleu-950);
    color: rgba(255, 255, 255, 0.72);
}
/* Le bloc de marque puis les trois colonnes de navigation.
   Les colonnes sont comptées explicitement. La version précédente les posait
   avec « repeat(auto-fit, minmax(140px, 1fr)) », qui maximise le nombre de
   pistes de 140 px sans rien réserver à la première : à 414 px de large, il en
   plaçait deux et laissait 22 px au bloc de marque, dont le logo, la signature
   et le bouton LinkedIn débordaient alors sur la colonne voisine. C'est le
   chevauchement de liens visible en bas de page sur téléphone. */
.pied__grille {
    display: grid;
    gap: var(--e-6);
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    padding-bottom: var(--e-6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.pied img { width: auto; height: 30px; margin-bottom: var(--e-4); }
.pied h2 {
    margin-bottom: var(--e-4);
    font-size: var(--t-xs);
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--blanc);
}
.pied li + li { margin-top: var(--e-1); }
/* WCAG 2.2, 2.5.8 « Taille de cible ». Ces liens de navigation ne sont pas dans
   un bloc de texte : l'exception « en ligne » ne s'applique pas, et 24 px de
   haut sont exigibles. Le remplissage vertical les y amène. */
.pied nav a {
    display: inline-block;
    padding-block: 0.2rem;
}
/* Sur téléphone, ces liens sont touchés au pouce et non cliqués à la souris :
   ils passent de 31 px à 44 px, la cible recommandée, sans changer le rythme
   visuel puisque l'interligne de la liste absorbe le remplissage. */
@media (max-width: 960px) {
    .pied nav a { padding-block: 0.65rem; }
    .pied li + li { margin-top: 0; }
    .coord dd a { padding-block: 0.55rem; }
    /* Le numéro de téléphone du bas de page, seul lien de sa ligne. */
    /* Le logo est le lien de retour à l'accueil : il était haut de 34 px. */
    .nav__logo { display: flex; align-items: center; min-height: 44px; }
}
.pied__accroche { font-size: var(--t-sm); max-width: 34ch; }
.pied__social {
    display: inline-grid;
    place-items: center;
    /* 44 px : la cible minimale recommandée pour un élément tactile isolé. */
    width: 44px;
    height: 44px;
    margin-top: var(--e-4);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--r-sm);
    transition: border-color var(--duree), color var(--duree);
}
.pied__social svg { width: 20px; height: 20px; }
.pied__social:hover { color: var(--vert); border-color: var(--vert); }
.pied a { font-size: var(--t-sm); }
.pied a:hover { color: var(--vert); }
.pied__bas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-3) var(--e-5);
    justify-content: space-between;
    padding-top: var(--e-5);
    font-size: var(--t-xs);
}

/* -----------------------------------------------------------------------------
   Révélation au défilement
   -----------------------------------------------------------------------------
   Entièrement en CSS, via `animation-timeline: view()`. Aucun écouteur de
   défilement, aucun IntersectionObserver, donc aucun travail sur le fil
   principal pendant que l'utilisateur défile : c'est ce qui compte pour l'INP,
   la métrique la plus souvent en échec.

   Il n'y a volontairement pas de repli JavaScript. La révélation est de la
   décoration : un navigateur qui ne sait pas l'animer affiche simplement le
   contenu, ce qui est le bon comportement. Un repli par bascule de classe
   obligerait à masquer le contenu avant de pouvoir le révéler, au risque d'un
   clignotement ou d'un contenu définitivement invisible si le script échoue.
   L'état masqué est donc enfermé dans le `@supports` : là où l'animation
   n'existe pas, rien n'est masqué. */
@supports (animation-timeline: view()) {
    .a-reveler {
        opacity: 0;
        animation: apparaitre 1ms linear both;
        animation-timeline: view();
        /* Démarre quand l'élément entre par le bas, finit lorsqu'il a parcouru
           un quart de la fenêtre : la révélation est faite avant la lecture. */
        animation-range: entry 5% cover 25%;
    }
}
@keyframes apparaitre {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}


/* -----------------------------------------------------------------------------
   Transitions entre les pages
   -----------------------------------------------------------------------------
   Aller de l'accueil au support, aux mentions légales ou à la version anglaise
   provoquait un flash blanc, le temps que le navigateur remplace un document par
   l'autre. Une transition de vue croise les deux documents à la place.

   Le bandeau et le pied portent un nom de transition : comme ils sont identiques
   d'une page à l'autre, le navigateur les reconnaît et les laisse en place
   pendant que le contenu change. C'est ce qui fait la différence entre une page
   qui se recharge et une application qui navigue.

   Enfermé dans une requête média : c'est du mouvement, et qui demande à en voir
   le moins possible retrouve le comportement d'avant. Les navigateurs qui ne
   savent pas faire ignorent la règle, sans conséquence.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
}
.entete { view-transition-name: bandeau; }
.pied { view-transition-name: pied; }

/* -----------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
/* Entre l'apparition du menu replié et 1 100 px, les quatre liens et les deux
   actions demandent treize pixels de plus que la place disponible : « Notre
   réponse » passait sur deux lignes dans un bandeau de hauteur fixe. Le
   rembourrage des liens se resserre juste sur cette plage, ce qui rend
   trente-deux pixels. */
@media (min-width: 961px) and (max-width: 1100px) {
    .nav__lien { padding-inline: 0.5rem; }
}

@media (max-width: 960px) {
    .hero__grille { grid-template-columns: 1fr; gap: var(--e-5); }
    /* Le trombone reste en tête, il porte la marque, mais il redevient une
       marque et non une image de couverture : à 240 px il occupait presque un
       tiers du premier écran d'un téléphone avant que la proposition ne soit
       lisible. */
    .hero__visuel { order: -1; }
    .hero__visuel img { max-height: 150px; }
    .contact__grille { grid-template-columns: 1fr; gap: var(--e-6); }

    .nav__liens {
        position: absolute;
        inset: var(--hauteur-entete) 0 auto;
        flex-direction: column;
        align-items: stretch;
        gap: var(--e-1);
        padding: var(--e-4) var(--e-5) var(--e-6);
        background: var(--bleu-950);
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        /* Fermé par défaut, sans transition sur visibility pour rester
           focalisable dès l'ouverture. */
        visibility: hidden;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity var(--duree), transform var(--duree) var(--courbe), visibility 0s;
        /* Le panneau tombe sur un hero de la même famille de bleus : sans ombre,
           on ne voyait pas où il s'arrête ni qu'il est posé par-dessus. */
        box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
    }
    .nav__liens[data-ouvert="true"] { visibility: visible; opacity: 1; transform: none; }
    .nav__lien { padding: var(--e-3); font-size: var(--t-base); }
    .nav__actions { flex-direction: column; align-items: stretch; margin: var(--e-3) 0 0; }
    .nav__actions .btn { min-height: 48px; font-size: var(--t-sm); }
    /* Le bouton « Espace client » est un bloc, pas un bouton en ligne : sans
       cela il gardait sa largeur de texte à côté d'un « Nous parler » étiré, ce
       qui se lisait comme une hiérarchie qui n'existe pas. */
    .client, .client__bouton { width: 100%; }
    .burger { display: flex; }

    /* Quatre colonnes sur une largeur de tablette laissent au bloc de marque
       moins que la largeur de son propre logo. Il passe donc sur sa ligne, et
       les trois colonnes de liens se partagent la suivante. */
    .pied__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pied__grille > :first-child { grid-column: 1 / -1; }
    .pied__accroche { max-width: 52ch; }
}

/* L'action principale garde la largeur ; les deux secondaires se partagent la
   ligne suivante, ce qui rend une quarantaine de pixels du premier écran. En
   dessous de 380 px de fenêtre, leurs libellés passeraient à deux lignes : elles
   restent alors pleine largeur. */
@media (min-width: 380px) and (max-width: 640px) {
    .hero__actions .btn--contour {
        flex: 1 1 calc(50% - var(--e-3));
        width: auto;
        padding-inline: 0.9rem;
    }
}

@media (max-width: 640px) {
    :root { --e-9: 4rem; --e-8: 3rem; }
    .duo { grid-template-columns: 1fr; }
    .formulaire { padding: var(--e-5); }
    /* Sur un écran étroit, la pastille et son libellé ne tiennent plus sur une
       ligne. Le cadre qui les entourait est retiré : empilé et bordé, il se
       lisait comme un champ de formulaire plutôt que comme un badge. Restent la
       pastille verte et son libellé, sans boîte. */
    .hero__annonce {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--e-2);
        padding: 0;
        background: none;
        border: 0;
        border-radius: 0;
    }
    .hero__annonce span { padding-inline: 0; }

    /* « N1–N3 » touchait presque le bord de sa fiche à deux colonnes. */
    .chiffre__valeur { font-size: var(--t-xl); }
    /* Le trombone descend encore d'un cran sur téléphone, et les preuves
       passent en colonne : à trois éléments de largeurs inégales, le retour à
       la ligne donnait deux puis un, ce qui se lit comme une erreur. */
    .hero__visuel img { max-height: 116px; }
    .hero__preuves { flex-direction: column; gap: var(--e-2); }
    .hero__titre { margin-bottom: var(--e-4); }
    .hero__texte { margin-bottom: var(--e-5); }
    .hero__actions { margin-bottom: var(--e-5); }
    .hero__actions .btn { width: 100%; }

    /* L'en-tête de famille alignait la pastille et le titre sur une ligne, ce
       qui écrasait le titre contre le bord. Les deux s'empilent. */
    .famille__entete { flex-direction: column; align-items: flex-start; gap: var(--e-3); }
    .famille__mode { align-self: flex-start; }
    .famille__resume { flex: 1 1 auto; }

    /* Deux rem de rembourrage sur 390 px de large ne laissaient que 326 px de
       contenu utile par carte. */
    .bloc { padding: var(--e-5); }

    /* Les quatre fiches chiffrées en pleine largeur laissaient un grand vide à
       droite de chaque valeur. Deux colonnes les resserrent. */
    .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
    .chiffre { padding: var(--e-5) var(--e-4) var(--e-4); }
    .chiffre__libelle { font-size: var(--t-xs); }
    /* La silhouette est une forme, pas une lettre : à la hauteur de capitale
       elle devient méconnaissable aux tailles de téléphone. */
    .carte-fr { height: 1.15em; }

    .confiance { padding-block: var(--e-5); }
    .confiance__grille { justify-content: center; text-align: center; gap: var(--e-4); }
    .confiance__mention { padding-top: 0; }
    /* Ces badges portent leur propre texte : les réduire pour les faire tenir
       côte à côte le rendrait illisible, et les empiler à une largeur lisible
       donnait une bande de 805 px, soit un écran entier de contenu tertiaire
       juste après le hero. Ils défilent donc horizontalement, à une taille où
       ils se lisent. Le troisième dépasse volontairement du bord : c'est ce qui
       indique qu'il y a quelque chose à faire glisser. */
    .confiance__badges {
        display: flex;
        grid-template-columns: none;
        width: auto;
        max-width: 100%;
        gap: var(--e-3);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        /* Débord jusqu'aux bords de l'écran, le rembourrage rendant la marge. */
        margin-inline: calc(-1 * var(--e-5));
        padding-inline: var(--e-5);
        scroll-padding-inline: var(--e-5);
        scrollbar-width: none;
    }
    .confiance__badges::-webkit-scrollbar { display: none; }
    /* Le débord seul ne disait pas assez qu'il y avait à faire glisser : le bord
       droit s'estompe, ce qui se lit comme « la suite est par ici ». Le masque
       s'arrête net à gauche pour ne pas manger le premier badge. */
    @supports (mask-image: linear-gradient(to right, #000, transparent)) {
        .confiance__badges {
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 44px), transparent 100%);
        }
    }
    .confiance__badges picture { display: contents; }
    .confiance__badges img {
        flex: 0 0 auto;
        width: 200px;
        scroll-snap-align: start;
    }
    .famille__entete { gap: var(--e-2); }

    /* Trois colonnes de liens sur 320 px donnent des pistes de 88 px, où
       « Conseil & expertise » se casse en quatre lignes. Deux colonnes, et le
       gouffre vertical entre les groupes est resserré. */
    .pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5) var(--e-4); }
    .pied__accroche { max-width: none; }
}

/* -----------------------------------------------------------------------------
   Mouvement réduit
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }
    /* Ces éléments dépendent d'une bascule immédiate de visibility pour rester
       focalisables : on la sort de transition-property. */
    .nav__liens { transition-property: opacity, transform !important; }
    /* Mouvement réduit : plus de révélation du tout. `animation: none` est
       nécessaire en plus de l'opacité, sinon l'animation liée au défilement
       continue de piloter la propriété et écrase la valeur posée ici. */
    .a-reveler { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* -----------------------------------------------------------------------------
   Impression
   -------------------------------------------------------------------------- */
@media print {
    .entete, .burger, .hero__visuel, .btn { display: none; }
    body { color: #000; background: #fff; }
    .section--sombre { color: #000; background: #fff; }
    .a-reveler { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* -----------------------------------------------------------------------------
   Pages de contenu : mentions légales, confidentialité, support, erreurs
   -----------------------------------------------------------------------------
   Ces pages sont faites pour être lues, parfois longuement, et souvent parce
   qu'on y cherche une information précise. Le traitement est donc l'inverse de
   celui de l'accueil : pas d'aplat sombre, pas d'animation, une colonne étroite
   et une hiérarchie qui se parcourt à l'œil.

   Les titres restent en Black capitales, comme le veut la charte, mais à une
   taille bien inférieure : à l'échelle de l'accueil, douze sections numérotées
   deviendraient illisibles. */
.page {
    padding-block: calc(var(--hauteur-entete) + var(--e-8)) var(--e-9);
    background: var(--blanc);
}
.page__corps {
    /* 68 caractères de large : la mesure confortable pour du texte suivi. */
    max-width: 68ch;
}
.page__corps h1 {
    font-size: var(--t-xl);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    text-wrap: balance;
    margin-bottom: var(--e-3);
}
.page__maj {
    margin-bottom: var(--e-7);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--texte-doux);
}
.page__corps h2 {
    margin-top: var(--e-7);
    margin-bottom: var(--e-3);
    padding-top: var(--e-4);
    border-top: 2px solid var(--gris);
    font-size: var(--t-md);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.005em;
}
.page__corps h3 {
    margin-top: var(--e-5);
    margin-bottom: var(--e-2);
    font-size: var(--t-base);
    font-weight: 800;
}
.page__corps p { margin-bottom: var(--e-4); }
.page__corps p:last-child { margin-bottom: 0; }
.page__corps ul, .page__corps ol {
    margin-bottom: var(--e-4);
    padding-left: var(--e-5);
    list-style: disc;
}
.page__corps ol { list-style: decimal; }
.page__corps li { margin-bottom: var(--e-2); }
/* Les liens d'un texte de loi doivent se voir comme des liens : le soulignement
   ne repose pas sur la couleur seule, qui ne suffit pas au critère 1.4.1. */
.page__corps a:not(.btn) {
    color: var(--bleu);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
}
.page__corps a:not(.btn):hover { text-decoration-thickness: 2px; }
.page__corps strong { font-weight: 700; }
/* Les tableaux des politiques débordent sur téléphone sans conteneur qui défile. */
.page__corps table {
    width: 100%;
    margin-bottom: var(--e-4);
    border-collapse: collapse;
    font-size: var(--t-sm);
}
.page__corps th, .page__corps td {
    padding: var(--e-3);
    text-align: left;
    border-bottom: 1px solid var(--gris);
}
.page__corps th { font-weight: 800; }
.page__corps .btn { margin-top: var(--e-6); }

/* Le 404 et le support se terminent par une action, parfois deux. Elles se
   rangent sur une ligne et retombent l'une sous l'autre quand la place manque.
   La marge est portée par le groupe, plus par chaque bouton. */
.page__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-3) var(--e-4);
    margin-top: var(--e-6);
}
.page__actions .btn { margin-top: 0; }
/* Précision posée à côté d'un bouton : ce qu'on télécharge, sous quelle forme. */
.page__mention {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    font-size: var(--t-sm);
    color: var(--texte-doux);
}
.page__mention img { width: 24px; height: 24px; }

/* Marche à suivre : la numérotation est un aplat vert, comme les pastilles de
   la page d'accueil, et non le chiffre nu de la liste ordonnée. Le compteur est
   celui de la liste : rien n'est écrit à la main dans le balisage. Le nom
   `.etapes` est déjà pris par la frise de l'approche, d'où `.marche`. */
.marche {
    list-style: none;
    padding-left: 0;
    counter-reset: marche;
    display: grid;
    gap: var(--e-4);
}
.page__corps .marche li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--e-3);
    align-items: baseline;
    margin-bottom: 0;
    counter-increment: marche;
}
.marche li::before {
    content: counter(marche);
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--r-pilule);
    background: var(--vert);
    color: #000;
    font-size: var(--t-xs);
    font-weight: 900;
    /* La pastille est alignée sur la première ligne du texte, pas sur sa base :
       sans ce décalage elle flotte deux pixels trop haut. */
    transform: translateY(0.35em);
}

@media (max-width: 640px) {
    .page { padding-block: calc(var(--hauteur-entete) + var(--e-6)) var(--e-8); }
    .page__corps h2 { margin-top: var(--e-6); }
}

/* -----------------------------------------------------------------------------
   Notification
   -------------------------------------------------------------------------- */
/* Décalée du bord droit pour ne pas recouvrir un éventuel bouton flottant. */
.notification {
    position: fixed;
    right: var(--e-5);
    bottom: var(--e-5);
    z-index: 300;
    display: flex;
    align-items: center;
    gap: var(--e-4);
    max-width: min(30rem, calc(100vw - 3rem));
    padding: var(--e-4) var(--e-5);
    border-radius: var(--r-md);
    box-shadow: var(--ombre-2);
    font-size: var(--t-sm);
    font-weight: 600;
    animation: notif-entree var(--duree) var(--courbe);
}
.notification--succes { background: var(--vert); color: #000; }
/* Le rouge n'est pas dans la charte : une erreur se signale en bleu profond,
   avec un libellé explicite. La couleur ne porte jamais seule l'information. */
.notification--erreur { background: var(--bleu); color: var(--blanc); }
.notification__fermer {
    flex: none;
    width: 28px;
    height: 28px;
    font-size: 1.4rem;
    line-height: 1;
    border-radius: var(--r-pilule);
    color: inherit;
}
.notification__fermer:hover { background: rgba(0, 0, 0, 0.12); }
.notification--erreur .notification__fermer:hover { background: rgba(255, 255, 255, 0.18); }

@keyframes notif-entree {
    from { transform: translateY(12px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@media (max-width: 640px) {
    .notification { left: var(--e-4); right: var(--e-4); max-width: none; }
}

/* -----------------------------------------------------------------------------
   Cible tactile du numéro de téléphone
   -----------------------------------------------------------------------------
   WCAG 2.2, critère 2.5.8. Le lien du bas de page mesurait 19 px de haut : il
   est seul sur sa ligne, l'exception « en ligne » ne s'applique pas. Le
   remplissage vertical l'amène au minimum exigible. À reporter dans
   clippit.css, le défaut existe aussi sur le site en ligne.
   -------------------------------------------------------------------------- */
.pied__bas a {
    display: inline-block;
    padding-block: 0.2rem;
}
/* Sur téléphone, ce numéro est le seul lien de sa ligne et se touche au pouce. */
@media (max-width: 960px) {
    .pied__bas a { padding-block: 0.6rem; }
}

/* -----------------------------------------------------------------------------
   Sélecteur de langue
   -----------------------------------------------------------------------------
   Posé à côté du bouton d'ouverture du menu et non dedans : sur téléphone le
   menu est replié par défaut, un sélecteur rangé à l'intérieur serait
   invisible pour qui ne l'ouvre pas. Deux lettres, un contour, la même
   grammaire que les boutons du bandeau.

   C'est un lien, pas un bouton : les deux versions de la page ont chacune leur
   URL, et un lien s'ouvre dans un onglet, se copie et se met en favori.
   -------------------------------------------------------------------------- */
.langue {
    display: grid;
    place-items: center;
    min-width: 44px;
    height: 44px;   /* la cible tactile recommandée pour un bouton isolé */
    margin-left: auto;
    padding-inline: 0.7rem;
    background: none;
    color: var(--blanc);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--r-pilule);
    font: inherit;
    font-size: var(--t-xs);
    font-weight: 900;
    letter-spacing: 0.08em;
    transition: border-color var(--duree), color var(--duree), background-color var(--duree);
}
.langue:hover {
    color: var(--vert);
    border-color: var(--vert);
    background: rgba(255, 255, 255, 0.06);
}

/* Le bandeau répartit ses enfants aux extrémités. Avec un quatrième enfant, le
   bouton partait seul tout à droite, séparé des actions par un vide de deux
   cents pixels. C'est le bloc des liens qui pousse désormais, et le bouton se
   range juste après « Nous parler ». */
@media (min-width: 961px) {
    .nav__liens { margin-left: auto; }
    .langue { margin-left: var(--e-5); }
}
@media (max-width: 960px) {
    .langue { margin-left: auto; margin-right: var(--e-3); }
}

/* -----------------------------------------------------------------------------
   Cartes métiers dépliables, sur téléphone seulement
   -----------------------------------------------------------------------------
   Les onze cartes déroulées faisaient à elles seules quatre mille deux cents
   pixels sur un téléphone, soit cinq écrans pour une section qu'on parcourt
   d'abord des yeux. Sur téléphone, elles se replient donc sur leur titre : la
   section devient une liste de onze intitulés que le pouce ouvre à la demande.

   Le repli est un `<details>` : le balisage porte `open`, donc sans JavaScript
   et sur grand écran tout est déplié, exactement comme avant. C'est le script
   qui referme, et seulement sous 640 px.

   Sur grand écran l'en-tête n'est pas une commande : le chevron disparaît et le
   pointeur ne le désigne pas. La bascule au clavier reste possible, ce qui est
   sans conséquence : un `<details>` rouvert d'une touche se referme de la même.
   -------------------------------------------------------------------------- */
@media (min-width: 641px) {
    .bloc > .bloc__entete { pointer-events: none; }
}

@media (max-width: 640px) {
    .bloc > .bloc__entete { cursor: pointer; }
    /* Le chevron est un carré tourné de 45 degrés, sans balise ni image, dans la
       couleur héritée du titre : il suit donc les cartes bleues et vertes. */
    .bloc > .bloc__entete::after {
        content: '';
        width: 9px;
        height: 9px;
        flex: none;
        margin-left: auto;
        margin-right: 3px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        opacity: 0.55;
        transform: translateY(-2px) rotate(45deg);
        transition: transform var(--duree) var(--courbe), opacity var(--duree);
    }
    .bloc[open] > .bloc__entete::after { transform: translateY(2px) rotate(-135deg); opacity: 1; }
    /* Repliée, la carte n'est plus qu'une ligne : son rembourrage se resserre et
       le titre garde une hauteur de cible confortable. */
    .bloc { padding: var(--e-4) var(--e-5); }
    .bloc > .bloc__entete { min-height: 52px; }
    /* L'angle de survol n'a pas de sens au doigt, et il tombait sur le chevron. */
    .bloc::after { content: none; }
    /* La sous-grille aligne les cartes d'une même rangée. Sur téléphone il n'y en
       a qu'une par rangée, donc rien à aligner, et une carte repliée réservait
       quand même les lignes de son corps : trente-deux pixels de vide sous son
       titre. Les cartes redeviennent des blocs ordinaires, ce qui rend au
       `<details>` son repli natif, et l'espacement repasse par des marges. */
    .grille > .bloc { display: block; }
    .bloc > p, .bloc > .bloc__bulles { margin-top: var(--e-3); }
    .bloc__bulles { margin-top: var(--e-3); }
}

/* -----------------------------------------------------------------------------
   Appel à l'action flottant, sur téléphone
   -----------------------------------------------------------------------------
   Sur téléphone, « Nous parler » est rangé dans le menu replié : sur une page de
   vingt mille pixels, plus rien ne permettait de nous écrire sans remonter tout
   en haut. La pastille apparaît une fois le hero passé et s'efface sur la
   section de contact et sur le pied, où elle ferait doublon.

   Elle est posée à droite, au-dessus de la barre de gestes, et laisse la gauche
   libre : c'est là que le bandeau de consentement se pose. Tant que ce dernier
   attend une réponse, la pastille s'efface complètement.
   -------------------------------------------------------------------------- */
.appel {
    position: fixed;
    z-index: 130;
    right: max(var(--e-4), env(safe-area-inset-right));
    bottom: max(var(--e-4), env(safe-area-inset-bottom));
    display: none;
    align-items: center;
    gap: var(--e-2);
    min-height: 48px;
    padding: 0.7rem 1.2rem;
    background: var(--vert);
    color: #000;
    border-radius: var(--r-pilule);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
    font-size: var(--t-xs);
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    /* Masquée par défaut, y compris sans JavaScript : le script pose l'attribut
       de visibilité, et lui seul sait où l'on en est dans la page. */
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity var(--duree), transform var(--duree) var(--courbe);
}
.appel svg { width: 16px; height: 16px; flex: none; }
.appel[data-visible="true"] {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
@media (max-width: 640px) {
    .appel { display: inline-flex; }
}
/* Le bandeau de consentement occupe le bas de l'écran sur téléphone : les deux
   se recouvriraient. La réponse d'abord, la sollicitation ensuite. */
:root[data-consentement="demande"] .appel {
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .appel { transition: opacity var(--duree); transform: none; }
    .appel[data-visible="true"] { transform: none; }
}

/* -----------------------------------------------------------------------------
   Bandeau de consentement à la mesure d'audience
   -----------------------------------------------------------------------------
   Il est posé en bas à gauche, hors du chemin de lecture, et non en travers de
   la page : le visiteur doit pouvoir lire avant de répondre. Les deux boutons
   ont la même taille, refuser ne doit pas être plus difficile qu'accepter.

   Le panneau reprend la grammaire du menu du bandeau : fond bleu nuit, filet
   clair, coins arrondis de la charte.
   -------------------------------------------------------------------------- */
.mesure {
    position: fixed;
    z-index: 200;
    left: var(--e-4);
    bottom: var(--e-4);
    width: min(420px, calc(100vw - 2 * var(--e-4)));
    display: grid;
    gap: var(--e-4);
    padding: var(--e-5);
    background: var(--bleu-950);
    color: var(--blanc);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--r-md);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}
.mesure__titre {
    font-size: var(--t-xs);
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vert);
}
.mesure__texte {
    margin-top: var(--e-2);
    font-size: var(--t-sm);
    color: var(--texte-sombre-fond);
    text-wrap: pretty;
}
/* Ce lien est seul dans son paragraphe : l'exception « lien en ligne » du critère
   2.5.8 ne le couvre pas, et il était haut de 22 px. Le remplissage vertical le
   porte à 33 px. */
.mesure__texte a {
    display: inline-block;
    padding-block: 0.35rem;
    color: var(--blanc);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.mesure__actions { display: flex; flex-wrap: wrap; gap: var(--e-3); }
/* Les deux boutons occupent la même largeur : aucune des deux réponses n'est
   mise en avant par sa taille. */
.mesure__actions .btn { flex: 1 1 8rem; min-height: 44px; font-size: var(--t-xs); }

/* Le bouton de révocation, sur la page des règles de confidentialité. */
.page__corps .mesure-choix { margin-top: var(--e-4); }

@media (max-width: 640px) {
    .mesure {
        left: var(--e-3);
        right: var(--e-3);
        bottom: var(--e-3);
        width: auto;
        padding: var(--e-4);
    }
}

/* Zone sûre des téléphones à encoche. En paysage, le bandeau fixe et le panneau
   du consentement passaient sous l'arrondi de l'écran et sous la barre de
   gestes : `max()` garde l'espacement de la charte quand il n'y a pas
   d'encoche, et l'augmente quand il y en a une. */
@supports (padding: env(safe-area-inset-left)) {
    .entete .nav { padding-inline: max(var(--e-5), env(safe-area-inset-left)) max(var(--e-5), env(safe-area-inset-right)); }
    .mesure {
        left: max(var(--e-4), env(safe-area-inset-left));
        bottom: max(var(--e-4), env(safe-area-inset-bottom));
    }
    @media (max-width: 640px) {
        .mesure {
            left: max(var(--e-3), env(safe-area-inset-left));
            right: max(var(--e-3), env(safe-area-inset-right));
            bottom: max(var(--e-3), env(safe-area-inset-bottom));
        }
    }
}

/* -----------------------------------------------------------------------------
   Espace client, menu déroulant
   -----------------------------------------------------------------------------
   Les trois outils clients occupaient une section entière de la page d'accueil,
   entre l'approche et les références. Ils n'y étaient à leur place ni pour un
   prospect, qui n'en a rien à faire, ni pour un client, qui les cherche en haut
   à droite comme sur n'importe quel service. Ils passent donc derrière le
   bouton du bandeau.

   Deux comportements selon la largeur. Sur grand écran, un panneau flottant
   sous le bouton. Sur téléphone, le bandeau se replie déjà dans un menu : le
   panneau s'y déplie dans le flux, sans position absolue, sinon il sortirait de
   la colonne du menu.
   -------------------------------------------------------------------------- */
.client { position: relative; }
.client__bouton {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
    font: inherit;
}
.client__chevron {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    transition: transform var(--duree) var(--courbe);
}
.client__bouton[aria-expanded='true'] .client__chevron { transform: rotate(180deg); }

.client__menu {
    position: absolute;
    z-index: 120;
    top: calc(100% + var(--e-3));
    right: 0;
    width: min(320px, calc(100vw - 2 * var(--e-5)));
    display: grid;
    gap: 2px;
    padding: var(--e-2);
    background: var(--bleu-950);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--r-md);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}
.client__menu a {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--e-3);
    align-items: center;
    padding: var(--e-3);
    border-radius: var(--r-sm);
    color: var(--blanc);
    transition: background-color var(--duree);
}
.client__menu a:hover { background: rgba(255, 255, 255, 0.08); }
.client__menu b { display: block; font-size: var(--t-sm); font-weight: 700; }
.client__menu small {
    display: block;
    margin-top: 0.1rem;
    font-size: var(--t-xs);
    color: var(--texte-sombre-fond);
}
.client__icone {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.09);
    color: var(--vert);
}
.client__icone svg { width: 19px; height: 19px; }

@media (max-width: 960px) {
    /* Dans le menu replié, la position absolue ferait sortir le panneau de la
       colonne. Il se déplie donc dans le flux, sous son bouton. */
    .client__menu {
        position: static;
        width: auto;
        margin-top: var(--e-2);
        box-shadow: none;
        background: rgba(255, 255, 255, 0.05);
    }
}