/* ═══════════════════════════════════════════════════════════════
   PHOTOGRAPHIE
   Cadrage type Sage : paysage, angles vifs, object-fit cover.
   Une image manquante affiche un repère explicite au lieu de
   casser la mise en page (voir handleMissingPhotos dans shared.js).
   ═══════════════════════════════════════════════════════════════ */

.photo {
  position: relative;
  overflow: hidden;
  background: var(--ink-100);
  border-radius: 0;
  display: block;
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Ratios (repris des cadrages Sage : 1.8 / 1.6 / 1.4) */
.photo--band    { aspect-ratio: 21 / 9; }
.photo--wide    { aspect-ratio: 16 / 9; }
.photo--hero    { aspect-ratio: 16 / 10; }
.photo--land    { aspect-ratio: 7 / 5; }
.photo--square  { aspect-ratio: 1 / 1; }
.photo--portrait{ aspect-ratio: 4 / 5; }

/* Portrait d'équipe : carré, aligné sur le thème sans arrondi */
.photo--member {
  width: 150px;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--ink-200);
}
@media (max-width: 600px) { .photo--member { width: 120px; } }

/* Petit avatar rond (citations, signatures) */
.photo--avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Nuance : léger voile pour unifier des photos d'origines diverses */
.photo--muted img { filter: saturate(0.92) contrast(1.02); }

/* État vide : repère de production, jamais une fausse image */
.photo.is-empty {
  background: var(--ink-100);
  border: 1px dashed var(--ink-300);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
}
.photo.is-empty::after {
  content: attr(data-placeholder);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* --ink-400 ne donnait que 3,0 sur ce fond. L'audit de contraste ne lit
     pas les pseudo-elements : il ne l'aurait pas signale. */
  color: var(--ink-500);
  text-align: center;
  padding: 0.75rem;
  line-height: 1.5;
}

/* Bande photo pleine largeur */
.photo-band { position: relative; background: var(--fond-sombre); }
.photo-band .photo { aspect-ratio: 21 / 9; }
@media (max-width: 700px) { .photo-band .photo { aspect-ratio: 4 / 3; } }

/* Figure avec légende */
.photo-figure figcaption {
  margin-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/* Portraits d'équipe : carrés, comme le reste du thème */
.team-photo { border-radius: 0; border-color: var(--ink-200); }

/* ═══════════════════════════════════════════════════════════════
   MÉGA-MENU : vignettes en couleur
   Bandeau d'aplat coloré en tête de carte, pictogramme blanc.
   Une couleur par carte (classe ill--*), toujours en aplat.
   ═══════════════════════════════════════════════════════════════ */
.persona-illustration {
  width: 100%;
  height: 58px;
  border-radius: 7px;
  margin-bottom: 0.65rem;
  color: #fff;
  background: var(--ill, var(--bleu-700));
}
.persona-illustration::after {           /* rond décoratif, coin bas droit */
  content: "";
  position: absolute;
  width: 54px; height: 54px;
  right: -14px; bottom: -22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}
.persona-illustration svg { width: 26px; height: 26px; position: relative; z-index: 1; }
.persona-card:hover .persona-illustration svg { transform: scale(1.08); }
.persona-illustration svg { transition: transform 0.2s var(--ease-smooth); }

/* Aplats des vignettes : le picto est BLANC dessus, chaque teinte doit
   donc rester assez sombre (seuil visé : 4,5:1 avec le blanc).
   Harmonisées autour du nouveau bleu accent. */
.ill--bleu    { --ill: var(--t-bleu); }   /* l'accent du site */
.ill--ciel    { --ill: var(--t-ciel); }
.ill--sauge   { --ill: var(--t-sauge); }
.ill--ocre    { --ill: var(--t-ocre); }
.ill--terra   { --ill: var(--t-terra); }
.ill--prune   { --ill: var(--t-prune); }
.ill--rose    { --ill: var(--t-rose); }
.ill--ardoise { --ill: var(--t-ardoise); }
.ill--pastel  { --ill: var(--t-pastel); color: var(--fond-sombre); }   /* clair : picto foncé */

.persona-card.featured .persona-illustration { background: var(--ill); }
.persona-card.featured .persona-illustration::after { background: rgba(255, 255, 255, 0.35); }

/* ═══════════════════════════════════════════════════════════════
   HERO : captures d'une réalisation
   ═══════════════════════════════════════════════════════════════ */
.hero-shots {
  display: block;
  aspect-ratio: 6 / 5;
  text-decoration: none;
}
.hero-shots-fond {                          /* aplat pastel derrière les captures */
  position: absolute;
  inset: 8% 0 0 12%;
  border-radius: 22px;
  background: var(--accent-500);
}
.hero-shots-fond::after {
  content: "";
  position: absolute;
  width: 20%; aspect-ratio: 1;
  right: -5%; top: -9%;
  border-radius: 50%;
  background: var(--t-ocre);
  opacity: .85;
}
.hero-shot {
  position: absolute;
  display: block;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--ink-200);
  background: #fff;
  box-shadow: 0 18px 40px rgba(38, 37, 36, 0.16);
  transition: transform .35s var(--ease-smooth);
}
.hero-shot--main { width: 88%; left: 0; top: 0; }
.hero-shot--side { width: 58%; right: 0; bottom: 4%; }
.hero-shots:hover .hero-shot--main { transform: translateY(-4px); }
.hero-shots:hover .hero-shot--side { transform: translateY(-8px); }
.hero-shots-tag {
  position: absolute;
  left: 4%; bottom: 6%;
  background: var(--fond-sombre);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: .45rem .8rem;
  border-radius: 999px;
}

