/* ==========================================================================
   Site portfolio de Giacomo Genna.

   Mise en page reprise de aristeya.lovable.app, mesuree dans le DOM le
   2026-09-01 (relevé complet : QG/1-projets/giacomo/production/site-portfolio/
   releve-design-aristeya.md) : colonne de 1100 px, 80 px de rythme vertical,
   gros titres a l'interlettrage serre, sur-titres en majuscules espacees,
   alternance blanc / creme.

   Typographie et palette reprises de la charte Giacomo Genna, celle de
   l'audit CA CARTONNE : DM Sans partout, Breathing en accent manuscrit,
   accent bronze. Aristeya n'a aucune couleur d'accent, c'est le seul endroit
   ou l'on s'ecarte de lui, et c'est volontaire.
   ========================================================================== */

@font-face {
  font-family: 'Breathing';
  src: url('fonts/breathing.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Fonds */
  --blanc: #ffffff;
  --papier-2: #f7f5ef;
  --fond-gris: #efe9e2;
  --encre: #212121;
  --encre-2: #2c2620;

  /* Encres */
  --encre-inverse: #ffffff;
  --corps-encre: #4b4b45;
  --corps-inverse: #d9d5cf;
  --gris-inverse: #b0aaa0;      /* le secondaire sur fond sombre, tenu au-dessus de 4,5 */
  --gris-clair: #6d6d64;

  /* Accent bronze */
  --accent: #8e5f44;
  --accent-fonce: #74492f;
  --accent-pale: #f0e6dd;
  --accent-clair: #c99b7f;

  /* Filets */
  --filet: #e3ded4;
  --filet-2: #c8c1b4;
  --filet-sombre: rgba(255, 255, 255, 0.14);

  /* Typographie */
  --titre: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --corps: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --script: 'Breathing', 'Brush Script MT', cursive;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Formes */
  --rayon: 12px;
  --rayon-carte: 16px;
  --pastille: 9999px;

  /* Mesure, relevee sur aristeya */
  --colonne: 1200px;      /* brief du 2026-09-03 : 1180 a 1240 */
  --marge: clamp(1.35rem, 4vw, 2.5rem);
  --rythme: 112px;        /* brief : 96 a 140 sur desktop */
}

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

html { scroll-behavior: smooth; scroll-padding-top: 2rem; }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--corps);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.colonne {
  max-width: var(--colonne);
  margin: 0 auto;
  padding-left: var(--marge);
  padding-right: var(--marge);
}

section { padding-top: var(--rythme); padding-bottom: var(--rythme); }
.section--creme { background: var(--papier-2); }
.section--sombre { background: var(--encre); color: var(--corps-inverse); }
.section--sombre h2, .section--sombre h3, .section--sombre strong { color: var(--encre-inverse); }
.section--sombre .surtitre { color: var(--accent-clair); }

/* ---------- Typographie, geste repris d'aristeya ---------- */

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

h1 {
  /* la coupure tombe la ou la ligne est equilibree, pas au dernier mot qui rentre */
  text-wrap: balance;
  font-size: clamp(2.25rem, 5.5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.038em;
  line-height: 1.08;
}

h2 {
  text-wrap: balance;
  font-size: clamp(2rem, 4.4vw, 3.375rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.1;
}

h3 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

p { margin: 0 0 1rem; color: var(--corps-encre); }
.section--sombre p { color: var(--corps-inverse); }

.surtitre {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.25rem;
}

.script {
  font-family: var(--script);
  font-size: 1.15em;      /* Breathing a des hampes tres hautes : a 1.4em dans un h2 de
                             54 px, le mot debordait de 44 px sur la ligne du dessus.
                             Mesure le 2026-09-01. */
  line-height: 0.85;
  display: inline-block;
  color: var(--accent);
  font-weight: 400;
  margin: 0 0.15em;
}
.section--sombre .script { color: var(--accent-clair); }

.chapo {
  font-size: 1.1875rem;
  line-height: 1.6;
  max-width: 60ch;      /* 46ch donnait 50 a 55 caracteres par ligne, 68ch en donnait 82.
                           60ch vise la fourchette confortable, 65 a 75. Mesure du 2026-09-03. */
}
/* Centre dans le CTA, on resserre : une ligne trop longue se lit mal centree. */
.cta--bloc .chapo { max-width: 58ch; }
/* Un chapo pose juste sous un h2 collait au titre : ecart mesure a 0 px
   le 2026-09-01, les deux ayant margin-top a 0. */
h2 + .chapo { margin-top: 1.5rem; }

a { color: inherit; }

/* ---------- Barre de marque : le logo, comme le jeton de l'audit CA CARTONNE ---------- */

.marque-barre {
  border-bottom: 1px solid var(--filet);
  background: var(--blanc);
}
.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 18px 0;
  font-family: var(--titre);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre);
  text-decoration: none;
}
.jeton { width: 30px; height: 30px; object-fit: contain; flex: 0 0 auto; }

/* ---------- La capture qui prouve le chiffre ---------- */

.preuve { margin: 0 0 1.75rem; max-width: 520px; }
.preuve img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--filet-2);
  border-radius: var(--rayon);
  background: var(--blanc);
}
.preuve figcaption {
  margin-top: 0.7rem;
  font-size: 0.875rem;
  color: var(--gris-clair);
}

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

.hero { padding-top: 72px; padding-bottom: 64px; }

.hero__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.hero__nom {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris-clair);
  margin: 0 0 1.5rem;
}

.hero h1 { margin-bottom: 1.15rem; }

