/* ============================================================
   styles.css — socle du site vitrine

   Vanilla CSS, sans étape de build, mobile-first.
   Media queries en min-width UNIQUEMENT.
   Propriété des zones : voir CONVENTIONS.md §2.
   ============================================================ */

/* ============================================================
   DEBUT DES TOKENS — ZONE DU DESIGNER

   Seul le designer modifie ce bloc (voir CONVENTIONS.md §2), à
   partir de la direction esthétique du cahier des charges (§6).
   Les valeurs ci-dessous sont des valeurs de référence : sobres,
   contrastées (WCAG AA), à personnaliser pour chaque client.
   ============================================================ */
:root {
  /* --- Palette de Magali Almeida, telle quelle ---
     Reprise de sa planche d'identité. Ces six valeurs ne s'inventent
     pas et ne se retouchent pas : elles lui appartiennent. On ne s'en
     sert jamais directement dans les règles — toujours via un rôle. */
  --jaune: #ffd200;         /* énergie, optimisme, capacité d'action */
  --turquoise: #0fafc1;     /* fraîcheur, communication, dynamisme */
  --anthracite: #273033;    /* professionnalisme, stabilité, fiabilité */
  --menthe: #c9ebdd;        /* écoute, proximité, accompagnement humain */
  --blanc-teinte: #f7f5f2;  /* simplicité, clarté, respiration */
  --noir: #111111;          /* lisibilité, assurance, sobriété */

  /* Deux teintes dérivées, nécessaires au seul bandeau anthracite.
     Elles n'ajoutent aucune couleur : ce sont des éclaircissements. */
  --anthracite-clair: #323e42;  /* cartes posées sur fond anthracite */
  --gris-clair: #b9c4c7;        /* texte secondaire sur fond anthracite */

  /* --- DEUX RÈGLES DE COULEUR NON NÉGOCIABLES ---

     1. JAMAIS de texte blanc sur turquoise : 2,65:1, très en dessous
        du minimum lisible. Sur fond turquoise, le texte est en
        anthracite (5,09:1).
     2. JAMAIS de texte turquoise sur fond clair : 2,44:1. Le turquoise
        est une couleur de SURFACE et de FILET, jamais de texte sur
        clair. Les liens sont en anthracite.

     Tous les couples ci-dessous ont été mesurés et passent WCAG AA. */

  /* --- Couleurs par rôle (contexte clair, par défaut) --- */
  --couleur-fond: var(--blanc-teinte);   /* fond de page */
  --couleur-surface: #ffffff;            /* cartes et encadrés posés dessus */
  --couleur-texte: var(--noir);          /* texte courant — 17,35:1 */
  --couleur-texte-attenue: #4a585c;      /* textes secondaires — 6,79:1 */
  --couleur-accent: var(--anthracite);   /* liens et éléments forts — 12,40:1 */
  --couleur-texte-sur-accent: var(--blanc-teinte);
  --couleur-bordure: #e2ddd6;            /* filets et contours */
  --couleur-filet: var(--turquoise);     /* filet de citation : surface, jamais du texte */
  --couleur-erreur: #a13c2d;             /* messages d'erreur — 6,03:1 */

  /* L'étiquette de section se pose sur une teinte de sa propre couleur
     de texte, pas sur une surface opaque : elle se replace donc toute
     seule sur n'importe quel bandeau, sans contour à dessiner. */
  --couleur-etiquette-fond: rgb(39 48 51 / 0.1);

  /* Bouton principal : jaune à texte noir (13,01:1). Sa charte dit du
     jaune qu'il porte « la capacité d'action » — c'est exactement le
     rôle d'un bouton. */
  --couleur-bouton: var(--jaune);
  --couleur-texte-sur-bouton: var(--noir);

  /* --- Typographies (piles système : AUCUNE police distante) ---
     Arbitrage du 12 août : performance et référencement d'abord. La
     typographie de sa planche pourra être reprise plus tard. */
  --police-texte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --police-titre: var(--police-texte);

  /* --- Échelle typographique ---
     Toutes les tailles de titre sont fluides, de 320 px à ~1200 px de
     large. Ce qui hiérarchise une page, ce n'est pas la taille d'un
     titre : c'est l'ÉCART entre deux niveaux. Un h2 à 26 px au-dessus
     d'un texte à 16 px ne hiérarchise rien — la page se lit alors comme
     un document, pas comme une composition. Les écarts ci-dessous sont
     ceux de la piste retenue. */
  --taille-s: 0.875rem;
  --taille-m: 1rem;
  --taille-l: 1.25rem;
  --taille-xl: clamp(1.75rem, 1.1rem + 2.6vw, 2.5rem);    /* h2 : 28 → 40 px */
  --taille-xxl: clamp(2.25rem, 1.25rem + 4.4vw, 3.75rem); /* h1 : 36 → 60 px */

  /* Les chiffres de repère sont un objet graphique, pas un titre : ils
     ont leur propre taille, plus grande que celle d'un h2. C'est le
     moment le plus mémorable de la page d'accueil. */
  --taille-chiffre: clamp(2.5rem, 1.6rem + 3.4vw, 3rem);  /* 40 → 48 px */

  /* Une citation longue se lit mieux au corps du texte qu'en gros : les
     témoignages de Magali font plusieurs centaines de signes. */
  --taille-citation: 1.0625rem;

  /* --- Échelle d'espacement ---
     Le pas 1 rem → 2 rem → 4 rem était trop grossier : tout retombait
     sur les trois mêmes valeurs et la page prenait un rythme unique. Le
     cran intermédiaire sert aux respirations à l'intérieur d'un bloc. */
  --espace-xs: 0.25rem;
  --espace-s: 0.5rem;
  --espace-m: 1rem;
  --espace-ml: 1.5rem;
  --espace-l: 2rem;
  --espace-xl: 4rem;

  /* Hauteur d'un bandeau et marge latérale du conteneur : fluides
     elles aussi. À 4 rem fixes, un bandeau paraît serré sur grand
     écran ; à 1 rem fixe, le texte colle aux bords du téléphone. */
  --espace-bandeau: clamp(3.5rem, 2rem + 5vw, 5.5rem);
  --gouttiere: 1.25rem;

  /* --- Rayons ---
     L'arrondi porte sur les OBJETS, jamais sur les bandeaux ni sur la
     typographie (tour 3, version A). Le bloc citation fait exception :
     filet net, sans arrondi. */
  --rayon-s: 0.25rem;
  --rayon-m: 0.75rem;   /* cartes, photo, encadrés */
  --rayon-gelule: 999px; /* boutons et étiquettes de section */

  /* --- Ombres ---
     Aucune. La direction retenue sépare par la COULEUR du bandeau et
     par l'arrondi de l'objet, jamais par une ombre portée : une ombre
     de plus sur une carte déjà bordée, et le site retombe dans le
     registre par défaut. Le token reste défini pour un besoin futur
     (menu déroulant, encart flottant), mais rien ne s'en sert. */
  --ombre-m: 0 0.125rem 0.75rem rgb(39 48 51 / 0.08);

  /* --- Conteneur --- */
  --largeur-conteneur: 68rem;
}
/* La gouttière s'élargit dès la tablette : c'est la seule règle hors
   :root de la zone des tokens, et elle ne fait que changer une valeur. */
