@layer ancien {
/* 70-v2.css — V2 (SPEC v5, décisions d'Anthony du 17/10/2026, 00:15) : couche chargée en dernier, qui ramène le site
   vers les maquettes de Michael sans réécrire la V1 (branche studio, étiquette de la V1 du 16/10/2026).
   A-40 espaces comme la maquette (lève A-34 et A-30) ; A-41 lumière des photos comme la maquette (lisibilité jugée sur
   le fond médian) ; A-42 Satoshi (01-polices.css), plus fine sur fond sombre ; A-43 lueurs ; A-44 pictos.
   Sélecteurs préfixés par body[data-page] : ils passent devant les réglages par page de la V1 (spécificité 0,2,1). */

/* ===================================================================================================================
   A-40 — Espaces de la maquette (comparaison-maquette.md § T1 à T4, médianes à 1440)
   =================================================================================================================== */
:root {
  --espace-titre-texte: 20px;     /* T4 : titre → lead ≈ 27 px d'encre à encre */
  --espace-entete-contenu: 28px;  /* T4 : en-tête de section → grille 24 à 33 */
  --espace-grille-boutons: 20px;  /* T4 : grille → rangée de boutons 20 */
}

/* T1 : marges des sections ≈ 43 px en haut, ≈ 51 en bas sur la maquette. */
.section {
  padding: 44px 0 52px;
}

.section--legal {
  padding-top: calc(var(--hauteur-entete) + 48px);
}

@media (max-width: 999px) {
  .section--image-gauche,
  .section--image-droite {
    padding-top: calc(260px + 44px);
  }
}

@media (max-width: 767px) {
  .section {
    padding: 32px 0 36px;
  }

  .section--legal {
    padding-top: calc(var(--hauteur-entete) + 32px);
  }

  .section--image-gauche,
  .section--image-droite {
    padding-top: calc(260px + 32px);
  }
}

/* T2 (5 pages dessinées ; la 404 garde la règle de la V1) : hauteur des heros de la maquette, en-tête comprise (Accueil 980, À propos 650, Nos solutions 612, Formations
   630, Contact 589) ; tablette × 760 / 850, mobile × 600 / 850 (proportions de la V1), en hauteur minimale. Contenu
   centré à 48 px au moins de l'en-tête et du bas ; Accueil (A-28) : contenu en bas, à 68 px du bas comme la maquette. */
body:is([data-page="accueil"], [data-page="a-propos"], [data-page="nos-solutions"], [data-page="formations"], [data-page="contact"]) .hero {
  min-height: 640px;
  padding: calc(var(--hauteur-entete) + 48px) 0 48px;
}

body[data-page="accueil"] .hero { min-height: 980px; padding-bottom: 68px; }
body[data-page="a-propos"] .hero { min-height: 650px; }
body[data-page="nos-solutions"] .hero { min-height: 612px; }
body[data-page="formations"] .hero { min-height: 630px; }
body[data-page="contact"] .hero { min-height: 589px; }

@media (max-width: 1199px) {
  body:is([data-page="accueil"], [data-page="a-propos"], [data-page="nos-solutions"], [data-page="formations"], [data-page="contact"]) .hero { min-height: 572px; padding: calc(var(--hauteur-entete) + 40px) 0 40px; }
  body[data-page="accueil"] .hero { min-height: 876px; padding-bottom: 56px; }
  body[data-page="a-propos"] .hero { min-height: 581px; }
  body[data-page="nos-solutions"] .hero { min-height: 547px; }
  body[data-page="formations"] .hero { min-height: 563px; }
  body[data-page="contact"] .hero { min-height: 527px; }
}

@media (max-width: 767px) {
  body:is([data-page="accueil"], [data-page="a-propos"], [data-page="nos-solutions"], [data-page="formations"], [data-page="contact"]) .hero { min-height: 452px; padding: calc(var(--hauteur-entete) + 32px) 0 32px; }
  body[data-page="accueil"] .hero { min-height: 692px; padding-bottom: 40px; }
  body[data-page="a-propos"] .hero { min-height: 459px; }
  body[data-page="nos-solutions"] .hero { min-height: 432px; }
  body[data-page="formations"] .hero { min-height: 445px; }
  body[data-page="contact"] .hero { min-height: 416px; }
}

/* T3 : hauteur des CTA de la maquette (Accueil 418, À propos 606, Nos solutions 580, Formations 572, Contact 530), en
   hauteur minimale : le contenu centré garde au moins 48 px en haut et en bas (A-30 levé). */
body[data-page] .cta {
  height: auto;
  min-height: 460px;
  padding: 48px 0;
}

body[data-page="accueil"] .cta { min-height: 418px; }
body[data-page="a-propos"] .cta { min-height: 606px; }
body[data-page="nos-solutions"] .cta { min-height: 580px; }
body[data-page="formations"] .cta { min-height: 572px; }
body[data-page="contact"] .cta { min-height: 530px; }

@media (max-width: 1199px) {
  body[data-page] .cta { min-height: 420px; }
  body[data-page="accueil"] .cta { min-height: 380px; }
  body[data-page="a-propos"] .cta { min-height: 551px; }
  body[data-page="nos-solutions"] .cta { min-height: 527px; }
  body[data-page="formations"] .cta { min-height: 520px; }
  body[data-page="contact"] .cta { min-height: 482px; }
}

@media (max-width: 767px) {
  body[data-page] .cta { min-height: 0; padding: 40px 0; }
}

/* ===================================================================================================================
   A-41 — Lumière des photos de la maquette
   Les couches de lisibilité de la V1 (A-27 « pire pixel », A-38, A-39 : ::after des heros, des CTA et des sections à
   image, filtres d'éclaircissement calculés avec elles) sont retirées ; restent des voiles légers, placés comme sur la
   maquette (sombre derrière le texte, la photo libre ailleurs). La lisibilité se juge sur le fond médian sous la boîte
   du texte (4,5:1 texte courant, 3:1 grand texte).
   =================================================================================================================== */
body[data-page] .hero::after,
body[data-page] .cta::after,
body[data-page="accueil"] [data-section="benefices"]::after,
body[data-page="a-propos"] [data-section="humain"]::after,
body[data-page="formations"] [data-section="conferences"]::after {
  content: none;
}

body[data-page] :is(.hero__image, .cta__image) {
  filter: none;
}

/* Images des sections : spécificité au-dessus des filtres posés par page dans la V1 (jusqu'à 0,3,1). */
body[data-page] section[data-section] > :is(img.section__fond, img.section__image) {
  filter: none;
}

/* Heros : voile horizontal derrière la colonne du texte, à gauche, libre à droite ; voile bas léger (Contact : plus
   dense à gauche, le mot « projet. » en dégradé passe sur la vitre claire). */
body[data-page] .hero::before {
  background: linear-gradient(0deg, rgba(4, 20, 38, 0.5), rgba(4, 20, 38, 0) 140px),
    linear-gradient(90deg, rgba(4, 20, 38, 0.78) 0%, rgba(4, 20, 38, 0.55) 35%, rgba(4, 20, 38, 0.12) 62%, rgba(4, 20, 38, 0) 80%);
}

/* Cadrage des photos des heros comme la maquette (rectangles de photos-maquette.md, relevés pour la V1) ; Formations :
   position commune (50 % 50 %). */
body[data-page="a-propos"] .hero__image { object-position: 66% 50%; }
body[data-page="nos-solutions"] .hero__image { object-position: 74% 50%; }
body[data-page="contact"] .hero__image { object-position: 60% 50%; }

/* Accueil : la photo entière de la source (planète, lever de soleil, lune, personnage sur la falaise ; images.json sans
   recadrage) occupe le haut du hero sur 41,7 % de la largeur (600 px à 1440), sa largeur entière visible ; le
   personnage passe au-dessus du texte (A-28 : pieds à ≈ 440 px, texte à partir de ≈ 455) ; la photo se fond dans
   --fond-principal vers le bas, où se pose le texte, comme la maquette. */
body[data-page="accueil"] .hero--accueil .hero__image {
  inset: 0 0 auto;
  height: max(41.7vw, 360px);
  object-position: 20% 100%;
  -webkit-mask-image: linear-gradient(180deg, #000 58%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, #000 58%, rgba(0, 0, 0, 0) 100%);
}

body[data-page="accueil"] .hero--accueil::before {
  background: linear-gradient(90deg, rgba(4, 20, 38, 0.35) 0%, rgba(4, 20, 38, 0) 55%);
}

/* CTA : voile uniforme léger. */
body[data-page] .cta::before {
  background: rgba(4, 20, 38, 0.5);
}

/* Sections à image de fond sombres : voile allégé (bénéfices de l'Accueil et humain d'À propos : plus bas). */
body[data-page] .section--fond:not([data-section="valeurs"])::before {
  background: rgba(4, 20, 38, 0.55);
}

/* Pourquoi (Accueil) : la photo garde sa couleur (coucher de soleil chaud), sans désaturation. */
body[data-page="accueil"] [data-section="pourquoi"] > .section__image {
  filter: none;
}

/* ===================================================================================================================
   A-42 — Satoshi : plus fine sur fond sombre (maquette), épaisseur moyenne sur fond clair (A-33 gardé sur clair)
   =================================================================================================================== */
/* Satoshi est ≈ 12 % plus étroite que Poppins en graisse normale : les tailles de la V1 (A-01 v5, relevées à largeur
   égale de la maquette en Poppins) donneraient des lignes plus courtes que la maquette (H1 de l'Accueil : 693 px contre
   786 ; lead de « Nos solutions » : 740 contre 805 ; H2 : 353 contre 392). La hauteur des capitales est ramenée à 0,82
   de la taille demandée (Satoshi : 0,74), soit des lettres 11 % plus grandes, sans toucher aux tailles de chaque règle.
   Le pied de page garde ses tailles propres (relevées en hauteur de capitales sur la maquette du pied). */
html {
  font-size-adjust: cap-height 0.82;
}

.pied {
  font-size-adjust: none;
}

/* Titres en gras comme la maquette (les lignes « suite » restent en 400) ; préfixe body[data-page] : devant les graisses
   posées par page dans la V1. */
body[data-page] :is(h1, .h1, h2, .h2, h3, .h3) {
  font-weight: 700;
}

body[data-page="accueil"] .section .conteneur > .titre-engagements {
  font-weight: 700;
}

/* Textes courants posés sur sombre (pas les titres ni les « h4 » des avantages). */
:is(.hero, .section--sombre, .cta) :is(.lead, .texte-carte, .texte-avantage, p:not([class])) {
  font-weight: 400;
}

/* Hero de l'Accueil (tailles demandées ; rendu × 1,11 par font-size-adjust) : lead ≈ 25 px et titres des avantages
   ≈ 28 px comme la maquette ; contenu sur 1290 px (maquette : 93 à 1371 px), pour que le H1 tienne en 3 lignes. */
body[data-page="accueil"] .hero--accueil .lead {
  max-width: 730px;
  font-size: 22.5px;
}

body[data-page="accueil"] .hero--accueil .titre-avantage {
  font-size: 25px;
}

body[data-page="accueil"] .hero--accueil .texte-avantage {
  font-size: 16px;
}

@media (min-width: 1200px) {
  body[data-page="accueil"] .hero--accueil .hero__contenu {
    width: min(1290px, calc(100% - 64px));
  }
}

/* Pied de page : graisse 400 ; à partir de 768 px, tailles de la maquette (hauteur des capitales 10 px à 1440 :
   Satoshi 14 px) ; en mobile, tailles de la V1 (la maquette du pied n'est relevée qu'à 1440). */
.pied :is(.pied__signature, .pied__liens a, .pied__contact a, .pied__lieu, .pied__discret) {
  font-weight: 400;
}

@media (min-width: 768px) {
  .pied__signature {
    font-size: 15px;
  }

  .pied__titre {
    font-size: 12px;
  }

  .pied__liens a,
  .pied__contact a,
  .pied__lieu {
    font-size: 14px;
  }

  .pied__discret {
    font-size: 12.5px;
  }

  .pied__barre p,
  .pied__legal a {
    font-size: 12px;
  }

  .pied .pied__liens,
  .pied .pied__contact {
    margin-top: 32px;
  }

  .pied__liens {
    gap: 6px;
  }
}

/* ===================================================================================================================
   A-43 — Lueurs de la maquette : contour néon et lueur intérieure des cartes sombres
   =================================================================================================================== */
.carte--solution {
  box-shadow: inset 0 0 22px var(--lisere-halo), 0 0 26px rgba(119, 118, 255, 0.35);
}

.carte--solution::before {
  filter: blur(10px);
  opacity: 0.9;
}

/* Cartes des solutions : marge intérieure de la maquette (≈ 18 px), le titre tient sur une ligne. */
.carte--solution {
  padding: 28px 18px;
}

/* ===================================================================================================================
   A-44 — Pictos de la planche de Michael (PICTOGRAME.png) : même dessin (Lucide), trait affiné et dégradé en diagonale
   (construire.mjs). Trait de 1,5 sur la grille de 24 (4 px sur une icône de 64 px, contre 5,3 en V1) ; les flèches des
   boutons et des cartes gardent 2 (petites tailles).
   =================================================================================================================== */
.icone {
  stroke-width: 1.5;
}

:is(.bouton, .fleche) .icone {
  stroke-width: 2;
}

/* Tablette : titres des avantages du hero de l'Accueil sur une ligne (CV-25) malgré le rendu × 1,11. */
@media (max-width: 1199px) {
  body[data-page="accueil"] .hero--accueil .titre-avantage {
    font-size: 20px;
  }

  body[data-page="accueil"] .hero--accueil .texte-avantage {
    font-size: 15px;
  }
}

/* Nos solutions, générative : l'image part du haut de la section (marge haute de la V2, 44 px) jusqu'au haut des cartes
   (écart en-tête → contenu, 28 px) ; V1 : 120 et 64. */
@media (min-width: 1000px) {
  body[data-page="nos-solutions"] [data-section="generative"] > .section__image {
    top: -44px;
    height: calc(100% + 44px + 28px);
  }
}

/* Mobile : la photo du hero de l'Accueil (300 px de haut) au-dessus du texte, qui commence sous les pieds du personnage
   (≈ 233 px), sur le bas fondu de la photo ; le hero grandit avec son contenu. */
@media (max-width: 767px) {
  body[data-page="accueil"] .hero--accueil {
    padding-top: 250px;
  }

  body[data-page="accueil"] .hero--accueil .hero__image {
    height: 300px;
    object-position: 22% 100%;
  }
}

/* Formations, bénéfices : chiffres à 46 px (rendu ≈ 51 px) pour qu'ils tiennent à droite de leur icône
   dans les 4 colonnes. */
@media (min-width: 1200px) {
  body[data-page="formations"] .chiffre {
    font-size: 46px;
  }
}

/* Lisibilité au fond médian (A-41) là où la lumière de la photo l'empêchait : voiles un peu plus denses. */
body[data-page="contact"] .hero::before {
  background: linear-gradient(0deg, rgba(4, 20, 38, 0.5), rgba(4, 20, 38, 0) 140px),
    linear-gradient(90deg, rgba(4, 20, 38, 0.9) 0%, rgba(4, 20, 38, 0.78) 38%, rgba(4, 20, 38, 0.2) 62%, rgba(4, 20, 38, 0) 80%);
}

body[data-page="nos-solutions"] .cta::before {
  background: rgba(4, 20, 38, 0.6);
}

/* Humain (À propos) : sombre sous la colonne du texte (1000 px au centre), la photo reste vive sur les côtés, comme la
   maquette. */
body[data-page="a-propos"] .section--fond[data-section="humain"]::before {
  background: linear-gradient(90deg, rgba(4, 20, 38, 0.15) 0%, rgba(4, 20, 38, 0.75) max(0px, calc(50% - 500px)),
    rgba(4, 20, 38, 0.75) min(100%, calc(50% + 500px)), rgba(4, 20, 38, 0.15) 100%);
}

body[data-page="accueil"] .section--fond[data-section="benefices"]::before {
  background: linear-gradient(180deg, rgba(4, 20, 38, 0.62) 0%, rgba(4, 20, 38, 0.6) 55%, rgba(4, 20, 38, 0.25) 100%);
}

/* Nos solutions, générative : 2e vers du H2 sur une ligne dans la colonne de 910 px de la V1 (H2 en 700, rendu × 1,11 :
   45 px) ; fondu du bas sur la marge basse de la V2. */
@media (min-width: 1200px) {
  body[data-page="nos-solutions"] [data-section="generative"] h2 {
    font-size: 45px;
  }
}

body[data-page="nos-solutions"] [data-section="generative"]::after {
  height: 52px;
}

@media (max-width: 767px) {
  body[data-page="nos-solutions"] [data-section="generative"]::after {
    height: 36px;
  }

  /* Pied : la barre basse finit à 40 px du bas en Satoshi (lignes de 13 px un peu plus basses qu'en Poppins). */
  .pied {
    padding-bottom: 38px;
  }
}

}