/* ═══════════════════════════════════════════════════════════════
   HERO · VITRINE A ONGLETS

   Le hero montrait une capture de Migratron et rien d'autre : joli, mais
   muet sur ce que fait l'outil, et laissant croire qu'on ne fait que ca.

   Quatre projets, chacun avec sa capture et trois phrases de ce qu'il fait.
   Les quatre NOMS sont visibles d'emblee : c'est la difference avec un
   carrousel, ou les vues suivantes ne sont vues que par ceux qui patientent
  , et ou la rotation automatique dispute l'attention au titre, impose une
   commande de pause (WCAG 2.2.2) et fait charger plusieurs grandes images
   avant le premier affichage.
   ═══════════════════════════════════════════════════════════════ */
.hero-vitrine {
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  /* Les points sont freres des vues, pas enfants : c'est cette gouttiere
     qui les separe du bloc.
     10 px seulement : la rangee fait 44 px de haut pour un point visible
     de 9, centre. Le point apparait donc 17 px plus bas que le haut de la
     rangee, soit 15 px sous le lisere. C'est la zone d'appui qui frole le
     lisere, pas la pastille. */
  gap: 10px;
}
/* Le bloc marine d'abord : c'est lui qui porte le propos, la capture
   l'illustre. */
.vitrine-vue {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.vitrine-vue[hidden] { display: none; }

/* ── La capture, posee sur l'aplat ───────────────────────────── */
/* ── Un seul bloc ─────────────────────────────────────────────
   La legende et la capture ne sont plus deux elements poses l'un sur
   l'autre mais un seul bloc, ferme par un lisere decale en bas et a
   droite. L'aplat separe, le chevauchement et la perspective ont disparu
   avec : ils cherchaient a creer une profondeur que ce decalage donne
   tout seul, et d'une facon plus nette.

   Le lisere est une ombre portee sans flou : un rectangle plein, decale,
   que le bloc recouvre. Pas d'element a positionner, et il epouse les
   angles arrondis sans qu'on ait a les repeter. */
.vitrine-bloc {
  border-radius: 14px;
  overflow: hidden;              /* la capture epouse les angles du bloc */
  box-shadow: 12px 12px 0 var(--vue);
  transition: box-shadow .3s var(--ease-smooth);
}
.vitrine-scene {
  position: relative;
  /* Deux reperes calent la colonne de droite sur celle de gauche, et ce
     sont deux reglages distincts :
       - cette hauteur pose le bas du lisere sur le bas des gros chiffres
         (+100 / 20+ / 100%) ;
       - la gouttiere de .hero-vitrine pose le bas des points sur le bas
         de la colonne.
     L'un deplace l'autre : changer cette hauteur descend aussi les points,
     il faut reprendre la gouttiere d'autant. A revoir si la legende ou les
     chiffres changent de hauteur. */
  height: 239px;
}
/* ── Une teinte par exemple ──────────────────────────────────
   L'aplat, le rond et l'onglet actif prennent la meme couleur, portee
   par `data-teinte` sur la vitrine : le JS ne fait que recopier celle de
   l'onglet choisi. Un seul endroit a modifier pour changer une teinte.

   Ces valeurs sont DECORATIVES : aucun texte ne se pose sur l'aplat ni
   sur le rond, elles peuvent donc etre franches. `--vue-onglet`, elle,
   porte du texte : c'est pourquoi le rouge y est plus sombre que l'aplat,
   et pourquoi le jaune s'accompagne d'un texte marine plutot que blanc.
   Ne pas confondre avec la famille `--t-*`, qui est assombrie pour tenir
   le AA sous du blanc. */
.hero-vitrine {
  --vue: var(--t-bleu);
  --vue-onglet: var(--t-bleu);
  --vue-sur-onglet: var(--sur-accent);
}
.hero-vitrine[data-teinte="vert"] {
  --vue: #3F8A5B;
  --vue-onglet: var(--t-sauge);
}
.hero-vitrine[data-teinte="rouge"] {
  --vue: #C1512F;
  --vue-onglet: var(--t-terra);
}
.hero-vitrine[data-teinte="jaune"] {
  --vue: #F7B500;                  /* franc : le lisere ne porte pas de texte */
  --vue-onglet: #F2B01E;
  --vue-sur-onglet: var(--fond-sombre);
}

.vitrine-capture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* `cover` plutot que `contain` : dans un bloc ferme, une capture calee
     laisserait des bandes blanches de part et d'autre. Elle remplit, et
     c'est le bas qui se coupe, la ou une capture d'ecran a le moins a
     dire. */
  object-fit: cover;
  object-position: top left;
  background: #fff;
}