@media (min-width: 48rem) {
  :root { --gouttiere: 2.5rem; }
}
/* ============================================================
   FIN DES TOKENS
   ============================================================ */

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

* {
  margin: 0;
}

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

/* ------------------------------------------------------------
   Base
   ------------------------------------------------------------ */
body {
  font-family: var(--police-texte);
  font-size: var(--taille-m);
  line-height: 1.6;
  color: var(--couleur-texte);
  background-color: var(--couleur-fond);
}

h1,
h2,
h3 {
  font-family: var(--police-titre);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--espace-m);
  /* Répartit les mots sur les lignes plutôt que de laisser un mot seul
     en bas d'un titre. C'est le détail qui distingue le plus une mise
     en page soignée d'une mise en page par défaut. */
  text-wrap: balance;
}

/* Aux grandes tailles, l'interlettrage par défaut d'une police système
   paraît lâche et l'interligne de 1,2 creuse un trou entre les lignes
   d'un même titre. On resserre les deux : c'est ce qui distingue un
   titre composé d'un titre simplement grossi. */
h1,
h2 {
  letter-spacing: -0.025em;
  line-height: 1.1;
  /* Garde-fou : à 36 px sur un écran de 320 px, « Précomptabilité, »
     occupe 274 px des 280 px disponibles. Ça passe, mais de peu — et
     le français produit facilement des mots plus longs. Cette règle ne
     fait rien tant qu'un mot tient dans sa ligne. */
  overflow-wrap: break-word;
}

