/* MH WebConsulting — feuille de style principale
   Palette : encre #1A1D26 · bleu #4A86E8 · corail #EE7A5A
   Typo : Space Grotesk (titres) · Work Sans (texte) */

/* Polices hébergées localement (fichiers variables, sous-ensemble latin) :
   évite les allers-retours vers fonts.googleapis.com / fonts.gstatic.com. */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/space-grotesk-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/work-sans-variable.woff2') format('woff2');
}

:root {
  --encre: #1A1D26;
  --bleu: #4A86E8;
  --bleu-profond: #1E4E96;
  --corail: #EE7A5A;
  --corail-fonce: #E06547;
  --gris-page: #F7F8FA;
  --gris-bordure: #E4E7EC;
  --gris-bordure-clair: #EDEFF3;
  --gris-texte: #4B5563;
  --gris-texte-fonce: #374151;
  --gris-clair: #6B7280;
  --gris-doux: #9AA1AC;
  --titre: 'Space Grotesk', 'Segoe UI', sans-serif;
  --texte: 'Work Sans', 'Segoe UI', sans-serif;
  --largeur: 1180px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--texte);
  color: var(--encre);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--bleu-profond); text-decoration: none; }
a:hover { color: var(--corail); }

h1, h2, h3 { font-family: var(--titre); font-weight: 600; margin: 0; }
p { margin: 0; }

.conteneur { max-width: var(--largeur); margin: 0 auto; padding: 0 40px; }