/* ── Expertises mobilisees, et ce qu'on a fait ────────────────
   Les onglets nomment un USAGE (« prise de commande »), pas un produit
   ni une expertise : c'est ce que le visiteur a en tete. Les expertises
   repondent ensuite a « avec quoi vous faites ca », et renvoient vers
   leur page. */
/* Les angles sont portes par .vitrine-bloc : la legende n'en a plus. */
.vitrine-legende {
  background: var(--fond-sombre);
  padding: 1.1rem 1.25rem 1.4rem;
}
.vitrine-rubrique {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  /* --ink-400 ne donnait que 4,27 sur le marine : sous le seuil AA.
     .vitrine-legende etant hors rebascule, la couleur se pose ici. */
  color: var(--ink-300);
}
.vitrine-rubrique + * { margin-top: .5rem; }
.vitrine-expertises {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: 1rem;
}
.vitrine-expertise {
  padding: .3rem .7rem;
  border: 1px solid rgba(159, 196, 242, .45);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-400);
  text-decoration: none;
}
.vitrine-expertise:hover {
  background: var(--accent-400);
  color: var(--fond-sombre);
}
.vitrine-faits {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: .4rem;
}
.vitrine-faits li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 14px;
  line-height: 1.4;
  color: var(--accent-100);
}
.vitrine-faits li::before {
  content: "";
  position: absolute;
  left: 0; top: .5em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-400);
}
.vitrine-titre {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}
.vitrine-titre:hover { text-decoration: underline; }
.vitrine-titre span { color: var(--accent-400); }