h1 {
  font-size: var(--taille-xxl);
  /* Un titre de héros qui court sur toute la largeur ne fait plus bloc.
     Borné en signes, il se casse en 2 ou 3 lignes serrées. */
  max-width: 18ch;
}

h2 {
  font-size: var(--taille-xl);
  max-width: 28ch;
}

h3 { font-size: var(--taille-l); }

p {
  max-width: 65ch;
  margin-bottom: var(--espace-m);
  /* Évite qu'un paragraphe se termine par un mot isolé. */
  text-wrap: pretty;
}

/* Deux paragraphes qui se suivent respirent un peu plus que des lignes
   d'un même paragraphe, mais moins qu'un changement de bloc. */
p + p { margin-top: calc(var(--espace-m) * -0.25); }

a { color: var(--couleur-accent); }

a:hover { text-decoration-thickness: 0.15em; }

:focus-visible {
  outline: 2px solid var(--couleur-accent);
  outline-offset: 2px;
  border-radius: var(--rayon-s);
}

::selection {
  background: var(--jaune);
  color: var(--noir);
}

/* Les ancres ne collent pas au bord haut de la fenêtre. */
[id] { scroll-margin-top: var(--espace-l); }

/* Adoucit les changements d'état, sans animer quoi que ce soit d'autre.
   Neutralisé pour qui a demandé moins d'animations dans son système. */