.hero__photo {
  /* Photo ronde, demandee le 2026-09-03. Le mot GIACOMO en lettres contour a ete retire :
     sans photo detouree, il disparaissait derriere le rectangle de l'image. */
  width: min(100%, 420px);
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 50%;
  background: var(--fond-gris);
  object-fit: cover;
  object-position: center 18%;  /* sa photo est en portrait : on cadre sur le visage */
  display: block;
  margin: 0 auto;
}

/* ---------- Les chiffres du hero : PLUS UTILISE ----------
   Le bloc de 3 compteurs a ete retire du hero le 2026-09-01, sur decision de
   Giacomo. Le CSS reste ici pour qu'on puisse le remettre sans le reecrire.
   Si le hero n'en veut toujours pas dans six mois, supprimer ce bloc. */

.chiffres {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--filet);
}

.chiffre__valeur {
  font-family: var(--titre);
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--encre);
}

.chiffre__legende {
  margin: 0.6rem 0 0;
  font-size: 0.9375rem;
  color: var(--gris-clair);
  line-height: 1.4;
}

/* ---------- La bande des clients, reprise du hero d'aristeya ----------
   Releve sur leur page le 2026-09-01 : pastilles de 68 px, bordure de 1 px
   #e6e4e0, pas de 94 px (donc 26 px d'ecart), sous un label de 14 px en
   majuscules espacees de 2,24 px. Ici les pastilles portent des noms tant que
   les photos ne sont pas fournies : meme hauteur, meme bordure, meme rythme. */

.confiance {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--filet);
}

.confiance__titre {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre);
  margin: 0 0 1.5rem;
}

.bande {
  overflow: hidden;
  /* les pastilles s'effacent aux deux bords, comme un vrai defilement */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.bande__piste {
  display: flex;
  gap: 26px;
  width: max-content;
  animation: defile 38s linear infinite;
}

.bande:hover .bande__piste { animation-play-state: paused; }

@keyframes defile {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* la liste est doublee dans le HTML */
}

@media (prefers-reduced-motion: reduce) {
  .bande__piste { animation: none; }
  .bande { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

.pastille {
  display: inline-flex;
  align-items: center;
  height: 68px;
  padding: 0 26px;
  border: 1px solid var(--filet);
  border-radius: var(--pastille);
  background: var(--blanc);
  font-family: var(--titre);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--encre);
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Quand les photos arriveront : <img class="pastille pastille--photo" src="...">
   Meme gabarit, en rond, comme chez aristeya. */
.pastille--photo {
  width: 68px;
  height: 68px;
  padding: 0;
  border-radius: 50%;
  object-fit: cover;
}

.confiance__note {
  margin: 1.5rem 0 0;
  font-size: 0.9375rem;
  color: var(--gris-clair);
}

/* ---------- Le cas d'etude ---------- */

.cas { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; }
.cas__texte h2 { margin-bottom: 1.5rem; }

.citation {
  margin: 0 0 1.5rem;
  padding-left: 1.25rem;
  border-left: 3px solid var(--accent-clair);
}
.citation em { font-style: italic; }

.fiche {
  background: var(--encre-2);
  color: var(--corps-inverse);
  border-radius: var(--rayon-carte);
  padding: 28px;
}
.fiche dl { margin: 0; }
.fiche dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-clair);
}
.fiche dd {
  margin: 0.35rem 0 1.25rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--encre-inverse);
}
.fiche dd:last-child { margin-bottom: 0; }

/* Les blocs de resultat qui se suivent dans une meme etude de cas */
.cas--suite {
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid var(--filet);
}
.cas h3 { margin-bottom: 1.25rem; }
/* Le premier bloc d'une etude de cas suivait son chapo de trop pres :
   ecart mesure a 24 px le 2026-09-03, contre 56 px entre deux blocs. */
.chapo + .cas { margin-top: 56px; }

/* Le tableau de pilotage fait 1999 px de large pour 387 de haut, et porte 20 colonnes
   de texte. Reduit a la largeur de la colonne, ses en-tetes tombaient sous 8 px : mesure
   a 520 x 102 le 2026-09-03, donc illisible. Il garde sa taille et defile dans son cadre. */
figure.preuve--large {
  max-width: 100%;
  margin: 40px 0;
  overflow-x: auto;
  border: 1px solid var(--filet-2);
  border-radius: var(--rayon);
  background: var(--blanc);
}
figure.preuve--large img {
  width: auto;
  max-width: none;
  height: auto;
  display: block;
  border: 0;
  border-radius: 0;
}
figure.preuve--large figcaption { padding: 0 16px 12px; }

/* ---------- Les services, numerotes comme chez aristeya ---------- */

.services { display: grid; gap: 0; margin-top: 40px; }
.service {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 24px;
  padding: 32px 0;
  border-top: 1px solid var(--filet);
}
.service:last-child { border-bottom: 1px solid var(--filet); }
.service__num {
  font-family: var(--titre);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.service h3 { margin-bottom: 0.6rem; }
.service p { margin-bottom: 0; max-width: 58ch; }

/* ---------- Les references ---------- */

/* ---------- Les references : SECTION RETIREE le 2026-09-03 ----------
   Giacomo : "cette section ne sert a rien a mon avis". Elle faisait doublon avec le
   bandeau du hero, qui porte les memes huit noms. La phrase qui comptait ("tu peux les
   appeler") est remontee sous le bandeau. Le CSS reste ici au cas ou la section revient. */
.refs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin-top: 40px; }
.ref {
  padding: 20px 0;
  border-bottom: 1px solid var(--filet);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
}
.ref__nom { font-weight: 700; color: var(--encre); }
.ref__quoi { color: var(--gris-clair); font-size: 0.9375rem; text-align: right; }

.travaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 40px; }
.travail {
  display: block;
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-carte);
  padding: 24px;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.travail:hover { border-color: var(--accent); transform: translateY(-2px); }
.travail__type {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.travail__titre { font-family: var(--titre); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.02em; margin: 0.5rem 0 0; color: var(--encre); }
.travail__client { margin: 0.35rem 0 0; font-size: 0.9375rem; color: var(--gris-clair); }

/* ---------- Note sous les chiffres du hero ---------- */

.chiffres__note {
  margin-top: 1.75rem;
  font-size: 0.9375rem;
  color: var(--gris-clair);
  max-width: 68ch;
}

/* ---------- Une capture deja petite ne se laisse pas etirer ---------- */

.preuve--serree { max-width: 340px; }

/* ---------- Les citations, sur fond sombre ---------- */

.citations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.carte-citation {
  margin: 0;
  padding: 28px;
  background: var(--encre-2);
  border-radius: var(--rayon-carte);
  border-left: 3px solid var(--accent-clair);
}
.carte-citation p { margin: 0 0 1rem; color: var(--corps-inverse); font-size: 1.0625rem; line-height: 1.55; }
.carte-citation cite {
  font-style: normal;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-clair);
}

/* ---------- Les engagements ---------- */

.engagements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
  margin-top: 40px;
}
.engagement { border-top: 2px solid var(--accent); padding-top: 20px; }
.engagement h3 { margin-bottom: 0.6rem; font-size: 1.25rem; }
.engagement p { margin: 0; }

/* ---------- Note sous les references ---------- */

.refs__note {
  margin-top: 2rem;
  font-size: 0.9375rem;
  color: var(--gris-inverse);
  max-width: 62ch;
}

/* ---------- Les encadres de creations, repris de la page /portfolio d'aristeya ----------
   Releve chez eux le 2026-09-03 : cartes carrees de 317 px, rayon 16 px, overflow hidden,
   image en object-fit cover, legendees par secteur puis par nom du client. */

.vignettes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.vignette { margin: 0; }

.vignette__cadre {
  aspect-ratio: 1 / 1;
  border-radius: var(--rayon-carte);
  background: var(--blanc);
  border: 1px solid var(--filet);
  /* la page entiere tient dedans, on la fait defiler au lieu de la rogner */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  position: relative;
}

.vignette__cadre img {
  width: 100%;
  height: auto;                  /* la page se deroule sur toute sa longueur */
  display: block;
}

.vignette__cadre:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Un degrade en bas du cadre dit qu'il reste de la page a lire. */
.vignette__cadre::after {
  content: "";
  position: sticky;
  bottom: 0;
  display: block;
  height: 56px;
  margin-top: -56px;
  background: linear-gradient(to top, rgba(255,255,255,0.95), rgba(255,255,255,0));
  pointer-events: none;
}

.vignette figcaption { margin-top: 14px; display: block; }

.vignette__secteur {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.vignette__nom {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--titre);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--encre);
}

.travaux__note {
  margin: 32px 0 0;
  font-size: 0.9375rem;
  color: var(--gris-clair);
  max-width: 72ch;
}

/* ---------- L'appel a l'action ---------- */

.cta { text-align: center; }
.cta h2 {
  margin-bottom: 2rem;
  line-height: 1.4;
  padding-bottom: 0.3em;   /* la descente de la cursive depassait de 22 px sous le titre
                              a 390 px de large. Mesure le 2026-09-01. */
}

.bouton {
  display: inline-block;
  background: var(--accent);
  color: var(--blanc);
  text-decoration: none;
  font-weight: 800;
  font-size: 1.1875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 20px 40px;
  border-radius: var(--pastille);
  transition: background 0.2s ease;
}
.bouton:hover { background: var(--accent-fonce); }

/* Les deux appels a l'action cote a cote : la prise de RDV en plein, WhatsApp en contour */
.actions { display: flex; align-items: center; justify-content: center; gap: 0.75rem; flex-wrap: wrap; }
.bouton--second {
  background: transparent;
  color: var(--accent-fonce);
  border: 1px solid var(--accent);
  /* le contour prend 2 px : on les reprend sur le remplissage pour aligner les deux hauteurs */
  padding: 19px 39px;
}
.bouton--second:hover { background: var(--accent); color: var(--blanc); }

/* Sur fond encre, le bouton en contour prend les couleurs claires : en brun sur noir il
   tombait sous 2 de contraste et ne se voyait plus. Releve le 2026-09-04. */
.cta--bloc .bouton--second,
.section--sombre .bouton--second {
  color: var(--encre-inverse);
  border-color: var(--accent-clair);
}
.cta--bloc .bouton--second:hover,
.section--sombre .bouton--second:hover {
  background: var(--accent-clair);
  color: var(--encre);
  border-color: var(--accent-clair);
}
/* dans le hero, les deux boutons sont plus legers */
.hero__actions { gap: 0.75rem; }
.hero__actions .bouton { font-size: 1rem; padding: 15px 30px; }
.hero__actions .bouton--second { padding: 14px 29px; }

/* ---------- Pied de page ---------- */