/* ── Les points ───────────────────────────────────────────────
   Quatre onglets nommes occupaient deux rangees et pesaient autant que
   le contenu. Des points disent la meme chose : il y a plusieurs vues,
   en voici une. Le nom de chaque realisation reste dans le bouton, en
   `.sr-only` : un lecteur d'ecran annonce « Portail client », pas
   « bouton 3 ». */
/* Visible des lecteurs d'ecran, invisible a l'oeil. `display: none`
   l'aurait retire de l'arbre d'accessibilite, ce qui est l'inverse du
   but : on le sort de l'ecran sans le sortir du document. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.vitrine-points {
  display: flex;
  justify-content: center;
  gap: .25rem;
}
/* Le bouton EST le point. La couleur d'etat se pose donc sur l'element
   qui porte `aria-selected`, et nulle part ailleurs : portee par un
   ::before ou par un enfant, elle ne se recalculait pas au changement
   d'attribut : le point actif restait gris, l'ancien gardait sa teinte.
   Constate a chaque clic, sur les deux variantes.

   Le point visible fait 9 px, la zone d'appui 44 : `background-clip`
   limite la peinture a la boite de contenu, le remplissage fait le
   reste. */
.vitrine-point {
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 17.5px;
  border: 0;
  border-radius: 50%;
  background-color: var(--ink-300);
  background-clip: content-box;
  cursor: pointer;
  transition: background-color .25s var(--ease-smooth);
}
.vitrine-point:hover { background-color: var(--ink-400); }
.vitrine-point[aria-selected="true"] { background-color: var(--vue-onglet); }
.vitrine-point:focus-visible { outline: 2px solid var(--bleu-700); outline-offset: -8px; }

@media (max-width: 700px) {
  .vitrine-faits li { font-size: 13.5px; }
}

/* ═══════════════════════════════════════════════════════════════
   RECIT : pages de texte suivi (Notre histoire)

   Une colonne etroite : au-dela de ~70 caracteres par ligne, l'oeil
   perd le debut de la ligne suivante.
   ═══════════════════════════════════════════════════════════════ */
.recit {
  max-width: 62ch;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ink-800);
}
.recit p { margin: 0 0 1.4rem; }
.recit p:last-child { margin-bottom: 0; }
.recit strong { color: var(--ink-900); font-weight: 600; }
.recit em { font-style: italic; color: var(--accent-600); }

/* La derniere phrase porte la conclusion : on la detache. */
.recit-chute {
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--ink-200);
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--ink-900);
}
.recit--sombre { margin-top: 3rem; }
.recit--sombre .recit-chute { border-top-color: rgba(255, 255, 255, .18); }

/* ═══════════════════════════════════════════════════════════════
   NOTRE HISTOIRE : quatre chapitres

   Un recit de cette longueur en colonne unique faisait page vide :
   beaucoup de blanc, rien pour accrocher l'oeil, aucune idee de ce qui
   reste a lire. D'ou le sommaire en tete, la frise qui transforme le
   premier chapitre en quatre jalons datés, et des chapitres numerotes
   qui alternent les fonds.
   ═══════════════════════════════════════════════════════════════ */

/* ── Sommaire ────────────────────────────────────────────────── */
.sommaire {
  background: var(--fond-sombre);
  padding: 1.25rem 0;
}
.sommaire-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
}
.sommaire-liste a {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  min-height: 44px;
  padding: .4rem .2rem;
  text-decoration: none;
  color: var(--accent-100);
  border-top: 2px solid rgba(159, 196, 242, .3);
  transition: color .2s, border-color .2s;
}
.sommaire-liste a:hover { color: #fff; border-top-color: var(--accent-400); }
.sommaire-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-400);
}
.sommaire-nom { font-size: 14px; line-height: 1.3; }

@media (max-width: 800px) {
  .sommaire-liste { grid-template-columns: 1fr 1fr; }
}