/* ---------- Logo ---------- */
.logo { display: flex; align-items: center; gap: 12px; color: inherit; }
.logo img { height: 38px; width: auto; display: block; }
.logo span { font-family: var(--titre); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; white-space: nowrap; }

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--gris-bordure-clair);
}
.entete .conteneur {
  padding-top: 18px; padding-bottom: 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.entete .conteneur > * { min-width: 0; }
.nav { display: flex; align-items: center; gap: 30px; }
.nav a { font-size: 15px; color: var(--gris-texte); font-weight: 500; white-space: nowrap; }
.nav a:hover { color: var(--encre); }
.langues { display: flex; align-items: center; gap: 2px; padding: 3px; background: #F2F4F7; border-radius: 7px; }
.langues a { font-size: 13px; font-weight: 500; color: var(--gris-clair); padding: 6px 11px; border-radius: 5px; }
.langues a.actif { background: #fff; color: var(--encre); font-weight: 600; box-shadow: 0 1px 2px rgba(16,24,40,0.08); }

.bouton {
  display: inline-block; background: var(--corail); color: #fff;
  font-size: 16px; font-weight: 500; padding: 15px 28px;
  border-radius: 9px; white-space: nowrap; border: none; cursor: pointer;
  font-family: var(--texte);
}
.bouton:hover { background: var(--corail-fonce); color: #fff; }
.bouton--compact { font-size: 15px; padding: 11px 22px; }
.bouton--secondaire { background: #fff; border: 1px solid var(--gris-bordure); color: var(--encre); }
.bouton--secondaire:hover { background: #fff; border-color: var(--bleu); color: var(--encre); }
.bouton--sombre { background: var(--encre); }
.bouton--sombre:hover { background: #2B303C; }

.menu-mobile { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.menu-mobile span { display: block; width: 22px; height: 2px; background: var(--encre); margin: 4px 0; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff 0%, var(--gris-page) 100%); }
.hero::before {
  content: ''; position: absolute; right: -160px; top: -100px;
  width: 620px; height: 620px; border-radius: 50%;
  border: 90px solid rgba(74,134,232,0.07);
  animation: flotte 11s ease-in-out infinite;
}
.hero::after {
  content: ''; position: absolute; right: 240px; bottom: -70px;
  width: 230px; height: 230px; background: rgba(238,122,90,0.09); transform: rotate(45deg);
}
@keyframes flotte { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }

.hero .conteneur {
  position: relative; padding-top: 100px; padding-bottom: 110px;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center;
}
.hero-texte { display: flex; flex-direction: column; gap: 26px; }
.hero h1 { font-size: 56px; line-height: 1.06; letter-spacing: -0.025em; text-wrap: balance; }
.hero h1 .accent { color: var(--bleu); }
.hero-intro { font-size: 19px; line-height: 1.6; color: var(--gris-texte); max-width: 500px; text-wrap: pretty; }

.pastille {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  background: #fff; border: 1px solid var(--gris-bordure);
  padding: 7px 14px 7px 10px; border-radius: 100px;
  font-size: 13px; font-weight: 500; color: var(--gris-texte);
}
.pastille::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #22C55E; }

.actions { display: flex; gap: 12px; flex-wrap: wrap; }
.stack { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 10px; }
.stack-label { font-size: 13px; color: var(--gris-doux); font-weight: 500; }
.stack ul { display: flex; gap: 20px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.stack li { font-family: var(--titre); font-size: 16px; font-weight: 500; color: var(--gris-clair); }

.hero-visuel { display: flex; justify-content: center; }
.hero-visuel img { width: 380px; max-width: 100%; }

/* ---------- Bandeau ---------- */
.bandeau { border-bottom: 1px solid var(--gris-bordure-clair); }
.bandeau .conteneur {
  padding-top: 26px; padding-bottom: 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.bandeau p { display: flex; align-items: center; gap: 11px; font-size: 15px; font-weight: 500; color: var(--gris-texte-fonce); }
.losange { width: 9px; height: 9px; background: var(--corail); transform: rotate(45deg); flex: none; }

/* ---------- Sections ---------- */
.section { padding: 100px 0; }
.section--gris { background: var(--gris-page); }
.section--sombre { background: var(--encre); color: #fff; position: relative; overflow: hidden; }
.section--sombre::before {
  content: ''; position: absolute; left: -140px; bottom: -160px;
  width: 480px; height: 480px; border-radius: 50%; border: 70px solid rgba(74,134,232,0.13);
}
.section--sombre .conteneur { position: relative; }

.entete-section { display: flex; flex-direction: column; gap: 14px; max-width: 660px; margin-bottom: 52px; }
.surtitre { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bleu); font-weight: 600; }
.section--sombre .surtitre { color: var(--corail); }
.entete-section h2 { font-size: 42px; letter-spacing: -0.02em; line-height: 1.12; text-wrap: balance; }
.entete-section p { font-size: 17px; line-height: 1.65; color: var(--gris-texte); text-wrap: pretty; }
.section--sombre .entete-section p { color: #B6BDC8; }

/* ---------- Cartes services ---------- */
.grille-services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.carte {
  border: 1px solid var(--gris-bordure); border-radius: 14px; padding: 34px 30px;
  display: flex; flex-direction: column; gap: 16px; background: #fff;
  transition: border-color .2s;
}
.carte:hover { border-color: var(--bleu); }
.carte h3 { font-size: 21px; }
.carte p { font-size: 15px; line-height: 1.65; color: var(--gris-texte); text-wrap: pretty; }
.icone {
  width: 46px; height: 46px; border-radius: 11px; background: #EEF4FE;
  display: flex; align-items: center; justify-content: center;
}
.icone img { width: 24px; height: 24px; }
.etiquettes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; list-style: none; padding: 0; }
.etiquettes li {
  font-size: 13px; font-weight: 500; color: var(--gris-texte);
  background: var(--gris-page); border: 1px solid var(--gris-bordure-clair);
  padding: 6px 12px; border-radius: 100px;
}

/* ---------- Start-up ---------- */
.deux-colonnes { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 64px; align-items: center; }
.deux-colonnes--haut { align-items: start; }
.bloc-texte { display: flex; flex-direction: column; gap: 20px; }
.bloc-texte h2 { font-size: 40px; letter-spacing: -0.02em; line-height: 1.14; text-wrap: balance; }
.bloc-texte p { font-size: 17px; line-height: 1.65; color: var(--gris-texte); text-wrap: pretty; }
.grille-etapes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.etape { background: #fff; border: 1px solid var(--gris-bordure); border-radius: 14px; padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.etape .numero { font-family: var(--titre); font-size: 15px; font-weight: 600; color: var(--bleu); }
.etape:last-child .numero { color: var(--corail); }
.etape h3 { font-size: 18px; }
.etape p { font-size: 15px; line-height: 1.6; color: var(--gris-texte); text-wrap: pretty; }

/* ---------- Méthode ---------- */
.grille-methode { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.jalon { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; border-top: 2px solid var(--bleu); }
.jalon:last-child { border-top-color: var(--corail); }
.jalon .numero { font-family: var(--titre); font-size: 15px; font-weight: 600; color: var(--bleu); letter-spacing: 0.08em; }
.jalon:last-child .numero { color: var(--corail); }
.jalon h3 { font-size: 20px; }
.jalon p { font-size: 15px; line-height: 1.65; color: #B6BDC8; text-wrap: pretty; }

/* ---------- Proximité ---------- */
.villes { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 6px; list-style: none; padding: 0; }
.villes li {
  font-size: 14px; font-weight: 500; color: var(--gris-texte);
  background: var(--gris-page); border: 1px solid var(--gris-bordure-clair);
  padding: 8px 14px; border-radius: 100px;
}
.atouts { display: flex; flex-direction: column; gap: 18px; }
.atout { border: 1px solid var(--gris-bordure); border-radius: 14px; padding: 28px; display: flex; gap: 18px; align-items: flex-start; }
.atout .losange { width: 11px; height: 11px; margin-top: 7px; }
.atout h3 { font-size: 19px; margin-bottom: 7px; }
.atout p { font-size: 15px; line-height: 1.65; color: var(--gris-texte); text-wrap: pretty; }

/* ---------- Témoignages ---------- */
/* Colonnes calculées plutôt que fixées à trois : deux témoignages occupent deux
   colonnes larges, un troisième en formera trois, sans retoucher le CSS. Des
   citations de dix lignes dans une grille figée à trois colonnes seraient
   illisibles. */
.grille-temoignages { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px; margin-bottom: 48px; }
.temoignage { background: #fff; border: 1px solid var(--gris-bordure); border-radius: 14px; padding: 32px; display: flex; flex-direction: column; gap: 22px; }
.temoignage img { height: 56px; width: auto; max-width: 150px; object-fit: contain; object-position: left center; }
/* 17 px et un interlignage plus ample : les citations réelles font une dizaine de
   lignes, là où le gabarit en prévoyait deux ou trois. Au-delà de trois lignes,
   c'est l'interlignage qui porte la lisibilité, pas la taille du texte. */
.temoignage blockquote { font-family: var(--titre); font-size: 17px; line-height: 1.6; color: var(--encre); margin: 0; text-wrap: pretty; }
.temoignage figcaption { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.temoignage .nom { font-size: 15px; font-weight: 600; }
.temoignage .role { font-size: 14px; color: var(--gris-clair); }

.bande-logos { display: flex; flex-direction: column; gap: 20px; }
.bande-logos-titre { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris-doux); font-weight: 600; }
/* Colonnes calculées plutôt que fixées : la bande passe de quatre logos à deux
   sur mobile sans media query, et accueillera un cinquième client sans retouche. */
.bande-logos ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 20px 24px; align-items: center; list-style: none; margin: 0; padding: 0; max-width: 700px; }
.bande-logos a { display: block; }
.bande-logos img { height: 52px; width: 100%; object-fit: contain; filter: grayscale(1); opacity: .6; transition: filter .2s, opacity .2s; }
/* La mise en valeur suit le lien et non l'image seule : au clavier, le focus se
   pose sur le lien, et l'image resterait sinon grisée sans rien signaler. */
.bande-logos a:hover img, .bande-logos a:focus-visible img { filter: none; opacity: 1; }

/* ---------- Contact ---------- */
.garanties { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; list-style: none; padding: 0; }
.garanties li { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--gris-texte-fonce); }
.garanties .losange { width: 8px; height: 8px; }

/* Contact Form 7 enveloppe le <form> dans un <div class="wpcf7">, et chaque champ
   dans un <span class="wpcf7-form-control-wrap">. On neutralise ces enveloppes pour
   que le formulaire garde exactement la mise en page du design d'origine. */
.wpcf7 { display: contents; }
.wpcf7-form-control-wrap { display: block; width: 100%; }

/* Messages de retour du formulaire.
   Par défaut, Contact Form 7 dessine un rectangle à angles droits bordé de vert
   ou de rouge vif, sans rapport avec le reste du site. Les styles ci-dessous
   reprennent le rayon, la typographie et la palette du thème.

   L'état est porté par une classe sur le <form> (sent, invalid, failed…) et non
   sur le message lui-même : c'est donc au parent qu'il faut accrocher la
   couleur. La règle générique reste neutre, faute de quoi un message d'erreur
   hériterait du vert de la réussite le temps que la classe d'état arrive. */
.wpcf7-response-output {
  margin: 4px 0 0; padding: 14px 18px;
  border: 1px solid var(--gris-bordure); border-left-width: 3px;
  border-radius: 10px;
  background: #fff;
  font-size: 15px; line-height: 1.5; color: var(--gris-texte-fonce);
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: #B7E4C7; border-left-color: #2E9E5B;
  background: #F2FBF5; color: #1B6B3A;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
  border-color: #FBD9C9; border-left-color: var(--corail);
  background: #FEF6F2; color: #9C3D1E;
}
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
  border-color: #F5C2C2; border-left-color: #C0392B;
  background: #FDF3F3; color: #8E2A20;
}

/* Erreur sous un champ. Le rouge par défaut est illisible sur le fond gris du
   formulaire, et le bloc n'a aucune respiration. */
.wpcf7-not-valid-tip {
  display: block; margin-top: 5px;
  font-size: 13px; font-weight: 500; color: #C0392B;
}
.champ input.wpcf7-not-valid, .champ textarea.wpcf7-not-valid { border-color: #C0392B; }

/* L'indicateur d'envoi se place à côté du bouton plutôt qu'à la ligne. */
.wpcf7-spinner { margin: 0 0 0 12px; vertical-align: middle; }

.formulaire {
  background: var(--gris-page); border: 1px solid var(--gris-bordure);
  border-radius: 16px; padding: 36px; display: flex; flex-direction: column; gap: 18px;
}
.champ { display: flex; flex-direction: column; gap: 7px; }
.champ label { font-size: 14px; font-weight: 500; color: var(--gris-texte-fonce); }
.champ input, .champ textarea {
  background: #fff; border: 1px solid var(--gris-bordure); border-radius: 9px;
  padding: 13px 14px; font-size: 15px; font-family: var(--texte); color: var(--encre);
  width: 100%;
}
.champ input:focus, .champ textarea:focus { outline: none; border-color: var(--bleu); }
.champ textarea { min-height: 96px; resize: vertical; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.choix { display: flex; flex-wrap: wrap; gap: 9px; }
/* Le bouton radio doit rester focusable au clavier, mais n'occuper aucune place.
   Masqué par opacity: 0, il restait dans le flux avec la largeur de 300 px que
   Contact Form 7 donne à ses champs : son bord droit sortait de la fenêtre et
   faisait déborder toute la page horizontalement, de 187 px sur un écran de
   402 px. Le symptôme visible était ailleurs, le bandeau cookies, positionné par
   rapport à la fenêtre et non à la page, paraissait décalé et rogné.

   Le découpage à un pixel est la technique correcte : contrairement à
   display: none ou visibility: hidden, elle laisse le champ accessible au
   clavier et aux lecteurs d'écran. */
.choix input {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Le focus n'étant plus visible sur le bouton lui-même, il est reporté sur
   l'étiquette, seul élément affiché. Sans cela, un visiteur au clavier
   traverserait les choix sans savoir où il se trouve. */
.choix label:has(input:focus-visible) { outline: 2px solid var(--bleu); outline-offset: 2px; }
.choix label {
  display: inline-flex; align-items: center;
  font-size: 14px; font-weight: 500; color: var(--gris-texte);
  background: #fff; border: 1px solid var(--gris-bordure);
  padding: 9px 15px; border-radius: 100px; cursor: pointer;
}
.choix label:has(input:checked) { border-color: var(--bleu); color: var(--encre); }
/* Mention globale en tête du formulaire, plutôt qu'un astérisque par étiquette.
   Les cinq champs sont obligatoires, et « Site web » étant présélectionné, le
   bouton radio n'est jamais vide non plus : cinq astérisques n'apprendraient
   rien de plus et alourdiraient la lecture. */
.champs-requis { margin: 0; font-size: 13px; color: var(--gris-doux); }

.mention { font-size: 13px; color: var(--gris-doux); text-align: center; }

/* ---------- FAQ ---------- */
.faq-liste { display: flex; flex-direction: column; gap: 14px; max-width: 820px; }
.faq-item {
  background: #fff; border: 1px solid var(--gris-bordure); border-radius: 14px;
  padding: 22px 26px;
}
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font-family: var(--titre); font-size: 17px; font-weight: 600; color: var(--encre);
  cursor: pointer; list-style: none; text-wrap: pretty;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gris-page); color: var(--bleu); font-size: 18px; line-height: 1;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item p { margin-top: 14px; font-size: 15px; line-height: 1.65; color: var(--gris-texte); text-wrap: pretty; }

/* ---------- Pied de page ---------- */
.pied { background: var(--encre); color: #fff; padding: 56px 0 36px; }
.pied-haut { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; margin-bottom: 34px; }
.pied-marque { display: flex; flex-direction: column; gap: 14px; max-width: 300px; }
.pied-marque .logo span { color: #fff; font-size: 17px; }
.pied-marque p { font-size: 15px; color: #B6BDC8; line-height: 1.6; }

/* Icônes de réseaux sociaux, dans le bloc de marque.
   La cible fait 40 px : une icône de 20 px seule serait sous le seuil de confort
   tactile, et c'est le lien entier qui doit être cliquable, pas le seul glyphe. */
.pied-reseaux { display: flex; gap: 10px; margin-top: 4px; }
.pied-reseau {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  color: #B6BDC8; background: rgba(255,255,255,0.06);
  border: 1px solid #2B303C;
  transition: color .2s, background .2s, border-color .2s;
}
.pied-reseau:hover, .pied-reseau:focus-visible {
  color: #fff; background: var(--corail); border-color: var(--corail);
}
.pied-colonnes { display: flex; gap: 56px; flex-wrap: wrap; }
.pied-colonne { display: flex; flex-direction: column; gap: 11px; }
.pied-colonne h3 { font-family: var(--texte); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris-clair); font-weight: 600; }
.pied-colonne a, .pied-colonne span { font-size: 15px; color: #B6BDC8; }
.pied-colonne a:hover { color: var(--corail); }
.pied-bas { padding-top: 22px; border-top: 1px solid #2B303C; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.pied-bas span, .pied-bas a, .pied-bas button { font-size: 13px; color: var(--gris-clair); }
.pied-bas a:hover, .pied-bas button:hover { color: #B6BDC8; }
.lien-cookies { background: none; border: none; padding: 0; font-family: inherit; cursor: pointer; }

/* ---------- Pages légales et éditoriales ---------- */
.page-legale, .page-editoriale { padding: 72px 0 100px; }
/* Le conteneur garde la largeur du site pour que le bord gauche du texte tombe
   exactement sous celui du logo et du bandeau, comme sur Services ou Méthode.
   C’est la colonne de texte, et non le conteneur, qui est limitée à une
   longueur de ligne lisible. */
.page-legale .contenu-page, .page-editoriale .contenu-page { max-width: 780px; }
.page-entete .maj { font-size: 14px; color: var(--gris-doux); }
.contenu-page { display: flex; flex-direction: column; gap: 16px; }
.contenu-page h2 { font-size: 23px; margin-top: 26px; }
.contenu-page h3 { font-size: 18px; margin-top: 8px; }
.contenu-page p, .contenu-page li { font-size: 16px; line-height: 1.7; color: var(--gris-texte); }
.contenu-page ul, .contenu-page ol { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; margin: 0; }
.contenu-page a { text-decoration: underline; }
.contenu-page strong { color: var(--encre); }
.contenu-page table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 4px; }
.contenu-page th, .contenu-page td { border: 1px solid var(--gris-bordure); padding: 10px 12px; text-align: left; }
.contenu-page th { background: var(--gris-page); }

/* ---------- Bandeau cookies ---------- */
/* Centrage par translation, et non par « left + right + margin auto ».
   Avec les deux décalages posés et une largeur auto, la largeur est d'abord
   calculée pour remplir l'espace et les marges auto tombent à zéro ; max-width
   ne rogne cette largeur qu'ensuite, et la répartition du reliquat dépend alors
   du moteur de rendu. Le bandeau se retrouvait centré sur certains navigateurs
   et débordant sur d'autres.

   Ici seul « left » est posé : plus de contrainte contradictoire à arbitrer.

   La largeur s'exprime en pourcentage et non en vw : le bloc conteneur d'un
   élément fixé exclut la barre de défilement, alors que 100vw l'inclut. L'écart
   suffisait à faire dépasser le bandeau de la largeur de cette barre. */
.bandeau-cookies {
  position: fixed; left: 50%; bottom: 20px; z-index: 50;
  transform: translateX(-50%);
  width: calc(100% - 40px); max-width: 560px;
  background: #fff; border: 1px solid var(--gris-bordure); border-radius: 16px;
  padding: 24px; box-shadow: 0 12px 32px rgba(16,24,40,0.16);
  display: flex; flex-direction: column; gap: 16px;
  /* Un texte long sans espace (une URL collée par exemple) ne doit pas élargir
     le bandeau au-delà de l'écran. */
  overflow-wrap: anywhere;
}
.bandeau-cookies[hidden] { display: none; }
.bandeau-cookies p { font-size: 14px; line-height: 1.6; color: var(--gris-texte); margin: 0; }
.bandeau-cookies a { text-decoration: underline; }
.bandeau-cookies-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Sur petits écrans, le bandeau occupe la largeur utile et ses boutons passent
   pleine largeur : deux boutons côte à côte deviennent illisibles sous 380 px. */
@media (max-width: 480px) {
  .bandeau-cookies {
    bottom: 12px; width: calc(100% - 24px);
    padding: 18px; border-radius: 12px; gap: 14px;
  }
  .bandeau-cookies p { font-size: 13.5px; }
  .bandeau-cookies-actions { flex-direction: column; }
  .bandeau-cookies-actions .bouton { width: 100%; }
}

/* ---------- Bouton WhatsApp ---------- */
.whatsapp-flottant {
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--corail); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(16,24,40,0.24);
  transition: background .2s, bottom .2s, transform .2s;
}
.whatsapp-flottant:hover { background: var(--corail-fonce); color: #fff; transform: translateY(-2px); }

/* Le bouton s'efface tant que le bandeau cookies est affiché.
   Il était auparavant décalé vers le haut d'une valeur fixe (200 px, 230 px en
   dessous de 480 px). Or la hauteur du bandeau dépend du retour à la ligne du
   texte : sur un écran étroit il dépasse largement ces valeurs, et les deux
   éléments se chevauchent. Masquer évite de deviner une hauteur, et le bandeau
   est de toute façon éphémère. */
body.cookies-bandeau-visible .whatsapp-flottant {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 480px) {
  .whatsapp-flottant { width: 52px; height: 52px; right: 16px; bottom: 16px; }
}
.bandeau-cookies-actions .bouton { padding: 11px 20px; font-size: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .hero .conteneur { grid-template-columns: 1fr; gap: 48px; padding-top: 64px; padding-bottom: 72px; }
  .hero h1 { font-size: 42px; }
  .hero-visuel img { width: 260px; }
  .deux-colonnes { grid-template-columns: 1fr; gap: 44px; }
  .grille-methode { grid-template-columns: repeat(2, 1fr); }
  /* Plus de surcharge pour .grille-temoignages : ses colonnes sont calculées et
     retombent d'elles-mêmes à une seule quand la largeur ne suffit plus. Forcer
     une colonne dès 1000 px produirait des cartes inutilement hautes. */
  .section { padding: 72px 0; }
  .entete-section h2 { font-size: 34px; }

  .nav { display: none; }
  .nav.ouvert {
    display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--gris-bordure);
    padding: 24px;
  }
  .menu-mobile { display: block; }
}

@media (max-width: 720px) {
  .conteneur { padding: 0 24px; }
  .grille-services, .grille-etapes, .grille-methode, .duo { grid-template-columns: 1fr; }
  .hero h1 { font-size: 34px; }
  .entete-section h2, .bloc-texte h2 { font-size: 28px; }
  .formulaire { padding: 26px; }
}

/* =========================================================
   ARTICLES — carrousel accueil, liste, page article
   ========================================================= */

/* ---------- Carrousel accueil ---------- */
.articles-entete {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; flex-wrap: wrap; margin-bottom: 44px;
}
.articles-entete .entete-section { margin-bottom: 0; }
.carrousel-commandes { display: flex; align-items: center; gap: 10px; }
.fleche {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--gris-bordure); background: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color .2s, background .2s;
  color: var(--encre); font-size: 18px; line-height: 1;
  font-family: var(--texte);
}
.fleche:hover:not(:disabled) { border-color: var(--bleu); color: var(--bleu); }
.fleche:disabled { opacity: .35; cursor: default; }
.lien-tout { font-size: 15px; font-weight: 500; color: var(--bleu-profond); white-space: nowrap; }
.lien-tout::after { content: ' →'; }

.carrousel { position: relative; overflow: hidden; }
.carrousel-piste {
  display: flex; gap: 24px;
  overflow-x: auto; scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.carrousel-piste::-webkit-scrollbar { display: none; }
.carrousel-piste > * { flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; }

/* ---------- Carte article ---------- */
.article-carte {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--gris-bordure);
  border-radius: 14px; overflow: hidden;
  transition: border-color .2s, transform .2s;
  color: inherit; height: 100%;
}
.article-carte:hover { border-color: var(--bleu); transform: translateY(-3px); color: inherit; }
.article-visuel { position: relative; aspect-ratio: 16 / 9; background: var(--gris-page); overflow: hidden; }
.article-visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-corps { padding: 26px 28px 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.article-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--gris-doux); }
.categorie {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bleu); background: #EEF4FE; padding: 5px 11px; border-radius: 100px;
}
.categorie--corail { color: var(--corail); background: #FDF0EC; }
.article-carte h3 { font-size: 21px; line-height: 1.3; text-wrap: pretty; }
.article-carte p { font-size: 15px; line-height: 1.65; color: var(--gris-texte); text-wrap: pretty; }
.article-lien { margin-top: auto; padding-top: 8px; font-size: 15px; font-weight: 500; color: var(--bleu-profond); }
.article-lien::after { content: ' →'; }
.article-carte:hover .article-lien { color: var(--corail); }

/* ---------- Liste des articles ---------- */
.page-entete { background: var(--gris-page); border-bottom: 1px solid var(--gris-bordure-clair); padding: 76px 0 68px; }
.page-entete .conteneur { display: flex; flex-direction: column; gap: 16px; max-width: var(--largeur); }
.page-entete h1 { font-size: 52px; letter-spacing: -0.025em; line-height: 1.08; text-wrap: balance; }
.page-entete p { font-size: 19px; line-height: 1.6; color: var(--gris-texte); max-width: 620px; text-wrap: pretty; }

.fil-ariane { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--gris-doux); }
.fil-ariane a { color: var(--gris-clair); }
.fil-ariane a:hover { color: var(--bleu); }

.filtres { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.filtres a {
  font-size: 14px; font-weight: 500; color: var(--gris-texte);
  background: #fff; border: 1px solid var(--gris-bordure);
  padding: 9px 16px; border-radius: 100px;
}
.filtres a:hover { border-color: var(--bleu); color: var(--encre); }
.filtres a.actif { background: var(--encre); border-color: var(--encre); color: #fff; }

.grille-articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.article-une {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 0;
  border: 1px solid var(--gris-bordure); border-radius: 16px; overflow: hidden;
  margin-bottom: 40px; background: #fff; color: inherit;
  transition: border-color .2s;
}
.article-une:hover { border-color: var(--bleu); color: inherit; }
.article-une .article-visuel { aspect-ratio: auto; height: 100%; min-height: 320px; }
.article-une .article-corps { padding: 44px 48px; justify-content: center; gap: 16px; }
.article-une h2 { font-size: 34px; line-height: 1.2; letter-spacing: -0.015em; text-wrap: pretty; }
.article-une p { font-size: 17px; line-height: 1.65; color: var(--gris-texte); }

.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 56px; }
.pagination a, .pagination span {
  min-width: 42px; height: 42px; padding: 0 12px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--gris-bordure); border-radius: 9px;
  font-size: 15px; font-weight: 500; color: var(--gris-texte);
}
.pagination a:hover { border-color: var(--bleu); color: var(--bleu); }
.pagination .actif, .pagination .current { background: var(--encre); border-color: var(--encre); color: #fff; }
.pagination .dots { border: none; }

/* ---------- Page article ---------- */
.article-hero { padding: 64px 0 0; }
.article-hero .conteneur { display: flex; flex-direction: column; gap: 22px; max-width: 820px; }
.article-hero h1 { font-size: 52px; line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; }
.article-chapo { font-size: 21px; line-height: 1.6; color: var(--gris-texte); text-wrap: pretty; }
.article-signature { display: flex; align-items: center; gap: 14px; padding-top: 8px; }
.article-signature img { width: 46px; height: 46px; border-radius: 50%; }
.article-signature .nom { font-size: 15px; font-weight: 600; }
.article-signature .date { font-size: 14px; color: var(--gris-clair); }

.article-image-large { margin: 48px 0 56px; }
.article-image-large img {
  width: 100%; aspect-ratio: 21 / 9; object-fit: cover;
  border-radius: 16px; display: block; background: var(--gris-page);
}
.article-image-large figcaption { font-size: 13px; color: var(--gris-doux); margin-top: 12px; text-align: center; }

.article-corps-texte { max-width: 720px; margin: 0 auto; }
.article-corps-texte > * + * { margin-top: 26px; }
.article-corps-texte p { font-size: 18px; line-height: 1.75; color: var(--gris-texte-fonce); text-wrap: pretty; }
.article-corps-texte h2 { font-size: 32px; line-height: 1.2; letter-spacing: -0.015em; margin-top: 52px; }
.article-corps-texte h3 { font-size: 23px; line-height: 1.3; margin-top: 40px; }
.article-corps-texte ul, .article-corps-texte ol { padding-left: 22px; display: flex; flex-direction: column; gap: 12px; }
.article-corps-texte li { font-size: 18px; line-height: 1.7; color: var(--gris-texte-fonce); }
.article-corps-texte a { text-decoration: underline; text-underline-offset: 3px; }
.article-corps-texte blockquote {
  margin: 40px 0; padding: 28px 32px;
  background: var(--gris-page); border-left: 3px solid var(--corail);
  border-radius: 0 12px 12px 0;
}
.article-corps-texte blockquote p { font-family: var(--titre); font-size: 21px; line-height: 1.5; color: var(--encre); }
.article-corps-texte figure img { width: 100%; border-radius: 12px; display: block; }
.article-corps-texte figcaption { font-size: 13px; color: var(--gris-doux); margin-top: 10px; }

.encadre {
  border: 1px solid var(--gris-bordure); border-radius: 12px;
  padding: 26px 28px; display: flex; flex-direction: column; gap: 10px;
  margin: 40px 0;
}
.encadre h3 { font-size: 18px; margin: 0; }
.encadre p { font-size: 16px; line-height: 1.65; color: var(--gris-texte); }

.article-partage {
  max-width: 720px; margin: 56px auto 0; padding-top: 28px;
  border-top: 1px solid var(--gris-bordure);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.article-partage span { font-size: 15px; color: var(--gris-clair); }
.article-partage div { display: flex; gap: 10px; }
.article-partage a {
  padding: 9px 16px; border: 1px solid var(--gris-bordure); border-radius: 100px;
  font-size: 14px; font-weight: 500; color: var(--gris-texte);
}
.article-partage a:hover { border-color: var(--bleu); color: var(--bleu); }

.bloc-auteur {
  max-width: 720px; margin: 48px auto 0;
  background: var(--gris-page); border-radius: 16px; padding: 36px;
  display: flex; gap: 24px; align-items: flex-start;
}
.bloc-auteur img { width: 72px; height: 72px; border-radius: 50%; flex: none; }
.bloc-auteur h3 { font-size: 20px; margin-bottom: 8px; }
.bloc-auteur p { font-size: 16px; line-height: 1.65; color: var(--gris-texte); margin-bottom: 12px; }

.cta-article {
  background: var(--encre); color: #fff; border-radius: 18px;
  padding: 48px 52px; display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap; margin-top: 64px;
}
.cta-article h2 { font-size: 32px; letter-spacing: -0.015em; margin-bottom: 10px; }
.cta-article p { font-size: 17px; line-height: 1.6; color: #B6BDC8; max-width: 480px; }

/* ---------- Responsive articles ---------- */
@media (max-width: 1000px) {
  .carrousel-piste > * { flex: 0 0 calc((100% - 24px) / 2); }
  .grille-articles { grid-template-columns: repeat(2, 1fr); }
  .article-une { grid-template-columns: 1fr; }
  .article-une .article-visuel { min-height: 240px; aspect-ratio: 16 / 9; }
  .article-une .article-corps { padding: 32px; }
  .article-une h2 { font-size: 28px; }
  .page-entete h1, .article-hero h1 { font-size: 38px; }
  .article-hero { padding-top: 44px; }
  .cta-article { padding: 36px; }
}

@media (max-width: 720px) {
  .carrousel-piste > * { flex: 0 0 84%; }
  .grille-articles { grid-template-columns: 1fr; }
  .carrousel-commandes .fleche { display: none; }
  .page-entete h1, .article-hero h1 { font-size: 30px; }
  .article-chapo { font-size: 18px; }
  .article-corps-texte p, .article-corps-texte li { font-size: 17px; }
  .article-corps-texte h2 { font-size: 26px; }
  .bloc-auteur { flex-direction: column; }
  .cta-article h2 { font-size: 26px; }
}

/* =========================================================
   PAGES INTÉRIEURES — Services, Start-up
   ========================================================= */

/* ---------- Sommaire ancré ---------- */
.ancres { background: #fff; border-bottom: 1px solid var(--gris-bordure-clair); position: sticky; top: 75px; z-index: 15; }
.ancres .conteneur { display: flex; gap: 26px; overflow-x: auto; padding-top: 16px; padding-bottom: 16px; scrollbar-width: none; }
.ancres .conteneur::-webkit-scrollbar { display: none; }
.ancres a { font-size: 14px; font-weight: 500; color: var(--gris-clair); white-space: nowrap; padding-bottom: 3px; border-bottom: 2px solid transparent; }

/* Sur écran étroit, le sommaire passe à la ligne au lieu de défiler.
   Il défilait déjà horizontalement, mais sa barre de défilement est masquée
   (scrollbar-width: none) : les entrées de droite étaient coupées sans que rien
   n'indique qu'on pouvait les atteindre. Avec quatre ou cinq entrées, le retour à
   la ligne montre tout d'un coup et supprime le problème plutôt que de le signaler. */
@media (max-width: 720px) {
  .ancres .conteneur {
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 12px 18px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .ancres a { font-size: 13.5px; }
}
.ancres a:hover { color: var(--encre); border-bottom-color: var(--corail); }

/* ---------- Bloc service ---------- */
.service { padding: 84px 0; border-bottom: 1px solid var(--gris-bordure-clair); }
.service:last-of-type { border-bottom: none; }
.service .conteneur { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.service--inverse .conteneur > *:first-child { order: 2; }

.service-titre { display: flex; flex-direction: column; gap: 18px; }
.service-num { font-family: var(--titre); font-size: 14px; font-weight: 600; letter-spacing: 0.14em; color: var(--bleu); }
.service-titre h2 { font-size: 38px; letter-spacing: -0.02em; line-height: 1.14; text-wrap: balance; }
.service-titre p { font-size: 17px; line-height: 1.7; color: var(--gris-texte); text-wrap: pretty; }
.service-titre p + p { margin-top: -4px; }

.panneau { background: var(--gris-page); border: 1px solid var(--gris-bordure); border-radius: 16px; padding: 34px 36px; display: flex; flex-direction: column; gap: 26px; }
.panneau--sombre { background: var(--encre); border-color: var(--encre); }
.panneau h3 { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris-doux); font-family: var(--texte); font-weight: 600; }

.specs { margin: 0; display: flex; flex-direction: column; gap: 20px; }
.specs > div { display: flex; flex-direction: column; gap: 5px; }
.specs dt { font-family: var(--titre); font-size: 17px; font-weight: 600; color: var(--encre); }
.specs dd { margin: 0; font-size: 15px; line-height: 1.65; color: var(--gris-texte); text-wrap: pretty; }

.puces { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.puces li { position: relative; padding-left: 21px; font-size: 16px; line-height: 1.6; color: var(--gris-texte-fonce); text-wrap: pretty; }
.puces li::before { content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; background: var(--corail); transform: rotate(45deg); }

.panneau--sombre h3 { color: #fff; }
.panneau--sombre .specs dt { color: #fff; }
.panneau--sombre .specs dd,
.panneau--sombre .puces li { color: #B6BDC8; }

/* ---------- Cycle de vie ---------- */
.cycle { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.cycle > div { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 2px solid rgba(255,255,255,0.22); }
.cycle > div:last-child { border-top-color: var(--corail); }
.cycle .num { font-family: var(--titre); font-size: 14px; font-weight: 600; letter-spacing: 0.1em; color: var(--bleu); }
.cycle > div:last-child .num { color: var(--corail); }
.cycle h3 { font-size: 19px; color: #fff; }
.cycle p { font-size: 15px; line-height: 1.6; color: #B6BDC8; text-wrap: pretty; }

/* ---------- Formules / budget ---------- */
.formules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.formule { border: 1px solid var(--gris-bordure); border-radius: 16px; padding: 34px; display: flex; flex-direction: column; gap: 18px; background: #fff; }
.formule--phare { border-color: var(--encre); border-width: 2px; }
.formule .etiquette { align-self: flex-start; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--corail); background: #FDF0EC; padding: 5px 11px; border-radius: 100px; }
.formule h3 { font-size: 24px; }
.formule .pour { font-size: 15px; line-height: 1.6; color: var(--gris-texte); }
.formule ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; margin-top: 4px; }
.formule li { font-size: 15px; line-height: 1.55; color: var(--gris-texte-fonce); padding-left: 18px; position: relative; }
.formule li::before { content: '·'; position: absolute; left: 4px; color: var(--bleu); font-weight: 700; }

.formules--duo { grid-template-columns: repeat(2, 1fr); }

/* ---------- Chiffres / faits ---------- */
.faits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fait { display: flex; flex-direction: column; gap: 10px; }
.fait h3 { font-size: 21px; }
.fait p { font-size: 16px; line-height: 1.65; color: var(--gris-texte); text-wrap: pretty; }

/* ---------- FAQ (pages Services / Start-up) ---------- */
.faq { display: flex; flex-direction: column; gap: 0; max-width: 860px; }
.faq details { border-bottom: 1px solid var(--gris-bordure); }
.faq summary { cursor: pointer; padding: 24px 0; font-family: var(--titre); font-size: 19px; font-weight: 600; color: var(--encre); list-style: none; display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 24px; color: var(--bleu); font-weight: 400; flex: none; }
.faq details[open] summary::after { content: '–'; }
.faq details p { padding: 0 0 24px; font-size: 16px; line-height: 1.7; color: var(--gris-texte); max-width: 720px; text-wrap: pretty; }

/* ---------- Bandeau final ---------- */
.final { background: var(--encre); color: #fff; padding: 88px 0; position: relative; overflow: hidden; }
.final::before { content: ''; position: absolute; right: -140px; top: -120px; width: 520px; height: 520px; border-radius: 50%; border: 76px solid rgba(74,134,232,0.14); }
.final .conteneur { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.final h2 { font-size: 40px; letter-spacing: -0.02em; line-height: 1.12; margin-bottom: 14px; text-wrap: balance; }
.final p { font-size: 18px; line-height: 1.6; color: #B6BDC8; max-width: 520px; text-wrap: pretty; }

@media (max-width: 1000px) {
  .ancres { position: static; }
  .service { padding: 56px 0; }
  .service .conteneur { grid-template-columns: 1fr; gap: 36px; }
  .service--inverse .conteneur > *:first-child { order: 0; }
  .service-titre h2 { font-size: 30px; }
  .cycle { grid-template-columns: repeat(2, 1fr); }
  .formules, .faits { grid-template-columns: 1fr; }
  .final { padding: 60px 0; }
  .final h2 { font-size: 30px; }
}
@media (max-width: 720px) {
  .cycle { grid-template-columns: 1fr; }
  .panneau { padding: 26px; }
  .service-titre h2 { font-size: 26px; }
}

/* =========================================================
   MÉTHODE — frise, tableau comparatif, rituels
   ========================================================= */

/* ---------- Frise des 3 phases ---------- */
.frise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.phase {
  border: 1px solid var(--gris-bordure); border-radius: 16px;
  padding: 34px; display: flex; flex-direction: column; gap: 16px; background: #fff;
  position: relative;
}
.phase--agile { border-color: var(--bleu); border-width: 2px; background: #FBFCFE; }
.phase-approche {
  align-self: flex-start; font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gris-clair);
  background: var(--gris-page); border: 1px solid var(--gris-bordure-clair);
  padding: 5px 11px; border-radius: 100px;
}
.phase--agile .phase-approche { color: var(--bleu); background: #EEF4FE; border-color: #DCE8FC; }
.phase-num { font-family: var(--titre); font-size: 14px; font-weight: 600; letter-spacing: 0.14em; color: var(--gris-doux); }
.phase h3 { font-size: 25px; letter-spacing: -0.01em; }
.phase p { font-size: 15px; line-height: 1.65; color: var(--gris-texte); text-wrap: pretty; }
.phase-pied { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--gris-bordure-clair); display: flex; flex-direction: column; gap: 6px; }
.phase-pied .cle { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris-doux); font-weight: 600; }
.phase-pied .valeur { font-size: 15px; color: var(--gris-texte-fonce); line-height: 1.55; }

/* ---------- Tableau comparatif ---------- */
/* Ombres de défilement.
   Le tableau défile horizontalement, mais rien ne l'indiquait : sur mobile la barre
   de défilement reste invisible au repos, et l'utilisateur voit une colonne coupée
   sans comprendre qu'il peut la faire glisser.
   Les deux premiers dégradés sont ancrés au contenu (local), les deux suivants à la
   zone visible (scroll) : les ombres n'apparaissent donc que du côté où il reste
   quelque chose à voir, sans une ligne de JavaScript. */
.tableau-enveloppe {
  overflow-x: auto;
  border: 1px solid var(--gris-bordure);
  border-radius: 16px;
  background:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center / 44px 100% no-repeat local,
    linear-gradient(to left,  #fff 30%, rgba(255,255,255,0)) right center / 44px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,   rgba(16,24,40,.14), rgba(16,24,40,0)) left center / 16px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(16,24,40,.14), rgba(16,24,40,0)) right center / 16px 100% no-repeat scroll,
    #fff;
  overscroll-behavior-x: contain;
}
table.comparatif { width: 100%; border-collapse: collapse; min-width: 780px; }
table.comparatif th, table.comparatif td { text-align: left; padding: 20px 24px; vertical-align: top; }
table.comparatif thead th {
  font-family: var(--texte); font-size: 12px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris-doux);
  border-bottom: 1px solid var(--gris-bordure); white-space: nowrap;
}
table.comparatif tbody tr + tr { border-top: 1px solid var(--gris-bordure-clair); }
table.comparatif tbody th { font-family: var(--titre); font-size: 18px; font-weight: 600; color: var(--encre); white-space: nowrap; }
table.comparatif td { font-size: 15px; line-height: 1.6; color: var(--gris-texte); text-wrap: pretty; }
table.comparatif .attention { color: var(--gris-texte-fonce); }

/* Sur écran étroit, le tableau reste défilable mais on réduit sa largeur minimale
   et son rembourrage : faire glisser sur 780 px depuis un écran de 375 px est
   pénible, et l'essentiel de cette largeur venait des marges intérieures. */
@media (max-width: 720px) {
  table.comparatif { min-width: 560px; }
  table.comparatif th, table.comparatif td { padding: 14px 16px; }
  table.comparatif tbody th { font-size: 16px; }
  table.comparatif td { font-size: 14px; }
}

/* ---------- Rituels ---------- */
.rituels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.rituel { display: flex; gap: 20px; align-items: flex-start; }
.rituel-marque {
  width: 44px; height: 44px; border-radius: 11px; background: #EEF4FE; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--titre); font-size: 15px; font-weight: 600; color: var(--bleu);
}
.rituel h3 { font-size: 19px; margin-bottom: 7px; }
.rituel p { font-size: 15px; line-height: 1.65; color: var(--gris-texte); text-wrap: pretty; }
.rituel .cadence { display: block; font-size: 13px; color: var(--gris-doux); margin-top: 6px; }

/* ---------- Rôles ---------- */
.roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* Portée limitée à .roles : sans cela, la règle atteignait aussi le
   <span class="role"> des témoignages de la page d'accueil, qui héritait d'un
   filet de 2 px et d'un retrait de 24 px destinés à un tout autre composant. */
.roles .role { border-top: 2px solid var(--bleu); padding-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.roles .role:last-child { border-top-color: var(--corail); }
.roles .role h3 { font-size: 20px; }
.roles .role p { font-size: 15px; line-height: 1.65; color: var(--gris-texte); text-wrap: pretty; }
.roles .role .engagement { font-size: 14px; color: var(--gris-doux); }

/* ---------- Comparaison deux colonnes ---------- */
.contraste { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.contraste > div { border-radius: 16px; padding: 32px 34px; display: flex; flex-direction: column; gap: 14px; }
.contraste .negatif { background: var(--gris-page); border: 1px solid var(--gris-bordure); }
.contraste .positif { background: var(--encre); }
.contraste h3 { font-size: 21px; }
.contraste .positif h3 { color: #fff; }
.contraste .negatif h3 { color: var(--gris-clair); }
.contraste p { font-size: 16px; line-height: 1.7; }
.contraste .negatif p { color: var(--gris-texte); }
.contraste .positif p { color: #B6BDC8; }

@media (max-width: 1000px) {
  .frise { grid-template-columns: 1fr; }
  .rituels, .contraste { grid-template-columns: 1fr; }
  .roles { grid-template-columns: 1fr; }
}

/* ---------- Images dans les pages éditoriales ---------- */
/* .contenu-page est un conteneur flex en colonne, ce qui convient au texte
   suivi des pages légales mais annule les flottants : une image alignée à
   droite s'y retrouvait seule sur sa ligne, avec un vide à sa gauche.

   Le flux normal est donc rétabli pour les seules pages éditoriales, où une
   photo doit pouvoir être entourée de texte. Les pages légales conservent le
   flex et son gap, qui leur va très bien. */
.page-editoriale .contenu-page { display: block; }
.page-editoriale .contenu-page > * + * { margin-top: 16px; }

.page-editoriale .contenu-page figure { margin: 0; }
.page-editoriale .contenu-page figure img { display: block; width: 100%; height: auto; }

.page-editoriale .contenu-page .alignright {
  float: right; width: 230px; max-width: 40%;
  margin: 0 0 18px 32px;
}
.page-editoriale .contenu-page .alignleft {
  float: left; width: 230px; max-width: 40%;
  margin: 0 32px 18px 0;
}

/* Un titre ne doit jamais démarrer à côté d'une image flottante : la colonne
   de texte deviendrait illisible sur deux largeurs différentes. */
.page-editoriale .contenu-page h2 { clear: both; }

@media (max-width: 640px) {
  /* Sous 640 px, la colonne est trop étroite pour un habillage : l'image
     reprend toute la largeur plutôt que de comprimer le texte à 60 %. */
  .page-editoriale .contenu-page .alignright,
  .page-editoriale .contenu-page .alignleft {
    float: none; width: 200px; max-width: 100%; margin: 4px auto 20px;
  }
}

/* Lien vers les études de cas, sous la bande de logos clients. */
.lien-realisations { margin-top: 22px; }
.lien-realisations a { font-size: 15px; font-weight: 500; color: var(--bleu-profond); }
.lien-realisations a::after { content: ' \2192'; }
.lien-realisations a:hover { color: var(--corail); }

/* ---------- Intro avec portrait, pages éditoriales ---------- */
/* Deux colonnes plutôt qu'un flottant : le portrait précède un paragraphe court,
   qui ne suffit pas à l'habiller. Une grille place les deux côte à côte quelle
   que soit la longueur du texte, et se replie proprement sur mobile. */
.intro-portrait {
  display: grid; grid-template-columns: 220px 1fr;
  gap: 36px; align-items: center; margin-bottom: 8px;
}
.intro-portrait figure { margin: 0; }
.intro-portrait img { display: block; width: 100%; height: auto; }
.intro-portrait p { font-size: 17px; line-height: 1.7; color: var(--gris-texte); }

@media (max-width: 640px) {
  /* Sous 640 px, deux colonnes rendraient le texte illisible : le portrait
     passe au-dessus, à taille réduite et centré. */
  .intro-portrait { grid-template-columns: 1fr; gap: 22px; justify-items: center; text-align: center; }
  .intro-portrait figure { width: 180px; }
}

/* =========================================================
   RÉALISATIONS — études de cas, clients
   ========================================================= */

.cas-liste { display: flex; flex-direction: column; gap: 32px; }

.cas {
  border: 1px solid var(--gris-bordure); border-radius: 18px;
  background: #fff; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr;
}
.cas--sombre { background: var(--encre); border-color: var(--encre); }

.cas-visuel { position: relative; overflow: hidden; background: var(--gris-page); min-height: 380px; }
/* contain, et non cover : le contenu réel des études de cas est plus long que
   celui de la maquette, le panneau devient donc nettement plus haut que large et
   un recadrage couperait le losange. Le fond du SVG reprend exactement la
   couleur du panneau, le motif remplit donc le cadre sans bande visible. */
.cas-visuel img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cas--sombre .cas-visuel { background: #23283a; }

.cas-corps { padding: 44px 46px; display: flex; flex-direction: column; gap: 20px; }

.cas-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cas-annees {
  font-size: 13px; font-weight: 500; color: var(--gris-clair);
  display: inline-flex; align-items: center; gap: 8px;
}
.cas--sombre .cas-annees { color: #9AA1AC; }
.cas-annees::before { content: ''; width: 7px; height: 7px; background: var(--corail); transform: rotate(45deg); flex: none; }

.cas h2 { font-size: 32px; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; }
.cas--sombre h2 { color: #fff; }
.cas-lede { font-size: 17px; line-height: 1.65; color: var(--gris-texte); text-wrap: pretty; }
.cas--sombre .cas-lede { color: #B6BDC8; }

.cas-points { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.cas-point { display: flex; flex-direction: column; gap: 4px; }
.cas-point dt {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gris-doux); font-weight: 600;
}
.cas--sombre .cas-point dt { color: #6B7280; }
.cas-point dd { margin: 0; font-size: 15px; line-height: 1.6; color: var(--gris-texte-fonce); text-wrap: pretty; }
.cas--sombre .cas-point dd { color: #B6BDC8; }

.cas-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.cas-tags li {
  font-size: 13px; font-weight: 500; color: var(--gris-texte);
  background: var(--gris-page); border: 1px solid var(--gris-bordure-clair);
  padding: 6px 12px; border-radius: 100px;
}
.cas--sombre .cas-tags li { background: #23283a; border-color: #333a4d; color: #B6BDC8; }

/* ---------- Clients ---------- */
.clients { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.client {
  border: 1px solid var(--gris-bordure); border-radius: 14px;
  padding: 30px; display: flex; flex-direction: column; gap: 18px; background: #fff;
  transition: border-color .2s;
}
.client:hover { border-color: var(--bleu); }
.client-logo { height: 44px; display: flex; align-items: center; }
.client-logo img { max-height: 44px; max-width: 140px; object-fit: contain; object-position: left center; }
.client h3 { font-size: 19px; }
.client p { font-size: 15px; line-height: 1.6; color: var(--gris-texte); text-wrap: pretty; }
.client .secteur { font-size: 13px; color: var(--gris-doux); font-weight: 500; }

@media (max-width: 1000px) {
  .cas { grid-template-columns: 1fr; }
  .cas-visuel { min-height: 220px; aspect-ratio: 16 / 9; }
  .cas-corps { padding: 32px; }
  .cas h2 { font-size: 26px; }
  .clients { grid-template-columns: 1fr; }
}

/* Le titre d'une étude de cas et le nom d'un client sont cliquables. Sans cela
   ils prendraient la couleur de lien du site, qui jure avec le titrage. */
.cas h2 a, .client h3 a { color: inherit; }
.cas h2 a:hover, .client h3 a:hover { color: var(--bleu); }
.cas--sombre h2 a:hover { color: var(--corail); }

.cas-lien a { font-size: 15px; font-weight: 500; color: var(--bleu-profond); }
.cas-lien a::after { content: ' \2192'; }
.cas-lien a:hover { color: var(--corail); }
.cas--sombre .cas-lien a { color: #7FB0F5; }

/* =========================================================
   À PROPOS — portrait, parcours, engagements
   ========================================================= */

.apropos-hero { background: var(--encre); color: #fff; padding: 76px 0 84px; position: relative; overflow: hidden; }
.apropos-hero::before {
  content: ''; position: absolute; right: -170px; top: -130px;
  width: 620px; height: 620px; border-radius: 50%; border: 88px solid rgba(74,134,232,0.14);
}
.apropos-hero::after {
  content: ''; position: absolute; right: 210px; bottom: -120px;
  width: 260px; height: 260px; background: rgba(238,122,90,0.12); transform: rotate(45deg);
}
.apropos-hero .conteneur { position: relative; display: grid; grid-template-columns: 300px 1fr; gap: 60px; align-items: center; }
.apropos-hero .fil-ariane { grid-column: 1 / -1; margin-bottom: -18px; }
.apropos-hero .fil-ariane a, .apropos-hero .fil-ariane span { color: #6B7280; }
.apropos-hero .fil-ariane a:hover { color: var(--corail); }

.portrait { position: relative; }
.portrait img {
  width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center top;
  border-radius: 18px; display: block; background: #23283a;
}
.portrait::after {
  content: ''; position: absolute; right: -14px; bottom: -14px;
  width: 56px; height: 56px; background: var(--corail); transform: rotate(45deg);
}

.apropos-hero h1 { font-size: 50px; letter-spacing: -0.025em; line-height: 1.08; margin-bottom: 22px; text-wrap: balance; }
.apropos-hero .intro { font-size: 20px; line-height: 1.6; color: #B6BDC8; max-width: 560px; text-wrap: pretty; }
.apropos-hero .signature { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 30px; padding-top: 26px; border-top: 1px solid #2B303C; }
.apropos-hero .signature div { display: flex; flex-direction: column; gap: 3px; }
.apropos-hero .signature dt { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #6B7280; font-weight: 600; }
.apropos-hero .signature dd { margin: 0; font-family: var(--titre); font-size: 17px; font-weight: 600; color: #fff; }

/* ---------- Parcours ---------- */
.parcours { display: flex; flex-direction: column; gap: 0; max-width: 860px; }
.jalon-parcours { display: grid; grid-template-columns: 132px 1fr; gap: 32px; padding: 30px 0; position: relative; }
.jalon-parcours + .jalon-parcours { border-top: 1px solid var(--gris-bordure-clair); }
.jalon-parcours .periode { font-family: var(--titre); font-size: 15px; font-weight: 600; color: var(--bleu); padding-top: 3px; }
.jalon-parcours:last-child .periode { color: var(--corail); }
.jalon-parcours h3 { font-size: 22px; margin-bottom: 10px; }
.jalon-parcours p { font-size: 16px; line-height: 1.7; color: var(--gris-texte); text-wrap: pretty; }
.jalon-parcours p + p { margin-top: 12px; }

.enseignement {
  margin-top: 40px; max-width: 860px;
  background: var(--gris-page); border-left: 3px solid var(--corail);
  border-radius: 0 12px 12px 0; padding: 28px 32px;
}
.enseignement p { font-family: var(--titre); font-size: 20px; line-height: 1.5; color: var(--encre); text-wrap: pretty; }

/* ---------- Familles de projets ---------- */
.familles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.famille {
  border: 1px solid var(--gris-bordure); border-radius: 14px; padding: 30px 32px;
  display: flex; flex-direction: column; gap: 11px; background: #fff;
}
.famille h3 { font-size: 20px; }
.famille p { font-size: 15px; line-height: 1.65; color: var(--gris-texte); text-wrap: pretty; }

/* ---------- Engagements ---------- */
.engagements { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.engagement-bloc { border-top: 2px solid var(--corail); padding-top: 24px; display: flex; flex-direction: column; gap: 11px; }
.engagement-bloc h3 { font-size: 20px; color: #fff; }
.engagement-bloc p { font-size: 15px; line-height: 1.65; color: #B6BDC8; text-wrap: pretty; }

@media (max-width: 1000px) {
  .apropos-hero { padding: 48px 0 56px; }
  .apropos-hero .conteneur { grid-template-columns: 1fr; gap: 34px; }
  .portrait { max-width: 220px; }
  .apropos-hero h1 { font-size: 34px; }
  .apropos-hero .intro { font-size: 18px; }
  .jalon-parcours { grid-template-columns: 1fr; gap: 10px; }
  .familles, .engagements { grid-template-columns: 1fr; }
}

/* La maquette portait ces liens en style en ligne. Une règle évite de répéter
   les trois mêmes déclarations dans chaque gabarit. */
.section--sombre .entete-section p a,
.final p a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.section--sombre .entete-section p a:hover,
.final p a:hover { color: var(--corail); }

/* Les attributs width et height d'une image agissent comme indication de
   présentation. La maquette servait un visuel carré de 300 px, l'indication
   tombait donc juste par hasard ; avec le portrait de 900 px de côté, height
   l'emportait sur aspect-ratio et étirait le cadre sur trois fois sa hauteur.
   height: auto rend la main au ratio, quelle que soit l'image servie. */
.portrait img { height: auto; }

/* ---------- Étude de cas ---------- */

/* Un article intercale une image pleine largeur entre le bandeau et le texte,
   ce qui posait l'espace entre les deux. Une étude de cas n'en a pas : sans
   cette règle, le premier paragraphe colle au bandeau. */
.article-hero + .conteneur .article-corps-texte { margin: 52px auto 0; }

.article-hero .cas-tags { margin-top: 2px; }

.etude-site a { font-size: 15px; font-weight: 500; color: var(--bleu-profond); }
.etude-site a::after { content: ' \2197'; }
.etude-site a:hover { color: var(--corail); }

.famille h3 a { color: inherit; }
.famille h3 a:hover { color: var(--bleu); }

/* Note de rédaction, visible des seuls utilisateurs pouvant éditer la page.
   Volontairement peu discrète : elle doit se distinguer du texte publié, sans
   quoi elle finit par se confondre avec lui et rester en ligne. */
.note-redaction {
  font-size: 14px; line-height: 1.6; color: var(--gris-texte);
  background: #FFF8E6; border: 1px dashed #E0C377; border-radius: 10px;
  padding: 14px 16px;
}
.note-redaction::before {
  content: 'Visible de vous seul';
  display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 600; color: #A07A1E; margin-bottom: 6px;
}

/* Liste de responsabilités sous un jalon de parcours. Elle reprend les puces
   en losange du reste du site ; seul l'espacement au paragraphe qui la précède
   manquait, .puces étant conçu sans marge. */
.jalon-liste { margin-top: 14px; }
.jalon-liste strong { color: var(--encre); }

/* Le chapô de la maquette tenait en trois lignes, d'où sa largeur de 560 px.
   Le texte publié en fait quatre phrases : à cette largeur il tombait sur huit
   lignes, plus haut que large. La colonne de droite en offre 740, en prendre
   640 raccourcit la colonne sans allonger la ligne au-delà du confortable. */
.apropos-hero .intro { max-width: 640px; }

/* Bouton d'appel à l'action dans l'en-tête.
   .nav a fixe la couleur des liens du menu et l'emporte sur .bouton, qui ne
   porte qu'une classe : le bouton héritait donc du gris du menu sur son fond
   corail, au lieu du blanc, sur toutes les pages du site. Idem au survol, où
   .nav a:hover l'emportait sur .bouton:hover. */
.nav a.bouton, .nav a.bouton:hover { color: #fff; }

/* Une citation peut compter plusieurs paragraphes : blockquote n'est plus le
   porteur direct du texte, il faut donc reporter la mise en forme sur les p
   qu'il contient, et poser l'espacement entre eux. */
.temoignage blockquote p { margin: 0; }
.temoignage blockquote p + p { margin-top: 14px; }

/* Témoignages en bandes horizontales.
   En trois colonnes, la citation la plus longue imposait sa hauteur aux deux
   autres : 937 px de haut pour 340 de large, une proportion qui se lit mal.
   Chaque témoignage occupe désormais toute la largeur, logo et signature à
   gauche, citation à droite.

   La citation est plafonnée en largeur : sans cela la bande pleine largeur
   donnait 96 caractères par ligne, mesurés, là où la lecture décroche au-delà
   d'environ 75. L'espace laissé à droite est le prix d'une ligne lisible. */
.grille-temoignages { grid-template-columns: 1fr; gap: 20px; }

.temoignage {
  display: grid;
  grid-template-columns: 190px 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 44px;
  row-gap: 16px;
  align-items: start;
  padding: 34px 38px;
}
.temoignage img { grid-column: 1; grid-row: 1; }
.temoignage figcaption { grid-column: 1; grid-row: 2; margin-top: 0; }
.temoignage blockquote { grid-column: 2; grid-row: 1 / -1; max-width: 55ch; }

@media (max-width: 820px) {
  /* Sous cette largeur, la colonne de citation deviendrait trop etroite :
     on revient a l'empilement, logo puis citation puis signature. */
  .temoignage { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 20px; padding: 30px; }
  .temoignage img, .temoignage blockquote, .temoignage figcaption { grid-column: 1; grid-row: auto; }
}

/* =========================================================
   ANIMATIONS
   ========================================================= */

/* Révélation au défilement.
   La classe a-reveler n'est posée que par le script, et uniquement sur des
   éléments situés sous le premier écran : sans JavaScript, ou si le visiteur
   a demandé moins d'animations, rien n'est jamais masqué.

   Seules opacity et transform sont animées. Elles sont traitées par le
   compositeur, sans recalcul de mise en page ni repeinture, et ne pèsent donc
   pas sur le temps de blocage du fil principal. */
/* Course plus longue et duree plus courte qu'un reglage naif : 18 px en 380 ms
   au lieu de 14 px en 450 ms. La vitesse est ce qui distingue un mouvement net
   d'un mouvement qui traine.

   La courbe demarre vite puis s'installe, au lieu du ease-out lineaire au
   depart : l'element est visuellement arrive bien avant la fin de la
   transition, et ne semble donc plus poursuivre le defilement. */
.a-reveler { opacity: 0; transform: translateY(18px); }
.a-reveler.revele {
  opacity: 1;
  transform: none;
  transition: opacity .38s cubic-bezier(.16, 1, .3, 1), transform .38s cubic-bezier(.16, 1, .3, 1);
}

/* Micro-interactions au survol.
   Le soulèvement est volontairement faible : à 2 px il se sent plus qu'il ne
   se voit, ce qui est l'effet recherché. Au-delà, la page devient agitée. */
.carte, .famille, .client, .article-carte, .temoignage {
  transition: border-color .2s, transform .2s ease-out, box-shadow .2s ease-out;
}
.carte:hover, .famille:hover, .client:hover, .article-carte:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26, 29, 38, 0.07);
}

.bouton { transition: background .2s, transform .2s ease-out; }
.bouton:hover { transform: translateY(-1px); }

/* La flèche des liens de lecture avance légèrement. Elle est produite par un
   ::after, donc animable indépendamment du libellé. */
.lien-tout::after, .cas-lien a::after, .lien-realisations a::after, .etude-site a::after {
  display: inline-block;
  transition: transform .2s ease-out;
}
.lien-tout:hover::after,
.cas-lien a:hover::after,
.lien-realisations a:hover::after,
.etude-site a:hover::after { transform: translateX(4px); }

/* Un visiteur qui a demandé moins d'animations ne reçoit aucun mouvement, y
   compris au survol. Le retour visuel passe alors par la seule couleur, qui
   suffit à signaler l'état.

   Cette règle couvre aussi le cercle du hero, dont la déclaration séparée plus
   haut devient redondante mais reste inoffensive. */
@media (prefers-reduced-motion: reduce) {
  .a-reveler, .a-reveler.revele { opacity: 1; transform: none; transition: none; }
  .carte:hover, .famille:hover, .client:hover, .article-carte:hover,
  .bouton:hover { transform: none; }
  .lien-tout:hover::after, .cas-lien a:hover::after,
  .lien-realisations a:hover::after, .etude-site a:hover::after { transform: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Cartes d'article de hauteur egale dans le carrousel.
   Une taille transversale explicite l'emporte sur align-items: stretch : le
   height: 100% pose sur .article-carte empechait donc l'etirement, et chaque
   carte prenait la hauteur de son contenu. Une categorie longue, qui fait
   passer la ligne de meta sur deux lignes, produisait une carte plus haute que
   ses voisines. Dans la grille de la page Articles le probleme ne se voyait
   pas, la grille etirant deja ses elements. */
.carrousel-piste > .article-carte { height: auto; align-self: stretch; }

/* Le temps de lecture ne se coupe jamais en son milieu : s'il doit passer a la
   ligne, il y passe entier. */
.article-meta > span:last-child { white-space: nowrap; }

/* Dans une carte, le temps de lecture passe systematiquement sous le badge.
   Il y passait deja des que la categorie etait longue, mais seulement dans ce
   cas : les titres des cartes voisines ne s'alignaient plus. En l'y mettant
   toujours, la ligne de meta a la meme hauteur partout et les titres partent
   du meme niveau, quelle que soit la longueur du nom de categorie.

   Limite aux cartes : sur le bandeau d'un article ou d'une etude de cas, la
   meme meta dispose de toute la largeur de la page et n'a aucune raison de
   s'empiler. */
.article-carte .article-meta {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}