footer { background: var(--encre); color: var(--corps-inverse); padding: 56px 0 40px; }
footer a { color: var(--corps-inverse); text-decoration: none; border-bottom: 1px solid var(--filet-sombre); }
footer a:hover { color: var(--encre-inverse); border-bottom-color: var(--accent-clair); }
.pied { display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; flex-wrap: wrap; }
.pied__liens { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.pied__mention { font-size: 0.875rem; }

/* Les couleurs de texte de .ref et du pied, redeclarees pour le fond sombre.
   Sans ces trois lignes, .ref__nom sort en noir sur noir : contraste 1,00,
   mesure le 2026-09-01 avant correction. */
.section--sombre .ref { border-bottom-color: var(--filet-sombre); }
.section--sombre .ref__nom { color: var(--encre-inverse); }
.section--sombre .ref__quoi { color: var(--gris-inverse); }
.pied__mention { color: var(--gris-inverse); }

/* ---------- Ce qui reste a fournir, visible en jaune tant que ce n'est pas rempli ---------- */

.a-fournir {
  background: #fff4cc;
  color: #6b4e00;
  border: 1px dashed #c8a63a;
  border-radius: 6px;
  padding: 0 0.4em;
  font-weight: 700;
  font-size: 0.9em;
}
.section--sombre .a-fournir, .fiche .a-fournir { background: #4a3d12; color: #ffe89a; border-color: #7a6520; }

/* ---------- Mobile ---------- */

@media (max-width: 760px) {
  :root { --rythme: 76px; }   /* brief : 64 a 88 sur mobile */
  .hero__grille { grid-template-columns: 1fr; gap: 32px; }
  .cas { grid-template-columns: 1fr; gap: 32px; }
  .refs { grid-template-columns: 1fr; }
  .chiffres { grid-template-columns: 1fr; gap: 1.75rem; }
  .service { grid-template-columns: 1fr; gap: 8px; }
  .ref { flex-direction: column; gap: 0.25rem; }
  .ref__quoi { text-align: left; }
}

/* ==========================================================================
   REFONTE DU 2026-09-03, brief de Giacomo.
   Quatre pages, hero pleine hauteur, bloc "tu gardes / je prends en charge",
   cartes d'etudes de cas cliquables, section de qualification.
   ========================================================================== */

/* ---------- Navigation ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--filet);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 14px 0;
}

.nav__liens { display: flex; align-items: center; gap: 2rem; }

.nav__lien {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--corps-encre);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.nav__lien:hover, .nav__lien:focus-visible { color: var(--encre); border-bottom-color: var(--accent); }
.nav__lien[aria-current="page"] { color: var(--encre); border-bottom-color: var(--accent); }

/* Le lien vers la page cachee : de la couleur du fond, il ne se devine qu'au survol.
   Le focus clavier garde un contour, sinon la page devient inatteignable au clavier. */
.nav__lien--cache { color: var(--blanc); }
.nav__lien--cache:hover { color: var(--filet); border-bottom-color: transparent; }
.nav__lien--cache:focus-visible {
  color: var(--gris-clair);
  border-bottom-color: transparent;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.nav__lien--cache[aria-current="page"] { color: var(--filet); border-bottom-color: transparent; }

.nav__cta {
  display: inline-block;
  background: var(--accent);
  color: var(--blanc);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 11px 22px;
  border-radius: var(--pastille);
}
.nav__cta:hover { background: var(--accent-fonce); }

/* Les deux boutons de la navigation : la prise de RDV en plein, WhatsApp en contour */
.nav__actions { display: flex; align-items: center; gap: 0.6rem; }
.nav__cta--second {
  background: transparent;
  color: var(--accent-fonce);
  border: 1px solid var(--accent);
  font-size: 0.75rem;
  padding: 9px 16px;
}
.nav__cta--second:hover { background: var(--accent); color: var(--blanc); }
@media (max-width: 560px) {
  .nav__cta { font-size: 0.6875rem; padding: 9px 14px; letter-spacing: 0.06em; }
  .nav__cta--second { padding: 8px 12px; }
  .nav__actions { gap: 0.4rem; }
  /* le nom de marque cede la place aux deux boutons, le monogramme reste */
  .nav .marque { font-size: 0; }
}

@media (max-width: 760px) {
  /* Sur telephone le site n'avait aucune navigation : les liens etaient masques.
     Ils passent maintenant sur une deuxieme ligne.

     Les boutons sont positionnes en ABSOLU plutot que reordonnes. Raison : ils sont
     imbriques DANS le conteneur des liens, et le retour a la ligne d'un flex se decide
     avant que `flex-grow` n'agisse. Ni `order`, ni `flex: 1 0 auto`, ni `margin-left:
     auto` ne les separaient proprement : un ou deux liens restaient collés a eux sur la
     premiere ligne. Mesure le 2026-09-05. */
  .nav__inner { position: relative; flex-wrap: wrap; row-gap: 0; align-items: center; }
  .nav__actions { position: absolute; top: 14px; right: 0; }
  .nav__liens {
    width: 100%;
    justify-content: space-between;
    gap: 0.4rem;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid var(--filet);
  }
  .nav__lien { font-size: 0.75rem; padding: 2px 0; }
}

/* ---------- Hero pleine hauteur, avec le prenom en lettres contour ---------- */

.hero--grand {
  /* Le `min-height: 80vh` d'origine forcait 720 px de haut pour 385 px de contenu :
     pres de 200 px de vide, et le premier nom de client repousse d'autant. Retire le
     2026-09-05, le hero fait maintenant la taille de ce qu'il contient. */
  display: flex;
  align-items: center;
  padding-top: 48px;
  padding-bottom: 48px;
}

.hero--grand .hero__grille {
  grid-template-columns: 58fr 42fr;   /* brief : 58 / 42 */
  gap: 64px;
  width: 100%;
}

.hero__visuel { position: relative; }



.hero__actions { display: flex; align-items: center; gap: 1.75rem; margin-top: 2.5rem; flex-wrap: wrap; }

.lien-souligne {
  font-weight: 600;
  color: var(--encre);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 3px;
}
.lien-souligne:hover { color: var(--accent-fonce); border-bottom-color: var(--accent-fonce); }

@media (max-width: 760px) {
  .hero--grand { min-height: 0; }
  .hero--grand .hero__grille { grid-template-columns: 1fr; gap: 32px; }
  .hero__actions .bouton { width: 100%; text-align: center; }
}

/* ---------- Bandeau de trois preuves ---------- */

.preuves-bandeau {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
}

.preuve-cle { padding: 40px 32px; }
.preuve-cle + .preuve-cle { border-left: 1px solid var(--filet); }

.preuve-cle__valeur {
  font-family: var(--titre);
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--encre);
  margin: 0;
}

.preuve-cle__quoi { margin: 0.7rem 0 0; font-size: 0.9375rem; color: var(--gris-clair); line-height: 1.45; }

@media (max-width: 760px) {
  .preuves-bandeau { grid-template-columns: 1fr; }
  .preuve-cle { padding: 28px 0; }
  .preuve-cle + .preuve-cle { border-left: 0; border-top: 1px solid var(--filet); }
}

/* ---------- Le bloc "tu gardes / je prends en charge" ---------- */

.partage {
  background: var(--encre);
  color: var(--corps-inverse);
  border-radius: 28px;
  padding: 64px;
}

.partage h2 { color: var(--encre-inverse); max-width: 20ch; }
.partage .surtitre { color: var(--accent-clair); }

.partage__colonnes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  margin-top: 48px;
}

.partage__col h3 {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.partage__col--garde h3 { color: var(--gris-inverse); }
.partage__col--prend h3 { color: var(--accent-clair); }

.partage__liste { list-style: none; margin: 0; padding: 0; }
.partage__liste li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 1rem;
  line-height: 1.5;
}
.partage__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 14px;
  height: 8px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
.partage__col--garde .partage__liste { color: var(--gris-inverse); }
.partage__col--prend .partage__liste { color: var(--encre-inverse); font-weight: 500; }
.partage__col--prend .partage__liste li::before { color: var(--accent-clair); }

.partage__fin {
  margin: 48px 0 0;
  padding-top: 32px;
  border-top: 1px solid var(--filet-sombre);
  color: var(--corps-inverse);
  max-width: 74ch;
}

@media (max-width: 760px) {
  .partage { padding: 40px 24px; border-radius: 20px; }
  .partage__colonnes { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- Cartes d'etudes de cas cliquables ---------- */

.cartes-cas { display: grid; gap: 28px; margin-top: 48px; }

.carte-cas {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 48px;
  padding: 44px;
  border: 1px solid var(--filet);
  border-radius: var(--rayon-carte);
  background: var(--blanc);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* La carte n'est plus cliquable en entier : seul son lien l'est. Le survol de la carte
   reste un signal visuel, mais c'est le lien qui porte l'action. Demande du 2026-09-03. */
.carte-cas:hover { border-color: var(--filet-2); }
.carte-cas:focus-within { border-color: var(--accent); box-shadow: var(--ombre-douce); }

.carte-cas__client {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem;
}
.carte-cas h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 1.1rem; }
.carte-cas p { max-width: 52ch; }

.carte-cas__aller {
  display: inline-block;
  margin-top: 1.25rem;
  font-weight: 700;
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
  text-decoration: none;
}
.carte-cas__aller:hover { color: var(--accent-fonce); border-bottom-color: var(--accent-fonce); }
.carte-cas__aller:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.carte-cas__chiffres { display: grid; gap: 14px; align-content: start; }

.chiffre-case {
  background: var(--papier-2);
  border-radius: var(--rayon);
  padding: 20px 22px;
}
.chiffre-case strong {
  display: block;
  font-family: var(--titre);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--encre);
}
.chiffre-case span { display: block; margin-top: 0.65rem; font-size: 0.875rem; color: var(--gris-clair); line-height: 1.4; }
/* 0.3rem donnait 5 px entre le chiffre et sa legende, contre 11 dans le bandeau.
   Mesure le 2026-09-03. */

.carte-cas--compacte { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); padding: 36px; }
.carte-cas--compacte h3 { font-size: clamp(1.3rem, 2.1vw, 1.6rem); }

@media (max-width: 760px) {
  .carte-cas, .carte-cas--compacte { grid-template-columns: 1fr; gap: 28px; padding: 28px 24px; }
}

/* ---------- Le bloc de qualification ---------- */

.qualification {
  background: var(--encre);
  color: var(--corps-inverse);
  border-radius: 28px;
  padding: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 56px;
}
.qualification h2 { color: var(--encre-inverse); }
.qualification .surtitre { color: var(--accent-clair); }

.qualification__liste { list-style: none; margin: 0; padding: 0; }
.qualification__liste li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 1.1rem;
  line-height: 1.55;
  color: var(--encre-inverse);
}
.qualification__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 15px;
  height: 8px;
  border-left: 2px solid var(--accent-clair);
  border-bottom: 2px solid var(--accent-clair);
  transform: rotate(-45deg);
}