a,
.bouton,
.bouton-menu {
  transition: background-color 0.15s ease, color 0.15s ease,
              border-color 0.15s ease, opacity 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------
   Primitives de mise en page
   ------------------------------------------------------------ */
.conteneur {
  max-width: var(--largeur-conteneur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section { padding-block: var(--espace-xl); }

/* ------------------------------------------------------------
   Bandeaux — LE MÉCANISME CENTRAL DU SITE

   Chaque section occupe toute la largeur et porte sa propre
   couleur de fond. Le changement de couleur est le SEUL
   séparateur : pas de trait, pas d'ombre, pas d'arrondi sur le
   bandeau lui-même (tour 3, version A).

   Une variante ne fait que redéfinir les tokens de couleur pour
   ce qu'elle contient : les composants n'ont donc jamais besoin
   de connaître la couleur du bandeau où ils sont posés. C'est ce
   qui permet de poser la même carte sur menthe ou sur anthracite
   sans écrire une seule règle de plus.

   Ordre d'alternance recommandé sur une page, pour que le blanc
   teinté fasse respirer entre deux couleurs saturées :
   clair → menthe → clair → anthracite → clair → jaune.
   ------------------------------------------------------------ */
.bandeau {
  padding-block: var(--espace-bandeau);
  background: var(--couleur-fond);
  color: var(--couleur-texte);
}

/* Les blocs qui suivent le titre d'un bandeau prennent tous la même
   respiration : c'est elle qui donne son rythme régulier à la page.
   Ajoutée au bas de marge du titre, elle fait 2,5 rem. */
.grille,
.reperes,
.outils,
.etapes {
  margin-top: var(--espace-ml);
}

/* Blanc pur : la respiration la plus neutre, entre deux couleurs. */
.bandeau--blanc {
  --couleur-fond: #ffffff;
  --couleur-surface: var(--blanc-teinte);
}

.bandeau--menthe {
  --couleur-fond: var(--menthe);
  /* Blanc teinté plutôt que blanc pur : sur la menthe, le blanc pur
     découpe la carte trop durement. */
  --couleur-surface: var(--blanc-teinte);
  --couleur-texte-attenue: #4a585c;   /* 5,78:1 sur menthe */
  --couleur-bordure: #a9d6c6;
  /* Turquoise sur menthe, deux couleurs froides et claires : le filet
     disparaît. Sur ce bandeau, il se donne en anthracite. */
  --couleur-filet: var(--anthracite);
}

/* Le bandeau foncé : c'est lui qui donne sa crédibilité à la page.
   L'accent y passe au jaune, seul lien lisible sur ce fond. */
.bandeau--anthracite {
  --couleur-fond: var(--anthracite);
  --couleur-surface: var(--anthracite-clair);
  --couleur-texte: var(--blanc-teinte);      /* 12,40:1 */
  --couleur-texte-attenue: var(--gris-clair); /* 7,57:1 */
  --couleur-accent: var(--jaune);            /* 9,29:1 */
  --couleur-texte-sur-accent: var(--noir);
  --couleur-bordure: #46545a;
  --couleur-filet: var(--turquoise);
  --couleur-etiquette-fond: rgb(247 245 242 / 0.14);
}

.bandeau--jaune {
  --couleur-fond: var(--jaune);
  --couleur-surface: #ffffff;
  --couleur-texte: var(--noir);              /* 13,01:1 */
  --couleur-texte-attenue: var(--anthracite);
  --couleur-bordure: #d9b400;
  /* Le turquoise ne se voit pas sur le jaune : le filet passe en
     anthracite, comme le reste du texte de ce bandeau. */
  --couleur-filet: var(--anthracite);
  /* Un bouton jaune sur fond jaune ne se verrait pas. */
  --couleur-bouton: var(--anthracite);
  --couleur-texte-sur-bouton: var(--blanc-teinte);
}

/* Turquoise : texte anthracite OBLIGATOIRE (voir les tokens). */
.bandeau--turquoise {
  --couleur-fond: var(--turquoise);
  --couleur-surface: #ffffff;
  --couleur-texte: var(--anthracite);        /* 5,09:1 */
  --couleur-texte-attenue: var(--anthracite);
  --couleur-bordure: #0c93a2;
  --couleur-filet: var(--anthracite);
}

.grille {
  display: grid;
  gap: var(--espace-l);
}

@media (min-width: 48rem) {
  .grille--deux { grid-template-columns: repeat(2, 1fr); }
  .grille--trois { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {
  .grille--trois { grid-template-columns: repeat(3, 1fr); }
}

/* Élément retiré de l'écran mais présent pour les technologies
   d'assistance. Sert aussi, à l'inverse, au champ piège du
   formulaire (invisible pour tous). */
.hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Lien d'évitement : hors écran, visible uniquement au focus. */
.lien-evitement {
  position: absolute;
  top: var(--espace-s);
  left: var(--espace-s);
  z-index: 10;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  padding: var(--espace-s) var(--espace-m);
  background: var(--couleur-accent);
  color: var(--couleur-texte-sur-accent);
  border-radius: var(--rayon-s);
}

.lien-evitement:focus {
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}

/* ------------------------------------------------------------
   En-tête et menu
   ------------------------------------------------------------ */
.entete-site {
  background: #ffffff;
  border-bottom: 1px solid var(--couleur-bordure);
}

.entete-interieur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-m);
  padding-block: var(--espace-m);
}

.logo {
  font-size: var(--taille-l);
  font-weight: 700;
  color: var(--couleur-texte);
  text-decoration: none;
}

.bouton-menu {
  font: inherit;
  padding: var(--espace-s) var(--espace-m);
  background: #ffffff;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-gelule);
  cursor: pointer;
}

/* Mobile : le menu est caché tant que le bouton ne l'ouvre pas. */
.menu-principal {
  display: none;
  flex-basis: 100%;
}

.menu-principal.est-ouvert { display: block; }

.menu-liste {
  list-style: none;
  padding: var(--espace-m) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--espace-s);
}

.menu-liste a {
  display: block;
  padding: var(--espace-s);
  color: var(--couleur-texte);
  text-decoration: none;
}

.menu-liste a:hover { color: var(--couleur-accent); }

.menu-liste a[aria-current="page"] {
  font-weight: 700;
  color: var(--couleur-accent);
}

@media (min-width: 48rem) {
  .bouton-menu { display: none; }

  .menu-principal {
    display: block;
    flex-basis: auto;
  }

  .menu-liste {
    flex-direction: row;
    align-items: center;
    gap: var(--espace-l);
    padding: 0;
  }
}

/* ------------------------------------------------------------
   Boutons
   ------------------------------------------------------------ */
/* Boutons en gélule : l'un des « objets arrondis » de la version A. */
.bouton {
  display: inline-block;
  padding: var(--espace-s) var(--espace-l);
  background: var(--couleur-bouton);
  color: var(--couleur-texte-sur-bouton);
  border: 2px solid var(--couleur-bouton);
  border-radius: var(--rayon-gelule);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.bouton:hover { opacity: 0.9; }

/* Le secondaire se dessine en creux, dans la couleur du texte
   courant : il reste lisible sur n'importe quel bandeau. */
.bouton--secondaire {
  background: transparent;
  color: var(--couleur-texte);
  border-color: var(--couleur-texte);
}

.bouton--secondaire:hover {
  opacity: 1;
  background: var(--couleur-texte);
  color: var(--couleur-fond);
}

/* Deux gélules côte à côte se valent : la page n'a plus d'action n°1.
   Quand le bouton secondaire SUIT le bouton principal dans un bloc
   d'appel, il se donne en lien souligné — c'est la hiérarchie de la
   piste retenue. Seul (« Voir le détail des prestations »), il garde
   sa gélule : là, il est l'action de la section. */
.hero-actions .bouton + .bouton--secondaire {
  padding-inline: 0;
  background: transparent;
  border-color: transparent;
  text-decoration: underline;
  text-decoration-color: var(--couleur-filet);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

.hero-actions .bouton + .bouton--secondaire:hover {
  background: transparent;
  color: var(--couleur-texte);
  text-decoration-color: currentColor;
}

/* ------------------------------------------------------------
   Étiquette de section (pastille)
   Un objet arrondi, repris de la version A : il annonce la
   section sans consommer un niveau de titre.
   ------------------------------------------------------------ */
/* Petite, en capitales très espacées, sur une teinte pleine et sans
   contour : à 14 px en casse normale et bordée, elle se lisait comme un
   champ de formulaire, pas comme un intitulé de section. */
.etiquette {
  display: inline-block;
  /* Serrée contre le titre qu'elle annonce : à un écart égal, l'œil ne
     sait plus si elle appartient à la section précédente ou à celle-ci. */
  margin-bottom: var(--espace-ml);
  padding: 0.4375rem 0.9375rem;
  background: var(--couleur-etiquette-fond);
  border-radius: var(--rayon-gelule);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Le titre qui suit une étiquette a déjà sa respiration au-dessus. */
.etiquette + h2 { margin-top: 0; }

/* ------------------------------------------------------------
   Bloc : héros
   ------------------------------------------------------------ */
.hero-accroche {
  font-size: var(--taille-l);
  color: var(--couleur-texte-attenue);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-m) var(--espace-l);
  margin-top: var(--espace-l);
}

/* Le héros pose le portrait à côté du texte à partir de la tablette. */
.hero-colonnes {
  display: grid;
  gap: var(--espace-l);
  align-items: center;
}

@media (min-width: 48rem) {
  .hero-colonnes { grid-template-columns: 3fr 2fr; }
}

/* Variante à aligner en haut. Le centrage vertical convient au héros,
   où le titre et la photo ont des hauteurs proches ; ailleurs, il fait
   flotter un paragraphe court au milieu d'une image haute, avec du vide
   au-dessus et en dessous. */
.hero-colonnes--haut { align-items: start; }

/* Les photos sont enveloppées dans <picture> pour proposer une version
   WebP avec le JPEG en secours. Sans la première règle, c'est <picture>
   qui devient l'élément de la grille au lieu de l'image, et
   .photo--portrait perd son « margin-inline-start: auto » : le portrait
   cesse d'être calé à droite de sa colonne. « display: contents » efface
   la boîte de <picture> et rend à l'image sa place dans la mise en page.

   LA SECONDE RÈGLE N'EST PAS FACULTATIVE. En effaçant <picture>, on
   expose TOUS ses enfants à la grille — y compris <source>, que le
   navigateur ne masque pas de lui-même. Mesuré le 12 août 2026 : le
   <source> prenait la deuxième colonne du héros (89 px de large, 0 de
   haut, donc invisible) et renvoyait la photo à la ligne du dessous,
   dans la colonne du texte. Le symptôme est un héros cassé sur grand
   écran, sans rien à l'écran qui explique pourquoi.

   Toute balise ajoutée un jour dans un <picture> tombera dans le même
   piège. Ajouter un second <source> (AVIF, par exemple) reste sans
   danger : la règle ci-dessous vise tous les <source>. */
picture { display: contents; }
picture > source { display: none; }

/* Photo : un objet, donc arrondie (version A) — pas un médaillon,
   la photo rectangulaire ayant été préférée au cercle. Pas d'ombre :
   l'arrondi suffit à en faire un objet posé. */
.photo {
  border-radius: var(--rayon-m);
}

/* Portrait de héros. Sans cadrage imposé, l'image dictait sa propre
   hauteur : elle devenait plus haute que le titre et poussait le
   bouton principal hors du premier écran. Cadre 4/5 borné, recentré
   sur le visage, et calé à droite de sa colonne. */
.photo--portrait {
  width: 100%;
  max-width: 22rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
  margin-inline-start: auto;
}

/* Image d'accompagnement, posée seule dans un bandeau. Sa largeur est
   bornée : à pleine largeur, une photo d'illustration prend le pas sur
   le texte qu'elle accompagne — et le moindre défaut s'y voit. */
.photo--secondaire {
  max-width: 35rem;
  margin-bottom: var(--espace-l);
}

/* ------------------------------------------------------------
   Bloc : citation (témoignage)

   EXCEPTION assumée à l'arrondi : filet vertical net sur fond nu,
   emprunté à la version B. Sur la citation, le trait net l'emporte
   — l'arrondi est un outil, pas une règle appliquée partout.
   ------------------------------------------------------------ */
.temoignage {
  padding-left: var(--espace-ml);
  border-left: 4px solid var(--couleur-filet);
}

/* Les témoignages de ses clientes font plusieurs centaines de signes :
   à 20 px, ils formaient un mur. Une citation longue se lit au corps du
   texte — c'est sa longueur qui lui donne son poids, pas sa taille. */
.temoignage p {
  font-size: var(--taille-citation);
  line-height: 1.6;
}

.temoignage footer {
  font-size: var(--taille-s);
  font-weight: 600;
  color: var(--couleur-texte-attenue);
}

/* ------------------------------------------------------------
   Bloc : services (cartes arrondies)
   ------------------------------------------------------------ */
/* Contour de 1 px PLUS ombre PLUS fond : c'est la carte par défaut
   qu'on voit partout, et elle ne dit rien du client. Ici, un seul
   geste — un filet épais en haut, dans ses couleurs — et la carte se
   pose sur le bandeau sans avoir besoin d'être détourée. */
.carte {
  padding: var(--espace-l);
  background: var(--couleur-surface);
  border-top: 6px solid var(--turquoise);
  border-radius: var(--rayon-m);
}

/* Le filet alterne d'une carte à l'autre : c'est le seul endroit du
   site où les deux couleurs vives se répondent. */
.carte:nth-child(2n) { border-top-color: var(--jaune); }

.carte p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------
   Bloc : repères chiffrés
   Trois chiffres et leur légende. Remplace le « mur de logos »
   que le contexte sectoriel proscrit : des faits, pas des insignes.
   ------------------------------------------------------------ */
.reperes {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--espace-m);
}

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

/* Chaque repère est posé sur sa propre surface : sur le bandeau
   anthracite, trois cartes claires qui portent le chiffre. C'est ce
   bloc qui donne son point d'accroche à la page d'accueil. */
.reperes li {
  padding: var(--espace-ml);
  background: var(--couleur-surface);
  border-radius: var(--rayon-m);
}

.repere-chiffre {
  display: block;
  margin-bottom: var(--espace-xs);
  /* Le chiffre prend la couleur d'accent du bandeau : jaune sur
     anthracite, anthracite sur fond clair. Jamais de jaune sur clair,
     qui ne serait pas lisible (1,6:1). */
  color: var(--couleur-accent);
  font-size: var(--taille-chiffre);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.repere-legende {
  display: block;
  color: var(--couleur-texte-attenue);
}

/* ------------------------------------------------------------
   Bloc : outils
   Le bloc de preuve le plus efficace du site. Les familles
   d'outils s'ancrent sur une même ligne de raccordement : un
   filet fin en tête de chaque colonne, interrompu par les
   gouttières, et un point à chaque départ — l'endroit où elle
   se branche sur l'environnement du client. Pas de pastilles ni
   de cartes : des colonnes réglées, on nomme, on ne décore pas.
   ------------------------------------------------------------ */
.outils {
  display: grid;
  gap: var(--espace-l);
}

@media (min-width: 48rem) {
  .outils { grid-template-columns: repeat(2, 1fr); }
}

/* Sur grand écran, deux colonnes laissaient la moitié droite du
   bandeau anthracite vide alors que les listes sont courtes. */
@media (min-width: 64rem) {
  .outils {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--espace-ml);
  }
}

.groupe-outils {
  position: relative;
  padding-top: var(--espace-m);
  border-top: 1px solid var(--couleur-bordure);
}

/* Le point de raccordement, posé à cheval sur le filet. Il prend
   la couleur du filet de citation : turquoise sur l'anthracite,
   une surface, jamais du texte. */
.groupe-outils::before {
  content: "";
  position: absolute;
  top: -0.25rem;
  left: 0;
  width: 0.5625rem;
  height: 0.5625rem;
  border-radius: 50%;
  background: var(--couleur-filet);
}

/* La catégorie s'écrit comme l'étiquette de section — petite, en
   capitales espacées — mais atténuée : ce sont les noms d'outils
   qui portent la lumière, pas les intitulés qui les rangent. */
.groupe-outils h3 {
  margin-bottom: var(--espace-s);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--couleur-texte-attenue);
}

/* À quatre colonnes, deux intitulés se cassent en deux lignes et
   pas les autres : on réserve deux lignes partout pour que les
   listes démarrent à la même hauteur. Sans effet ailleurs. */
@media (min-width: 64rem) {
  .groupe-outils h3 { min-height: 2lh; }
}

.liste-outils {
  list-style: none;
  padding: 0;
}

.liste-outils li { padding-block: var(--espace-s); }

.liste-outils li + li {
  border-top: 1px solid var(--couleur-bordure);
}

/* ------------------------------------------------------------
   Bloc : étapes numérotées (« comment ça se passe »)
   ------------------------------------------------------------ */
.etapes {
  list-style: none;
  counter-reset: etape;
  padding: 0;
  display: grid;
  gap: var(--espace-l);
}

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

.etapes li { counter-increment: etape; }

.etapes li::before {
  content: counter(etape);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--espace-s);
  background: var(--couleur-bouton);
  color: var(--couleur-texte-sur-bouton);
  border-radius: var(--rayon-gelule);
  font-weight: 700;
}

/* ------------------------------------------------------------
   Bloc : contact (coordonnées) et formulaires de l'éditeur en ligne
   ------------------------------------------------------------ */
.coordonnees p { margin-bottom: var(--espace-s); }

.formulaire { max-width: 36rem; }

.champ {
  display: grid;
  gap: var(--espace-xs);
  margin-bottom: var(--espace-m);
}

.champ label { font-weight: 600; }

.champ input,
.champ textarea {
  font: inherit;
  width: 100%;
  padding: var(--espace-s) var(--espace-m);
  color: var(--couleur-texte);
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-s);
}