/* ── Tete de chapitre ────────────────────────────────────────── */
.chapitre-tete { max-width: 46rem; margin-bottom: 3rem; }
.chapitre-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-600);
  margin-bottom: .6rem;
}
.chapitre-num.on-dark { color: var(--accent-400); }

/* ── Frise des jalons ────────────────────────────────────────── */
.jalons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.jalon {
  position: relative;
  padding: 0 0 2.5rem 2.5rem;
  border-left: 2px solid var(--ink-200);
}
/* La derniere etape n'a plus de suite : le trait s'arrete a sa pastille. */
.jalon--final { border-left-color: transparent; padding-bottom: 0; }
.jalon::before {
  content: "";
  position: absolute;
  left: -9px; top: .35rem;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--cream);
  border: 3px solid var(--ink-300);
}
.jalon--final::before { border-color: var(--accent-500); background: var(--accent-500); }
.jalon-date {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-600);
}
.jalon-titre {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink-900);
  margin: .3rem 0 .6rem;
}
.jalon p {
  max-width: 58ch;
  line-height: 1.7;
  color: var(--ink-800);
  margin: 0;
}

/* Au-dela de 900 px, la date passe dans une colonne a gauche :
   l'oeil balaye la chronologie sans lire les paragraphes. */
@media (min-width: 901px) {
  .jalon {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: 0 2rem;
    padding-left: 3rem;
  }
  .jalon-date { grid-row: 1 / span 3; text-align: right; padding-top: .35rem; }
  .jalon-titre { margin-top: 0; }
}

/* ── Chapitre 02 : le nom ────────────────────────────────────── */
.nom-bloc {
  display: grid;
  grid-template-columns: 20rem minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}
@media (max-width: 900px) { .nom-bloc { grid-template-columns: 1fr; gap: 2rem; } }

.nom-definition {
  margin: 1rem 0 0;
  padding: 1.5rem;
  border: 1px solid rgba(159, 196, 242, .35);
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--accent-100);
}
.nom-definition strong {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
}
.nom-definition em { color: var(--accent-400); font-style: italic; }
.nom-texte > p { max-width: 58ch; line-height: 1.75; margin: 0 0 1.3rem; }
.nom-texte > p:last-child { margin-bottom: 0; }

/* ── Chapitre 03 : l'ambition ──────────────────────────────────
   Le texte et les axes cote a cote. Empiles : paragraphe, cartes,
   paragraphes : ils fragmentaient la lecture en trois blocs et
   etiraient la page. Les cinq axes tiennent desormais dans une
   colonne, ce qui les rend aussi insensibles a leur nombre. */
.ambition-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 3.5rem;
  align-items: start;
}
@media (max-width: 900px) { .ambition-grid { grid-template-columns: 1fr; gap: 2.5rem; } }

.ambition-texte > p {
  max-width: 54ch;
  line-height: 1.75;
  color: var(--ink-800);
  margin: 0 0 1.3rem;
}
.ambition-texte > p:last-child { margin-bottom: 0; }
.ambition-texte strong { color: var(--ink-900); font-weight: 600; }

.axes {
  list-style: none;
  margin: 0;
  padding: 1.75rem;
  display: grid;
  gap: 1.4rem;
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: 14px;
}
.axe { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 1rem; align-items: start; }
.axe-picto {
  display: grid;
  place-content: center;
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--ill, var(--bleu-700));
  color: #fff;
}
.axe-picto svg { width: 22px; height: 22px; }
.axe-texte { display: grid; gap: .15rem; }
.axe-titre {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-900);
}
.axe-desc { font-size: 14px; line-height: 1.45; color: var(--ink-700); }

/* Le chapitre 04 enchaine directement : on resserre la respiration
   entre les deux, qui faisait un trou. */
.page-section--serree { padding-bottom: 2.5rem; }

/* ── Chapitre 04 : nous rejoindre ────────────────────────────── */
.rejoindre-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: start;
}
@media (max-width: 900px) { .rejoindre-grid { grid-template-columns: 1fr; gap: 2.5rem; } }