@media (max-width: 760px) {
  .qualification { grid-template-columns: 1fr; gap: 32px; padding: 40px 24px; border-radius: 20px; }
}

/* ---------- Le complement discret sous les quatre cartes ---------- */

.complement {
  margin-top: 40px;
  padding: 24px 28px;
  border-left: 3px solid var(--filet-2);
  background: var(--papier-2);
  border-radius: 0 var(--rayon) var(--rayon) 0;
}
.complement h3 { font-size: 1rem; margin-bottom: 0.5rem; }
.complement p { margin: 0; font-size: 0.9375rem; color: var(--gris-clair); max-width: 78ch; }

/* ---------- Les numeros de service, en contour derriere la carte ---------- */

.service__num { position: relative; }

/* ---------- Le CTA final, en grand bloc sombre ---------- */

.cta--bloc {
  background: var(--encre);
  color: var(--corps-inverse);
  border-radius: 28px;
  padding: 72px 48px;
  text-align: center;
}
.cta--bloc h2 { color: var(--encre-inverse); }
.cta--bloc .surtitre { color: var(--accent-clair); }
.cta--bloc .chapo { color: var(--corps-inverse); margin-left: auto; margin-right: auto; }

@media (max-width: 760px) {
  .cta--bloc { padding: 48px 24px; border-radius: 20px; }
}