.champ input:focus,
.champ textarea:focus {
  border-color: var(--couleur-accent);
  outline: 2px solid var(--couleur-accent);
  outline-offset: 1px;
}

.formulaire-note {
  font-size: var(--taille-s);
  color: var(--couleur-texte-attenue);
}

/* ------------------------------------------------------------
   Encadrés de réponse de l'éditeur en ligne (succès / erreurs)
   ------------------------------------------------------------ */
.encadre {
  margin-block: var(--espace-xl);
  padding: var(--espace-l);
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure);
  border-left: 4px solid var(--couleur-accent);
  border-radius: var(--rayon-m);
}

.encadre--erreur { border-left-color: var(--couleur-erreur); }

.encadre--erreur h1 { color: var(--couleur-erreur); }

/* ------------------------------------------------------------
   Bloc : page de texte suivi (mentions légales)

   Sur ces pages, les h2 ne sont pas des titres de bandeau mais des
   intertitres d'un document qu'on lit d'un bout à l'autre : à 40 px,
   ils écraseraient le texte qu'ils annoncent. On redéfinit le token
   pour ce conteneur — comme le fait une variante de bandeau — plutôt
   que d'écrire une seconde règle sur h2 qui entrerait en concurrence
   avec la première.
   ------------------------------------------------------------ */
.texte-suivi {
  --taille-xl: 1.375rem;
}

.texte-suivi h2 {
  max-width: none;
  margin-top: var(--espace-l);
  letter-spacing: -0.01em;
}

.texte-suivi p { max-width: 62ch; }

/* ------------------------------------------------------------
   Pied de page
   ------------------------------------------------------------ */
/* Le pied est le dernier bandeau de la page : il porte la classe
   .bandeau--anthracite dans le HTML, et hérite donc de ses tokens. */
.pied-site {
  padding-block: var(--espace-l);
  background: var(--couleur-fond);
  color: var(--couleur-texte);
  font-size: var(--taille-s);
}

.pied-site a { color: var(--couleur-texte); }

.pied-liste {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-m);
  margin-bottom: var(--espace-m);
}

.pied-copyright { margin-bottom: 0; }