.rejoindre-texte > p { max-width: 54ch; line-height: 1.75; margin: 0 0 1.3rem; }
.rejoindre-direct {
  margin-top: 1.8rem;
  font-size: 14.5px;
  color: var(--ink-700);
}
.rejoindre-direct a { color: var(--bleu-700); font-weight: 600; }

/* Le depot de fichier : un cadre en pointilles, pour qu'on voie qu'il
   s'agit d'autre chose qu'un champ de saisie. */
.contact-form input[type="file"] {
  padding: .8rem 1rem;
  border-style: dashed;
  background: var(--cream);
  cursor: pointer;
  font-size: 13.5px;
}
.contact-form input[type="file"]::file-selector-button {
  margin-right: .9rem;
  padding: .4rem .9rem;
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-800);
  cursor: pointer;
}
.contact-form input[type="file"]:hover::file-selector-button { border-color: var(--bleu-700); color: var(--bleu-700); }

/* ═══════════════════════════════════════════════════════════════
   TEMOIGNAGES CLIENTS
   ═══════════════════════════════════════════════════════════════ */
/* Les colonnes s'adaptent au nombre de temoignages, tant que certains
   attendent la validation du client, il peut n'y en avoir qu'un ou deux.
   Une grille a trois colonnes fixes l'aurait laisse seul a gauche. */
.temoignages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 384px));
  justify-content: center;
  gap: 1.5rem;
  margin-top: 3rem;
}
@media (max-width: 640px) { .temoignages { grid-template-columns: 1fr; } }

.temoignage {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: 14px;
  overflow: hidden;
}
.photo--temoignage { aspect-ratio: 3 / 2; }
/* Les photos fournies n'ont pas toutes le meme format : 3/2 et 1.91/1 en
   paysage, mais 3/4 en portrait. Dans un cadre paysage, un portrait centre
   perd la tete du sujet : on cale le cadrage en haut pour ces photos-la. */
.photo--haut img { object-position: center top; }
/* La derniere phrase de la section clients : elle resume la posture,
   elle merite de ne pas se fondre dans le paragraphe precedent. */
.clients-chute {
  max-width: 44rem;
  margin: 2.5rem auto 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--ink-800);
}
.clients-chute strong { color: var(--accent-600); font-weight: 600; }

.temoignage blockquote {
  margin: 0;
  padding: 1.5rem 1.5rem 1rem;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-800);
  flex: 1;
}
/* Les guillemets sont poses par le style, pas tapes dans le texte :
   la citation reste copiable telle qu'elle a ete donnee. */
.temoignage blockquote::before { content: "« "; color: var(--accent-600); }
.temoignage blockquote::after  { content: " »"; color: var(--accent-600); }

.temoignage figcaption {
  padding: 0 1.5rem 1.5rem;
  display: grid;
  gap: .15rem;
}
.temoignage-nom {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-900);
}
.temoignage-role { font-size: 13px; color: var(--ink-500); }
.temoignage-lien {
  margin-top: .6rem;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--bleu-700);
  text-decoration: none;
}
.temoignage-lien:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════
   BANDE CLIENTS : nom et domaine d'activite

   Pas de fichiers de logo a ce stade : les noms sont composes
   typographiquement. Des que les logos arrivent, remplacer le
   <span class="client-logo-nom"> par un <img>, le reste tient.
   ═══════════════════════════════════════════════════════════════ */
.page-section--creme { background: var(--cream-warm); }

.clients-logos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 3rem;
  background: var(--ink-200);
  border: 1px solid var(--ink-200);
  border-radius: 14px;
  overflow: hidden;
}
@media (max-width: 700px) { .clients-logos { grid-template-columns: 1fr 1fr; } }