/* ---------- Le mouvement se coupe si l'utilisateur le demande ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Ajustements de la refonte ---------- */

.marque--pied { color: var(--corps-inverse); }
.marque--pied:hover { color: var(--encre-inverse); }

.pied { align-items: center; }

/* La grille des pieces passe a deux colonnes sur l'accueil */
.travaux--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .travaux--deux { grid-template-columns: 1fr; } }

/* "Voir la piece" n'apparait qu'au survol, comme demande dans le brief */
.travail { position: relative; }
.travail__aller {
  display: block;
  margin-top: 1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.travail:hover .travail__aller,
.travail:focus-visible .travail__aller { opacity: 1; transform: none; }
/* au doigt et au clavier, il n'y a pas de survol : on l'affiche toujours */
@media (hover: none) { .travail__aller { opacity: 1; transform: none; } }

/* Les trois points du pilotage, empiles a droite de la capture */
.engagements--colonne { grid-template-columns: 1fr; gap: 28px; margin-top: 0; }

.perimetre {
  margin: 40px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--filet);
  font-size: 0.9375rem;
  color: var(--gris-clair);
  max-width: 82ch;
}

/* La capture du pilotage s'agrandit au clic */
.preuve--large a { display: block; }

/* Le CTA est passe en bloc sombre : l'accent manuscrit doit suivre, sinon il tombe
   a 2,97 de contraste. Mesure le 2026-09-03. */
.cta--bloc .script { color: var(--accent-clair); }

/* Un enfant de grille vaut min-width:auto par defaut : un contenu large, comme le
   tableau de pilotage a 1999 px, impose alors sa largeur a toute la colonne et fait
   deborder la page. Mesure a 2022 px de scrollWidth sur 390 le 2026-09-03. */
.cas__texte, .cas > aside, .partage__col, .qualification > * { min-width: 0; }


/* ---------- Le schema en etoile : Giacomo au centre, ses clients en satellites ----------
   Demande le 2026-09-03, en remplacement de la photo seule et de la bande defilante.
   Les satellites sont prets a recevoir des photos : il suffit de remplir le <pattern>
   correspondant dans le SVG. En attendant, ils portent les initiales. */

.reseau { width: 100%; height: auto; display: block; overflow: visible; }

.reseau__fil {
  stroke: var(--filet-2);
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
}

.reseau__halo { fill: none; stroke: var(--accent); stroke-width: 2; }

.reseau__satellite {
  fill: var(--papier-2);        /* sans ca, un <circle> SVG se remplit en noir */
  stroke: var(--filet-2);
  stroke-width: 1.5;
  transition: stroke 0.2s ease, fill 0.2s ease;
}

.reseau__initiales {
  font-family: var(--titre);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  fill: var(--corps-encre);
  text-anchor: middle;
  dominant-baseline: central;
}

.reseau__client:hover .reseau__satellite { stroke: var(--accent); stroke-width: 2.5; }
.reseau__client:hover .reseau__initiales { fill: var(--accent-fonce); }

/* Orphelin depuis le 2026-09-05 : la ligne clients du hero est montee dans le
   bandeau des preuves, ou elle ne se repetait plus. Les regles restent au cas ou. */
.hero__clients {
  margin: 2rem 0 0;
  font-size: 0.9375rem;
  color: var(--gris-clair);
  max-width: 52ch;
}

/* Les satellites flottent doucement, chacun avec son propre retard.
   Le fil s'arrete a 6 px du rond, donc le mouvement ne cree pas de decrochage. */
@keyframes flotte {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(var(--amp, -12px)); }
}
.reseau__client {
  /* amplitude, duree et retard propres a chaque rond : le nuage ne respire jamais
     de facon synchrone. Valeurs posees dans le style inline du <g>. */
  animation: flotte var(--duree, 6s) ease-in-out infinite;
  animation-delay: var(--retard, 0s);
  transform-box: fill-box;
  transform-origin: center;
}

.reseau__fil { fill: none; }

@media (max-width: 760px) {
  .reseau { max-width: 400px; margin: 0 auto; }
  .reseau__initiales { font-size: 17px; }
}

/* Le retour au repos des ronds qui fuient le curseur. Le deplacement lui-meme est
   pose en JS sur .reseau__fuite ; ici on ne fait qu'adoucir la sortie. */
.reseau__fuite { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.reseau:hover .reseau__fuite { transition-duration: 0.18s; }

/* ==========================================================================
   Les pages secondaires : etudes de cas, portfolio, mentions.
   ========================================================================== */

/* ---------- Hero d'une page secondaire ---------- */

.hero--cas { padding-top: 88px; padding-bottom: 64px; }
/* 20ch coupait « Ce que les chiffres ne racontent pas. » en deux : il lui faut 840 px et
   la limite en donnait 779. Mesure le 2026-09-04. */
.hero--cas h1 { max-width: 23ch; margin-bottom: 1.5rem; }

.fil-ariane {
  font-size: 0.875rem;
  color: var(--gris-clair);
  margin: 0 0 1.5rem;
}
.fil-ariane a { color: var(--gris-clair); text-decoration: none; border-bottom: 1px solid var(--filet-2); }
.fil-ariane a:hover { color: var(--encre); }

.meta-cas {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--filet);
}
.meta-cas div { min-width: 0; }
.meta-cas dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.4rem;
}
.meta-cas dd { margin: 0; font-weight: 600; color: var(--encre); }

/* ---------- Les trois decisions, numerotees ---------- */

.decision {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 32px;
  padding: 56px 0;
  border-top: 1px solid var(--filet);
}
.decision__num {
  font-family: var(--titre);
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--accent);
  line-height: 1;
}
.decision h2 { font-size: clamp(1.5rem, 3vw, 2.125rem); margin-bottom: 1.5rem; }

/* Depart -> Decision -> Resultat */
.trajet {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 32px 0;
}
.trajet__etape {
  background: var(--papier-2);
  border-radius: var(--rayon);
  padding: 22px 24px;
}
.trajet__etape h3 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}
.trajet__etape p { margin: 0; font-size: 0.9375rem; }
.section--creme .trajet__etape { background: var(--blanc); }

@media (max-width: 760px) {
  .decision { grid-template-columns: 1fr; gap: 12px; padding: 40px 0; }
  .trajet { grid-template-columns: 1fr; }
}

/* ---------- Le parcours en etapes ---------- */

.parcours {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-top: 48px;
  counter-reset: etape;
}
.parcours__etape {
  position: relative;
  padding: 28px 22px;
  border: 1px solid var(--filet);
  border-radius: var(--rayon-carte);
  background: var(--blanc);
}
.parcours__etape::before {
  counter-increment: etape;
  content: counter(etape);
  display: block;
  font-family: var(--titre);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 0.7rem;
}
.parcours__etape h3 { font-size: 1rem; margin-bottom: 0.5rem; }
.parcours__etape p { margin: 0; font-size: 0.875rem; color: var(--gris-clair); }

@media (max-width: 900px) { .parcours { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .parcours { grid-template-columns: 1fr; } }

/* ---------- Deux grands chiffres ---------- */

.grands-chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.grand-chiffre {
  background: var(--encre);
  color: var(--corps-inverse);
  border-radius: var(--rayon-carte);
  padding: 40px;
}
.grand-chiffre strong {
  display: block;
  font-family: var(--titre);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--encre-inverse);
}
.grand-chiffre span { display: block; margin-top: 0.8rem; color: var(--corps-inverse); }
@media (max-width: 760px) { .grands-chiffres { grid-template-columns: 1fr; } }

/* ---------- Ce qu'il reste a fournir ---------- */

.manquant {
  background: #fff4cc;
  color: #6b4e00;
  border: 1px dashed #c8a63a;
  border-radius: var(--rayon);
  padding: 18px 22px;
  font-size: 0.9375rem;
  margin: 24px 0;
}
.manquant strong { color: #6b4e00; }

/* ---------- Portfolio : filtres et cartes ---------- */

.filtres { display: flex; flex-wrap: wrap; gap: 10px; margin: 40px 0 8px; }
.filtre {
  font-family: var(--titre);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 10px 20px;
  border-radius: var(--pastille);
  border: 1px solid var(--filet-2);
  background: var(--blanc);
  color: var(--corps-encre);
  cursor: pointer;
}
.filtre:hover { border-color: var(--accent); color: var(--encre); }
.filtre[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--blanc); }
.filtre:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.grille-portfolio {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 32px;
  margin-top: 40px;
}

.projet { margin: 0; }
.projet[hidden] { display: none; }
.projet__cadre {
  aspect-ratio: 4 / 3;
  border-radius: var(--rayon-carte);
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid var(--filet);
  background: var(--blanc);
  position: relative;
}
.projet__cadre img { width: 100%; height: auto; display: block; }
.projet__cadre--fixe { overflow: hidden; display: grid; place-items: center; }
.projet__cadre:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Les cadres video : la miniature remplit le cadre, un clic ouvre la video */
.projet__cadre--media { background: var(--papier-2); text-decoration: none; transition: border-color 0.2s ease; }
.projet__cadre--media:hover { border-color: var(--accent); }

/* Le cadre qui porte du texte au lieu d'une capture */
.projet__cadre--texte {
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 28px;
  background: var(--papier-2);
}
.projet__cadre--texte p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--corps-encre);
}

.projet__type {
  display: block;
  margin-top: 14px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.projet__titre { font-family: var(--titre); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.02em; margin: 0.4rem 0 0; }
.projet__meta { margin: 0.35rem 0 0; font-size: 0.9375rem; color: var(--gris-clair); }
.projet__lien { display: inline-block; margin-top: 0.7rem; font-weight: 700; font-size: 0.875rem; color: var(--accent); border-bottom: 2px solid var(--accent); text-decoration: none; }
.projet__lien:hover { color: var(--accent-fonce); border-bottom-color: var(--accent-fonce); }

/* ---------- Une page de texte simple ---------- */

.texte-simple { max-width: 72ch; }
.texte-simple h2 { font-size: 1.5rem; margin: 48px 0 1rem; }
.texte-simple p { margin-bottom: 1rem; }


/* La validation Copy House est une precision, pas une partie du nom du client. */
.travail__precision {
  margin: 0.3rem 0 0;
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--gris-clair);
  line-height: 1.4;
}

/* La mention des missions ponctuelles, sous les criteres et en retrait. */
.qualification__note {
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--filet-sombre);
  font-size: 0.875rem;
  color: var(--gris-inverse);
}

/* ---------- La loupe : le post ouvert par-dessus la page ---------- */

.projet__zoom { background: none; border: 0; border-bottom: 2px solid var(--accent); padding: 0; cursor: pointer; font: inherit; }
.projet[data-categorie="linkedin"] .projet__cadre { cursor: zoom-in; }