.client-logo {
  display: grid;
  place-content: center;
  gap: .3rem;
  text-align: center;
  padding: 2rem 1rem;
  background: var(--white);
}
.client-logo-nom {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink-900);
}
.client-logo-domaine {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION · NOS RÉALISATIONS
   ═══════════════════════════════════════════════════════════════ */
.section-realisations {
  padding: var(--section-pad-y) 0;
  background: var(--white);
}
.realisation {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 3.5rem;
  align-items: center;
}
.realisation-tag {
  display: inline-block;
  background: var(--accent-100);
  color: var(--accent-600);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .3rem .65rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}
.realisation h3 { margin-bottom: .8rem; }
.realisation-texte p { color: var(--ink-700); line-height: 1.6; margin-bottom: 1.2rem; }
.realisation-points { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.realisation-points li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: .45rem;
  color: var(--ink-800);
}
.realisation-points li::before {
  content: "";
  position: absolute;
  left: 0; top: .5em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--bleu-teal);
}
.realisation-captures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: 18px;
  background: var(--accent-100);   /* teinte claire : la légende reste lisible */
}
.capture { margin: 0; }
.capture--large { grid-column: 1 / -1; }
.capture img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid rgba(38, 37, 36, .08);
  background: #fff;
}
.capture figcaption {
  font-size: 12.5px;
  color: var(--ink-800);
  margin-top: .45rem;
}
@media (max-width: 900px) {
  .realisation { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 500px) {
  .realisation-captures { grid-template-columns: 1fr; padding: .75rem; }
}

/* Autres réalisations : cartes avec visuel sur aplat coloré */
.realisations-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 4rem;
}
.real-carte {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  overflow: hidden;
  background: var(--white);
}
.real-carte--ocre  { --real: var(--t-ocre); }
.real-carte--sauge { --real: var(--t-sauge); }
.real-carte--terra { --real: var(--t-terra); }
.real-visuel {
  position: relative;
  background: var(--real);
  padding: 1.5rem 1.5rem 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.real-visuel img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 10px 28px rgba(38, 37, 36, .22);
  transition: transform .35s var(--ease-smooth);
}
.real-carte:hover .real-visuel img { transform: translateY(-4px); }
.real-visuel .real-visuel-second {          /* 2e capture, décalée en bas à droite */
  position: absolute;
  width: 58%;
  right: .9rem;
  bottom: -1.5rem;
  border-radius: 8px;
}
.real-corps { padding: 1.4rem 1.5rem 1.6rem; }
.real-corps h3 { font-size: 1.3rem; margin-bottom: .6rem; }
.real-corps p { color: var(--ink-700); font-size: 15px; line-height: 1.6; margin-bottom: 1rem; }
@media (max-width: 1000px) {
  .realisations-grille { grid-template-columns: 1fr; max-width: 640px; }
}

/* Méthode : encarts « itérations » et « ROI » */
.method-encarts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.method-encart {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding: 1.6rem 1.75rem;
  border-radius: var(--radius);
  color: #fff;
  line-height: 1.55;
  font-size: 0.95rem;
}
.method-encart strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin-bottom: .35rem;
}
.method-encart svg { width: 34px; height: 34px; flex-shrink: 0; margin-top: .15rem; }
.method-encart--boucle { background: #1B5FBF; }
.method-encart--roi    { background: #4A7355; }   /* assombri : blanc dessus passait à 3,86 */
@media (max-width: 800px) {
  .method-encarts { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   FORMULAIRES : réponse d'envoi et champ anti-robot
   ═══════════════════════════════════════════════════════════════ */

/* Champ piège : invisible et inatteignable pour un humain, rempli par les robots */
.champ-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form-message:empty { display: none; }
.form-message { margin: 0.75rem 0 0; font-size: 0.95rem; line-height: 1.5; }
.form-message.ok { color: var(--green-500); }
.form-message.erreur { color: var(--red-500); }
/* Pied de page : sur fond sombre, et sous la ligne champ + bouton */
.footer-newsletter-form { flex-wrap: wrap; }
.footer-newsletter-form .form-message { flex-basis: 100%; }
.footer-newsletter-form .form-message.ok { color: var(--accent-400); }
.footer-newsletter-form .form-message.erreur { color: #F2A99F; }