.loupe {
  /* pas de `position` ici : le navigateur place lui-meme une fenetre modale, et la lui
     reprendre la remet dans le flux, ce qui faisait sauter la page au clic */
  border: 0;
  padding: 0;
  background: transparent;
  width: min(660px, 92vw);
  max-width: 92vw;
  max-height: 90vh;
  overflow: visible;
}
.loupe::backdrop { background: rgba(22, 20, 18, 0.82); }
.loupe__boite { position: relative; }
.loupe__cadre {
  max-height: 90vh;
  overflow-y: auto;
  background: var(--blanc);
  border-radius: var(--rayon-carte);
}
.loupe__cadre img { width: 100%; height: auto; display: block; }
.loupe__titre {
  margin: 0;
  padding: 18px 22px 22px;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  color: var(--encre);
}
.loupe__fermer {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--filet);
  background: var(--blanc);
  color: var(--encre);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.loupe__fermer:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 560px) {
  .loupe__fermer { top: 8px; right: 8px; }
}

/* ---------- La page cachee : une colonne de lecture, et rien d'autre ---------- */

.lecture { max-width: 720px; }
.lecture p {
  font-size: 1.25rem;      /* 20 px, la fourchette demandee etant 19 a 21 */
  line-height: 1.7;
  margin: 0 0 1.4rem;
  color: var(--corps-encre);
}
.lecture h2 {
  font-size: clamp(1.625rem, 3.2vw, 2.125rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
  margin: 4.5rem 0 1.75rem;
  text-align: left;
}
.lecture > h2:first-child { margin-top: 0; }
.lecture .phrase-forte {
  font-family: var(--titre);
  font-size: clamp(1.375rem, 2.8vw, 1.75rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.025em;
  color: var(--encre);
  margin: 3rem 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--accent);
}
.section--sombre .lecture .phrase-forte { color: var(--encre-inverse); border-left-color: var(--accent-clair); }
/* `.lecture p` a la meme specificite que `.section--sombre p` et arrive apres dans le
   fichier : sans cette ligne, le bloc sombre sort en gris fonce sur noir, contraste 1,83.
   Mesure le 2026-09-04. */
.section--sombre .lecture p { color: var(--corps-inverse); }

.lecture .post-scriptum {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--filet);
  color: var(--gris-clair);
}

/* Orphelin depuis le 2026-09-04 : Giacomo a retiré son portrait du haut de la page
   cachée. La règle reste ici si la photo devait revenir. */
.portrait-simple {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--filet);
  display: block;
  margin-top: 2.5rem;
}

@media (max-width: 700px) {
  .lecture p { font-size: 1.125rem; }   /* 18 px */
  .lecture h2 { margin: 3.25rem 0 1.25rem; }
  .lecture .phrase-forte { margin: 2.25rem 0; }
}

/* ==========================================================================
   Ce qui se mesure change d'alphabet. Arbitre le 2026-09-04.

   Une seule police faisait tout le site, de la phrase au chiffre. Or les
   chiffres sont le sujet de ces pages : dans un atelier, une cote ne s'ecrit
   pas comme une phrase. La prose reste en DM Sans, tout ce qui se compte ou
   s'etiquette passe en IBM Plex Mono.

   Les tailles sont reprises en meme temps : le mono a une hauteur d'x plus
   basse et une chasse plus large, donc a taille egale il paraissait plus gros
   et l'interlettrage negatif des titres le rendait illisible.
   ========================================================================== */

/* --- les etiquettes --- */
.surtitre,
.carte-cas__client,
.projet__type,
.travail__type,
.meta-cas dt,
.filtre {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.14em;
}
.surtitre { font-size: 0.8125rem; font-weight: 600; }
.carte-cas__client,
.projet__type,
.travail__type,
.meta-cas dt { font-size: 0.6875rem; font-weight: 600; }
.filtre { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }

/* --- ce qui se compte --- */
.preuve-cle__valeur,
.chiffre-case strong,
.grand-chiffre strong,
.meta-cas dd {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.preuve-cle__valeur { font-size: clamp(1.5rem, 2.9vw, 2.25rem); font-weight: 600; letter-spacing: -0.02em; }
.chiffre-case strong { font-size: 1.3125rem; font-weight: 600; letter-spacing: -0.015em; }
.grand-chiffre strong { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 600; letter-spacing: -0.025em; }
.meta-cas dd { font-size: 0.9375rem; font-weight: 400; }

/* ---------- Les pieces ouvrables des cartes d'etudes de cas ----------
   Posees le 2026-09-04 : le script de la VSL, la sequence, la page de vente.
   C'est ce qu'un concurrent ne peut pas montrer, donc ca ne s'enterre pas. */
.pieces { display: flex; flex-wrap: wrap; gap: 0.45rem; list-style: none; margin: 1.1rem 0 0; padding: 0; }
.piece {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--encre);
  border: 1px solid var(--filet-2);
  border-radius: 2px;
  padding: 7px 11px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.piece:hover, .piece:focus-visible { background: var(--encre); border-color: var(--encre); color: var(--blanc); }
.section--creme .piece { background: var(--blanc); }

/* Les ecarts du hero, resserres le 2026-09-05 : le texte et l'image ne bougent pas,
   seuls les blancs entre eux se reduisent. */
.hero__clients { margin-top: 1.4rem; }
.hero__actions { margin-top: 1.75rem; }
@media (max-width: 760px) {
  .hero--grand { padding-top: 34px; padding-bottom: 34px; }
  .hero--grand .hero__grille { gap: 26px; }
  .hero__clients { margin-top: 1.1rem; }
  .hero__actions { margin-top: 1.35rem; }
}