/* ============================================================
   Marque Charles Ouzeau : monogramme C O, rideau de transition,
   signature manuscrite et bandeaux defilants.
   Remplace les animations Rive d'identite (voir RIVE.md).
   Palette : bleu --color--lime sur bleu nuit --color--dark-green.
   Police signature : Parisienne (SIL Open Font License 1.1).
   ============================================================ */

@font-face {
  font-family: 'CO Signature';
  src: url('fonts/parisienne-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --co-ink: var(--color--dark-green, #0a1628);
  --co-accent: var(--color--lime, #7eb2ff);
  --co-white: var(--color--white, #f3f6fb);
}

/* ---------- Signature manuscrite : logo haut a gauche ---------- */
/* Un seul endroit a changer quand la vraie signature tracee de Charles
   prendra la place de la police. */

.co-wordmark {
  font-family: 'CO Signature', 'Parisienne', cursive;
  font-weight: 400;
  font-size: clamp(1.45rem, 2.05vw, 2.1rem);
  line-height: 0.9;
  letter-spacing: 0.005em;
  white-space: nowrap;
  display: inline-block;
  color: var(--color--grey-2, #c4ccda);
  transform: translateY(-0.06em);
  padding-right: 0.12em;
}

/* P9 : wordmark de secours du heros tablette (remplace le mot-symbole Lando). */
.home-hero-tablet-wordmark {
  font-size: clamp(2.6rem, 11vw, 4.6rem);
  color: var(--color--white, #f3f6fb);
}

/* ---------- Rideau de chargement et de transition ---------- */

.transition-w {
  background-color: var(--co-ink);
}

.co-curtain {
  position: absolute;
  inset: 0;
  background: var(--co-ink);
  display: grid;
  place-items: center;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.5s cubic-bezier(0.65, 0.05, 0, 1);
  will-change: clip-path;
}

/* Monogramme C O dessine au trait, puis efface comme un geste de stylo.
   Meme place et memes durees que le prechargeur de Lando (visible environ
   1,5 seconde : trace pendant la couverture, levee du rideau a 1 s). */
.co-curtain-mark {
  width: min(30vw, 232px);
  height: auto;
  color: var(--co-white);
  overflow: visible;
}

.co-curtain-stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* Tant qu'aucun etat n'est pose, le monogramme reste invisible. */
.transition-w:not(.is-initial):not(.is-cover):not(.is-reveal) .co-curtain-stroke {
  opacity: 0;
}

/* Premiere peinture : le C se trace, puis le O le complete. */
.transition-w.is-initial .co-curtain-c {
  animation: coDrawStroke 0.5s cubic-bezier(0.65, 0.05, 0, 1) 0.1s both;
}
.transition-w.is-initial .co-curtain-o {
  animation: coDrawStroke 0.5s cubic-bezier(0.65, 0.05, 0, 1) 0.5s both;
}

@keyframes coDrawStroke {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* Sortie de page : le rideau couvre instantanement, monogramme deja trace. */
.transition-w.is-cover .co-curtain {
  clip-path: inset(0 0 0 0);
  transition: none;
}
.transition-w.is-cover .co-curtain-stroke {
  stroke-dashoffset: 0;
  opacity: 1;
}

/* Entree de page : le rideau se leve et decouvre la page. */
.transition-w.is-reveal .co-curtain {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.5s cubic-bezier(0.65, 0.05, 0, 1);
}
.transition-w.is-reveal .co-curtain-mark {
  opacity: 0;
  transition: opacity 0.35s ease-in;
}

@media (prefers-reduced-motion: reduce) {
  .co-curtain {
    transition: none;
  }
  .transition-w.is-initial .co-curtain-c,
  .transition-w.is-initial .co-curtain-o {
    animation: none;
    stroke-dashoffset: 0;
  }
  .transition-w.is-reveal .co-curtain {
    transition: none;
  }
}

/* ---------- Monogramme C O de remplacement ---------- */

.co-identity {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}
.co-identity > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.co-mark {
  color: var(--co-accent);
}
.co-mark-ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 7;
  stroke-linecap: round;
}
.co-mark-c {
  stroke-dasharray: 70 30;
}
.co-mark-o {
  stroke-dasharray: 100 0;
}

/* Cadre de la signature : les traces sont poses par signature.js. */
.co-identity.is-signature {
  display: grid;
  place-items: center;
}

/* Trace de circuit de remplacement. */
.co-identity.is-circuits {
  display: grid;
  place-items: center;
}
.co-track-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- Vestiges d'identite Lando masques proprement ---------- */

/* Ancien logo LN superpose au monogramme, et illustration de rotation. */
.image.is-ln4-logo {
  display: none !important;
}
.image.is-home-marquee-sig-img {
  display: inline-block !important;
}
canvas[data-rive-mob-landscape] {
  display: none !important;
}

/* ============================================================
   P8 (03/10) : identite et textes.
   ============================================================ */

/* P9 : petit logo rond (photo de Charles + monogramme C O en
   surimpression) qui remplace l'ecusson de marque. */
.co-round-logo {
  position: relative;
  width: clamp(56px, 4.6vw, 72px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--co-ink);
  border: 1px solid color-mix(in srgb, var(--co-accent) 55%, transparent);
  box-shadow: 0 6px 24px rgba(10, 22, 40, 0.45);
}
.co-round-logo__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.co-round-logo__badge {
  position: absolute;
  left: 50%;
  bottom: 0.16em;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  padding: 0.14em 0.4em 0.08em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--co-ink) 84%, transparent);
  backdrop-filter: blur(2px);
}
.co-round-logo__badge .co-mark {
  width: 1.45em;
  height: auto;
  display: block;
}
.co-round-logo__badge .co-mark-ring {
  stroke-width: 12;
}

/* P8 : mot de Charles, deux phrases a la premiere personne. */
.co-note {
  max-width: 46ch;
  margin: 0 auto;
  color: var(--color--green-off-white-1, #cfd8e6);
  font-size: clamp(0.98rem, 1.15vw, 1.15rem);
  line-height: 1.6;
}

/* P7 : les deux bandeaux defilants, dans l'esprit des logos de Lando. */
.co-band {
  position: relative;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  padding: 1.05rem 0;
  font-family: 'Mona Sans Variable', Arial, sans-serif;
  font-size: clamp(0.9rem, 1.5vw, 1.28rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: currentColor;
}
.co-band__track {
  display: inline-flex;
  align-items: center;
  width: max-content;
  animation: coBandScroll 32s linear infinite;
  will-change: transform;
}
.co-band__track > span {
  padding-right: 0.55em;
}
@keyframes coBandScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .co-band__track {
    animation: none;
  }
}
.marquee-offest-w .co-band {
  padding: 1.25rem 0;
}
.footer-marquee .co-band {
  padding: 0;
  font-size: clamp(0.78rem, 1vw, 0.9rem);
  letter-spacing: 0.14em;
}

/* ============================================================
   Corrections issues du juge du site perso (J1-01, J1-05).
   ============================================================ */

/* J1-01 : le trace 3D dessine des reperes courses "DRS 01" / "DRS 02".
   On les retire par la feuille de style, sans toucher au moteur 3D. */
.lando-gl__point__content--drs {
  display: none !important;
}

/* J1-05 : le monogramme C O remplace des animations Rive qui occupaient
   toute une zone ; il recouvrait les lettres des titres. On le reduit a
   un sigle de coin et on ramene les cadres concernes a la taille du
   sigle, ancre en haut a gauche, pour qu'il ne chevauche jamais un titre
   ni un chiffre, sur ordinateur comme sur mobile. */
.co-identity {
  pointer-events: none;
}
.co-identity > svg.co-mark {
  position: absolute;
  top: 0;
  left: 0;
  width: 3.25rem;
  height: auto;
  max-width: 3.25rem;
  max-height: 3.25rem;
}

.otot-home-text-rive,
.on-t-hero-title-rive,
.home-collab-rive,
.f1-car-stats-win-rive {
  width: 3.25rem !important;
  height: 3.25rem !important;
  inset: 0.25rem auto auto 0.25rem !important;
}

@media (max-width: 920px) {
  .co-identity > svg.co-mark {
    width: 2.25rem;
    max-width: 2.25rem;
    max-height: 2.25rem;
  }
  .otot-home-text-rive,
  .on-t-hero-title-rive,
  .home-collab-rive,
  .f1-car-stats-win-rive {
    width: 2.25rem !important;
    height: 2.25rem !important;
  }
}


/* ============================================================
   P9 (03/10) : realisations, histoire, carte des systemes, pied de page.
   ============================================================ */

/* P11 : fiche projet dans la grille « Mes realisations ». */
.helmet-grid-item { overflow: hidden; position: relative; }
.co-real-caption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 20;
  padding: 1.1rem 1.15rem 1.05rem;
  background: linear-gradient(to top, rgba(10,22,40,.95), rgba(10,22,40,.76) 58%, rgba(10,22,40,0));
  color: var(--color--white, #f3f6fb);
  opacity: 0;
  transform: translateY(0.6rem);
  transition: opacity .28s ease, transform .28s ease;
  pointer-events: none;
}
.helmet-grid-item:hover .co-real-caption,
.helmet-grid-item:focus-within .co-real-caption { opacity: 1; transform: translateY(0); }
.co-real-caption__pole {
  display: inline-block;
  font-family: 'Mona Sans Variable', Arial, sans-serif;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color--lime, #7eb2ff); margin-bottom: .35rem;
}
.co-real-caption p { margin: 0; font-size: .82rem; line-height: 1.42; }

/* P14 : legende des cartes reseaux. */
.callout-socials-card-w { position: relative; }
.co-social-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 12;
  padding: .95rem 1rem .85rem;
  font-family: 'Mona Sans Variable', Arial, sans-serif;
  font-size: .82rem; line-height: 1.35;
  color: var(--color--white, #f3f6fb);
  background: linear-gradient(to top, rgba(10,22,40,.92), rgba(10,22,40,0));
}

/* P15 : grande signature manuscrite du pied de page. */
.footer-rive-w { display: grid; place-items: center; width: auto; min-width: 21rem; height: auto; top: -7.4rem; }
.footer-rive-w .image.is-footer-rive,
.footer-rive-w .marquee-gl-rive-w { display: none !important; }
.co-footer-signature {
  font-family: 'CO Signature', 'Parisienne', cursive;
  font-size: clamp(3rem, 6.2vw, 6rem);
  line-height: 1;
  color: var(--color--green-off-white-1, #cfd8e6);
  white-space: nowrap;
  transform: rotate(-2deg);
  text-shadow: 0 12px 44px rgba(10, 22, 40, .55);
}
@media (max-width: 920px) {
  .footer-rive-w { min-width: 0; top: -4.4rem; }
  .co-footer-signature { font-size: clamp(2.2rem, 11vw, 3.2rem); }
}

/* P13 : carte de mes systemes (remplace le trace de circuit). */
.co-identity.is-sysmap { display: grid; place-items: center; width: 100%; height: 100%; }
.co-systems-map, .co-systems-map svg { display: block; width: 100%; height: 100%; }
.co-sysmap-ring { fill: none; stroke: color-mix(in srgb, var(--co-accent) 26%, transparent); stroke-width: 1; }
.co-sysmap-ring.is-2 { stroke-dasharray: 2 6; }
.co-sysmap-link { stroke: var(--co-accent); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .9; }
.co-systems-map.is-drawn .co-sysmap-link { animation: coSysDraw .9s cubic-bezier(.65,.05,0,1) forwards; animation-delay: var(--d, .2s); }
@keyframes coSysDraw { to { stroke-dashoffset: 0; } }
.co-sysmap-node { fill: var(--co-ink); stroke: var(--co-accent); stroke-width: 1.4; }
.co-sysmap-node.is-halo { fill: none; stroke: color-mix(in srgb, var(--co-accent) 45%, transparent); stroke-dasharray: 3 5; }
.co-sysmap-dot { fill: var(--co-accent); }
.co-sysmap-core { fill: var(--co-accent); }
.co-sysmap-core-label { font-family: 'Mona Sans Variable', Arial, sans-serif; font-weight: 700; font-size: 34px; fill: var(--co-ink); }
.co-sysmap-label { font-family: 'Mona Sans Variable', Arial, sans-serif; font-weight: 600; font-size: 19px; fill: currentColor; }
@media (max-width: 920px) { .co-sysmap-label { font-size: 26px; } .co-sysmap-core-label { font-size: 44px; } }
@media (prefers-reduced-motion: reduce) { .co-systems-map.is-drawn .co-sysmap-link { animation: none; stroke-dashoffset: 0; } }

/* Le trace 3D du circuit laisse la place a la carte des systemes. */
.calendar-track-gl-target canvas { display: none !important; }
.calendar-track-gl-target { display: grid; place-items: center; position: relative; min-height: clamp(320px, 46vw, 560px); }
.calendar-track-gl-target .co-systems-map { position: absolute; inset: 0; }

/* P13 : residus de classement F1 retires proprement. */
.calendar-schedule-standings-w { display: none !important; }
/* Traces de circuit F1 retirees : la carte des systemes prend la place. */
.calendar-mobile-frame,
.calendar-track-frame-segment,
.f1-highlight-circuit-rive-bg { display: none !important; }

/* P13 : « Ma feuille de route » remplace le compte a rebours F1. */
.co-roadmap-wrap { max-width: 64rem; text-align: left; display: block; }
.co-roadmap { max-width: 64rem; }
.co-roadmap-title {
  font-family: "Mona Sans Variable", Arial, sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  font-size: clamp(1.4rem, 3.2vw, 2.2rem); line-height: 1.05;
  margin: 0 0 1.9rem; color: var(--color--lime, #7eb2ff);
}
.co-roadmap-list { list-style: none; margin: 0; padding: 0; }
.co-roadmap-item {
  display: grid; grid-template-columns: 11rem 1fr auto; gap: 1.6rem;
  align-items: baseline; padding: 1.05rem 0;
  border-top: 1px solid color-mix(in srgb, var(--color--lime, #7eb2ff) 30%, transparent);
}
.co-roadmap-item:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--color--lime, #7eb2ff) 30%, transparent);
}
.co-roadmap-date {
  font-family: "Mona Sans Variable", Arial, sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; font-size: .8rem;
  color: var(--color--lime, #7eb2ff);
}
.co-roadmap-label {
  font-family: "Mona Sans Variable", Arial, sans-serif;
  font-size: clamp(1rem, 1.55vw, 1.3rem); line-height: 1.4; color: var(--color--white, #f3f6fb);
}
.co-roadmap-state {
  font-family: "Mona Sans Variable", Arial, sans-serif; font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  padding: .3em .75em; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color--white, #f3f6fb) 45%, transparent);
  color: var(--color--white, #f3f6fb);
}
.co-roadmap-item.is-done .co-roadmap-state {
  background: var(--color--lime, #7eb2ff); border-color: var(--color--lime, #7eb2ff); color: var(--co-ink);
}
@media (max-width: 920px) {
  .co-roadmap-item { grid-template-columns: 1fr; gap: .35rem; }
  .co-roadmap-state { justify-self: start; }
}


/* ============================================================
   P13 (04/10, tour 2) : page unique.
   ============================================================ */

/* 5c. Monogramme C O en haut a gauche, qui ramene en haut de page. */
.co-nav-brand { display: inline-flex; align-items: center; }
.co-nav-mark { display: inline-flex; align-items: center; }
.co-nav-mark .co-mark { display: block; width: 2.9rem; height: auto; color: var(--co-accent); }
.co-nav-brand:hover .co-mark { color: color-mix(in oklch, var(--co-accent) 78%, white); }
@media (max-width: 767px) { .co-nav-mark .co-mark { width: 2.3rem; } }

/* 5c. Le monogramme du milieu du menu faisait doublon avec celui de
   gauche : on le retire, il ne reste qu'un seul monogramme. */
.page-ln4-pos { display: none !important; }

/* 2b (P15). Sur la page 404, l'animation Webflow laissait le monogramme
   masque et montrait a sa place un bouton texte « Retour a l'accueil ».
   Pour la coherence avec l'accueil, on remet le monogramme C O en haut a
   gauche (clic vers /) et on retire le bouton redondant. */
body:has(.utility__page--w) .co-nav-brand {
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}
body:has(.utility__page--w) .partnership-back-btn-w.not-found {
  display: none !important;
}

/* Le nom du heros (mobile et tablette) reste un mot-symbole lisible :
   ce n'est plus une signature tracee. */
.home-hero-tablet-wordmark {
  font-family: "Mona Sans Variable", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* 5. Signatures parasites : la signature ne vit qu'au heros et au
   pied de page, plus au fil de la chronologie ni dans le mandat. */
.horizontal-rive-placeholder,
.horizontal-item-pill-w,
.exe-cta-sticker-w { display: none !important; }

/* 6. « JE NE VENDS PAS DE L'IA… » : revelation ligne par ligne, a la
   Lando. Chaque ligne se decouvre par un masque qui s'efface, dans la
   couleur d'accent ; les mots en couleur s'allument sous le masque,
   sans clignotement. Le rythme reproduit celui de Lando : 0,6 s par
   ligne, 0,15 s d'ecart, le masque part a mi-course. */
.text-impact-lg-mona[data-co-impact] { position: relative; }
.co-impact-line {
  display: block;
  position: relative;
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}
.co-impact-line::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--color--lime-off, #7EB2FF);
  transform: scaleX(1);
  transform-origin: right center;
  pointer-events: none;
}
.text-impact-lg-mona[data-co-impact].is-revealing .co-impact-line {
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) var(--cd, 0ms);
}
.text-impact-lg-mona[data-co-impact].is-revealing .co-impact-line::after {
  transform: scaleX(0);
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1) var(--cd, 0ms);
}
.text-impact-lg-mona[data-co-impact].is-done .co-impact-line,
.text-impact-lg-mona[data-co-impact].is-done .co-impact-line::after { transition: none; }
.text-impact-lg-mona[data-co-impact].is-done .co-impact-line { clip-path: inset(0 0 0 0); }
.text-impact-lg-mona[data-co-impact].is-done .co-impact-line::after { transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) {
  .co-impact-line { clip-path: none !important; }
  .co-impact-line::after { display: none !important; }
}

/* ============================================================
   P11 (04/10) : nouveau casque du pied de page.
   Le rendu transparent (1560 x 1276) monte plus haut dans le cadre
   que l'image de Lando : le bas de « TOURNENT. » touchait le haut du
   casque. On descend l'image de 2,5 rem de plus que l'origine
   (position relative, donc meme taille, aucun recadrage ni deformation)
   pour degager un espace franc sous le titre, a 1440 comme a 390 px.
   Seule l'image descend : le bouton « Me contacter » (position absolue
   dans .footer-bg-helmet-layout) et le reste du pied de page ne bougent pas.
   Valeur d'origine dans la feuille Webflow : bottom -3rem.
   ============================================================ */
.footer-bg-img {
  bottom: -5.5rem;
}

/* ============================================================
   P12 (04/10) : corrections apres jugement (Opus et jury).
   ============================================================ */

/* 4d. Chronologie (galerie de l'histoire) : etiquettes en majuscules,
   un peu plus grandes, opacite pleine, lisibles comme celles de Lando.
   P15 : le fond de la section passe du bleu nuit au blanc au fil du
   defilement. On laisse donc chaque etape prendre la couleur de sa
   propre classe (claire sur fond sombre, sombre sur fond clair) au lieu
   d'imposer du blanc partout, sinon les derniers chapitres
   disparaissent sur le fond clair. */
.s.is-horizontal-track .eyebrow-w .text-eyebrow {
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  font-variation-settings: "wght" 800, "wdth" 92;
}
/* P22 (2e passe, 05/10) : pendant le defilement horizontal, le fond de
   page de la frise balaie tout le spectre, du bleu nuit (#0a1628) au
   creme (#f4f4ed). Aucune couleur de texte fixe ne tient 4,5:1 sur cette
   plage : la zone grise mediane est un trou ou ni le blanc ni le bleu
   nuit ne passent. On pose donc derriere chaque libelle une plaque bleu
   nuit translucide ; le texte reste blanc et se detache du fond quel que
   soit son etat. Sur le fond sombre la plaque se confond avec lui, sur
   le fond clair elle forme une petite pastille assumee. */
.s.is-horizontal-track .eyebrow-w {
  width: fit-content;
  max-width: 100%;
  padding: 0.25rem 0.55rem;
  border-radius: 0.35rem;
  background-color: color-mix(in srgb, var(--color--dark-green, #0a1628) 88%, transparent);
}
.s.is-horizontal-track .eyebrow-w .text-eyebrow,
.s.is-horizontal-track .eyebrow-w.c-green-off-white-2 .text-eyebrow,
.s.is-horizontal-track .eyebrow-w.c-dark-green-tint-2 .text-eyebrow {
  color: var(--color--white, #f3f6fb);
}

/* 4d. Moins de moire derriere les photos : les lignes topographiques
   du fond (moteur 3D) sont adoucies derriere la galerie. Aucun fichier
   ni modele 3D n'est touche, seul un voile en CSS. */
.s.is-horizontal-track .horizontal-pin-sticky::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-backdrop-filter: blur(2.5px);
  backdrop-filter: blur(2.5px);
}

/* 4a. Pied de page sur telephone : le casque est reduit d'environ 30 %
   et pose entier sur le bas du cadre, sans plus etre coupe. */
@media (max-width: 767px) {
  .footer-bg-img {
    height: 17rem;
    bottom: 0;
  }
}

/* 4a. Bouton « Me contacter » : plein et bleu comme « Contact » de
   l'en-tete, pose devant le casque, toujours visible et cliquable. */
.footer-bg-bottom-btn-w {
  z-index: 6;
}
.footer-bg-bottom-btn-w .btn-w {
  background-color: var(--color--lime, #7eb2ff);
  border-color: var(--color--lime, #7eb2ff);
  color: var(--co-ink, #0a1628);
  box-shadow: 0 0.45rem 1.35rem rgba(10, 22, 40, 0.5);
}
.footer-bg-bottom-btn-w .btn-w:hover {
  background-color: color-mix(in oklch, var(--color--lime, #7eb2ff) 86%, white);
  border-color: color-mix(in oklch, var(--color--lime, #7eb2ff) 86%, white);
  color: var(--co-ink, #0a1628);
}
@media (max-width: 767px) {
  .footer-bg-bottom-btn-w {
    bottom: 0.9rem;
  }
}

/* 4b. Page « En ligne » : le casque 3D est recentre dans le cadre,
   comme Lando centre le sien. */
.on-t-helm-scroll-pos1 {
  left: calc(50% - 38.78125rem);
}

/* ============================================================
   P17 (04/10, tour 3) : signature du heros.
   4c mis a jour. La signature se tracait au milieu du visage, a
   hauteur de la bouche. On la descend sur le bas du portrait, au
   niveau du buste et de la veste, sous le menton, comme Lando place
   la sienne. Le repere est proportionnel a la hauteur du heros
   (100 vh) : la meme zone du portrait est visee a 1440, 1024 et
   390 px. Meme animation, seul le cadre descend.
   Ancienne valeur (P12) : translateY(10rem), qui laissait le trace
   sur la bouche.
   Mesure : 36 vh place le centre de la signature a 86 % de la
   hauteur du heros sur les six largeurs testees (390, 768, 991,
   1024, 1280, 1440), soit le buste, sous le menton (a 73 %).
   ============================================================ */
.marquee-gl-target-w .marquee-gl-rive-target {
  transform: translateY(36vh);
}

/* 4e. Telephone : description du heros plus lisible (contraste) et
   12 px d'ecart entre les deux photos du duo. */
@media (max-width: 767px) {
  .co-note {
    color: var(--color--white, #f3f6fb);
  }
  .c.is-on-track-home .text-body-reg-mona,
  .title-para-w.c-grey-on-track .text-body-reg-mona {
    color: var(--color--white, #f3f6fb);
  }
  .otot-home-img-w.is-1 {
    left: calc(-7rem - 6px);
  }
  .otot-home-img-w.is-2 {
    right: calc(-7rem - 6px);
  }
}

/* 4f. « Mes realisations » : vignettes a coins biseautes, coupe en haut
   a gauche et en bas a droite, comme les cartes de Lando. Le trace du
   cadre (SVG) est ajuste dans le meme sens. */
.helmet-grid-item-img-w,
.co-real-caption {
  clip-path: polygon(
    11.8% 0,
    100% 0,
    100% 88.3%,
    88.2% 100%,
    0 100%,
    0 11.8%
  );
}

/* ============================================================
   P14 (04/10, tour 2) : direction artistique des realisations.
   Gravure et trame d'impression bleu outremer sur fond bleu nuit,
   texture de papier, « a la fois moderne et ancien ».
   On ne touche ni la grille, ni sa geometrie, ni son animation :
   seuls le trace du cadre, la legende et le survol sont ajustes.
   ============================================================ */

/* Cadres fins : le trace passe de 2 a 1 px, en bleu outremer
   discret au repos, comme un filet de planche imprimee. Le cadre
   de survol (lime) garde sa mecanique, simplement affine lui aussi. */
.helmet-grid-frame svg path {
  stroke-width: 1;
}
.helmet-grid-frame.is-base {
  color: color-mix(in oklch, var(--co-accent) 46%, transparent);
}

/* Legendes en capitales espacees : nom et pole se lisent comme des
   mentions de gravure, sans jamais devenir illisibles. */
.helmet-grid-item-text-w .text-title-small-label.text,
.helmet-grid-item-text-w .text-title-small-label.date {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  font-size: 0.78rem;
  line-height: 1.2;
}
.helmet-grid-item-text-w .text-title-small-label.text {
  color: var(--color--white, #f3f6fb);
}
.helmet-grid-item-text-w .text-title-small-label.date {
  color: color-mix(in oklch, var(--co-accent) 78%, white);
}
@media (max-width: 767px) {
  .helmet-grid-item-text-w .text-title-small-label.text,
  .helmet-grid-item-text-w .text-title-small-label.date {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
  }
  /* Sur telephone, le nom et le pole s'empilent : le nom ne se coupe
     plus au milieu, la lecture reste droite. */
  .helmet-grid-item-text-w {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: auto;
    padding-bottom: 0.15rem;
  }
  .helmet-grid-item-text-w .helmet-grid-item-date-w {
    margin-left: 0;
  }
}

/* Survol sobre : le filet s'allume en bleu outremer, sans vernis,
   sans degrade lourd et sans mouvement de la vignette. */
.helmet-grid-item:hover .helmet-grid-frame.is-base,
.helmet-grid-item:focus-within .helmet-grid-frame.is-base {
  color: var(--co-accent);
}

/* La fiche de survol (P11) devient une bande plate : un filet
   outremer, des capitales espacees, une description calme. */
.co-real-caption {
  padding: 0.85rem 1rem 0.8rem;
  background: color-mix(in srgb, var(--co-ink) 93%, transparent);
  border-top: 1px solid color-mix(in oklch, var(--co-accent) 72%, transparent);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  color: var(--color--white, #f3f6fb);
}
.co-real-caption__pole {
  margin-bottom: 0.32rem;
  color: var(--co-accent);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
}
.co-real-caption p {
  font-size: 0.78rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--color--white, #f3f6fb) 86%, var(--co-ink));
}

/* ============================================================
   P15 (04/10, tour 2) : recit de Charles dans la page.
   Chronologie en 8 chapitres (annee, titre court, texte court)
   et phrase de marque en fin de page.
   On ne touche ni la grille ni les animations du gabarit
   horizontal : seuls un texte court et son rythme sont ajoutes.
   ============================================================ */

/* 1a. Texte court de chaque chapitre, pose entre le libelle et
   l'image, dans la colonne existante. Petite taille, interligne
   aere, largeur bornee pour rester une legende de vignette. */
.co-chrono-note {
  max-width: 17rem;
  margin: 0;
  font-family: "Mona Sans Variable", Arial, sans-serif;
  font-size: 0.88rem;
  line-height: 1.55;
  letter-spacing: 0.005em;
  font-variation-settings: "wght" 420, "wdth" 96;
  color: color-mix(in srgb, var(--color--white, #f3f6fb) 92%, transparent);
  text-wrap: pretty;
}
/* Variante pour les chapitres de la seconde moitie de la frise, sur
   fond clair : le texte passe en bleu nuit pour rester lisible. */
.co-chrono-note.is-dark { color: var(--color--dark-green-tint-1, #243040); }
@media (max-width: 920px) {
  .co-chrono-note { max-width: 20rem; font-size: 0.88rem; }
}

/* 2d. Phrase de marque de fin de page, sous « TOUJOURS DES
   SYSTEMES QUI TOURNENT. », au-dessus du casque. */
.co-brand-line {
  margin: 1.1rem 0 0;
  max-width: 34rem;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--color--white, #f3f6fb) 86%, transparent);
  text-wrap: balance;
}
/* Variante posee sous le heros, dans la section de la promesse :
   une seule ligne centree, comme une signature sous le grand mot. */
.co-brand-line.is-hero {
  margin: 1.7rem auto 0;
  text-align: center;
  max-width: 38rem;
  color: color-mix(in srgb, var(--color--white, #f3f6fb) 92%, transparent);
}
@media (max-width: 767px) {
  .co-brand-line { font-size: 1rem; max-width: 22rem; }
  .co-brand-line.is-hero { max-width: 20rem; margin-top: 1.3rem; }
}

/* ============================================================
   P16 (04/10, tour 2) : finitions apres le jury visuel.
   Points traites ici : heros telephone, reseaux du pied de page,
   titre « l'actu », texte des formats, bouton CONTACT.
   La chronologie (images dediees) est posee dans le HTML.
   ============================================================ */

/* 2. Heros sur telephone : le contenu utile (le nom et « Fondateur
   de Neoria ») etait pousse trop bas par une marge haute de 10rem
   posee par le gabarit. Mesure : l'ecart visible entre le bouton
   CONTACT et le haut du nom vaut alors 38 px. On le reduit d'environ
   40 % (marge 10rem -> 8,5rem, ecart ramene a ~22 px).
   On ne descend pas plus bas : a 6rem le nom passait sous le bouton
   de l'en-tete (chevauchement). Le reste du heros est inchange. */
@media (max-width: 991px) {
  .home-hero-tablet-hero-text {
    margin-top: 8.5rem;
  }
}

/* 3. Titre « l'actu / Sur les reseaux » : la hauteur de ligne du
   gabarit (.886) est plus courte que la boite de la police. Le
   masque ovale qui revele le titre (ellipse posee au sommet de
   chaque ligne) coupait donc le bas des lettres. On redonne une
   interligne qui contient les glyphes ; l'animation est inchangee. */
.s.is-callout-socials .text-title-lg-mona,
.s.is-callout-socials .text-title-lg-display {
  line-height: 1.36;
}

/* 4. « Neoria collabore avec des entreprises… » : le texte etait
   plus petit que le minimum demande a 1440 px. On pose un plancher
   de 16 px et on l'assoit a 18 px a 1440, pour qu'il se lise comme
   un vrai paragraphe d'accroche et non comme une mention. */
.s.is-home-collabs .title-para-w .text-body-reg-mona {
  font-size: max(1.35rem, 16px);
}

/* 5. Reseaux du pied de page : « LinkedIn, GitHub, Neoria, e-mail »
   tenaient sur quatre lignes. On les met en ligne, alignes sur leur
   base. A 767 px et plus, la colonne reste a sa place, a droite. */
.footer-links-w > .footer-links-col:nth-child(2) .footer-links-layout {
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: baseline;
  column-gap: calc(var(--gap) * 1.1);
  row-gap: 0.35rem;
}

/* Sur telephone, la colonne ne fait que la moitie de la largeur :
   la rangee n'y tiendrait pas. On empile proprement les deux
   groupes et « Suivre sur » prend toute la largeur, assez pour
   tenir sur une seule ligne. */
@media (max-width: 479px) {
  .footer-links-w {
    flex-flow: column;
    align-items: stretch;
    row-gap: 1.3rem;
  }
  .footer-links-w > .footer-links-col {
    width: 100%;
  }
  .footer-links-w > .footer-links-col .footer-links-layout {
    align-items: flex-start;
    margin-top: 0.55rem;
    margin-bottom: 0;
  }
}

/* 6. Bouton CONTACT de l'en-tete : son bleu vif jurait avec le bleu
   nuit et le creme du site. On l'accorde a la palette (fond bleu
   nuit, texte creme) en gardant un liseré d'accent pour qu'il reste
   lisible, aussi bien sur le fond clair que sur les sections sombres.
   Le survol eclaircit le fond, le contraste ne baisse jamais. */
.nav .btn-w.is-nav {
  background-color: var(--color--dark-green, #0a1628);
  border-color: color-mix(in oklch, var(--color--lime, #7eb2ff) 58%, transparent);
  color: var(--color--cream, #eef1f6);
}
.nav .btn-w.is-nav:hover {
  background-color: color-mix(in oklch, var(--color--dark-green, #0a1628) 76%, var(--color--lime, #7eb2ff));
  border-color: var(--color--lime, #7eb2ff);
  color: var(--color--cream, #eef1f6);
}
.nav .btn-w.is-nav:focus-visible {
  outline: 2px solid var(--color--lime, #7eb2ff);
  outline-offset: 2px;
}


/* ============================================================
   P17 (04/10, tour 3) : le bouton du menu n'est plus vert citron.
   Le dessin Rive (btn-ui.riv, artboard « hamburger ») peignait un carre
   vert citron sur les sections sombres et une croix citron a
   l'ouverture, hors palette. On masque ce dessin et on redessine le
   bouton, dans la palette du site : creme sur les fonds clairs, bleu
   clair sur les fonds sombres, bleu nuit pour l'icone. Les trois
   etats (repos, survol, ouvert) sont couverts, le survol eclaircit le
   fond sans jamais reduire le contraste de l'icone.
   Le canvas reste dans le DOM (seulement masque) : le script du site
   continue de le trouver et de poser aria-expanded, sans erreur.
   ============================================================ */

.nav-ham {
  position: relative;
  color: var(--color--dark-green, #0a1628);
  background-color: var(--color--cream, #eef1f6) !important;
  border: 1px solid color-mix(in srgb, var(--color--dark-green, #0a1628) 24%, transparent) !important;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.nav-ham canvas[data-rive-nav-hamburger] {
  visibility: hidden !important;
}

/* Les barres : un seul pseudo-element porte les trois traits, le second
   sert de contre-trait pour la croix a l'ouverture. */
.nav-ham::before,
.nav-ham::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.35rem;
  height: 2px;
  border-radius: 2px;
  background-color: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.35s cubic-bezier(0.65, 0.05, 0, 1), box-shadow 0.35s cubic-bezier(0.65, 0.05, 0, 1);
  pointer-events: none;
}
.nav-ham::before {
  box-shadow: 0 -0.42rem 0 currentColor, 0 0.42rem 0 currentColor;
}

/* Fond sombre : carre bleu clair, icone bleu nuit. */
[data-nav-theme="light"] .nav-ham {
  background-color: var(--color--lime, #7eb2ff) !important;
  border-color: transparent !important;
}

/* Survol : le fond s'eclaircit, l'icone reste bleu nuit. */
.nav-ham:hover {
  background-color: color-mix(in oklch, var(--color--cream, #eef1f6) 86%, var(--color--dark-green, #0a1628)) !important;
}
[data-nav-theme="light"] .nav-ham:hover {
  background-color: color-mix(in oklch, var(--color--lime, #7eb2ff) 82%, white) !important;
  border-color: transparent !important;
}

/* Menu ouvert : la croix, en bleu clair et bleu nuit, jamais citron. */
.nav-ham[aria-expanded="true"] {
  background-color: var(--color--lime, #7eb2ff) !important;
  border-color: transparent !important;
}
.nav-ham[aria-expanded="true"]::before {
  box-shadow: 0 0 0 currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.nav-ham[aria-expanded="true"]::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.nav-ham[aria-expanded="true"]:hover {
  background-color: color-mix(in oklch, var(--color--lime, #7eb2ff) 82%, white) !important;
}

.nav-ham:focus-visible {
  outline: 2px solid var(--color--lime, #7eb2ff);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .nav-ham,
  .nav-ham::before,
  .nav-ham::after {
    transition: none;
  }
}

/* ============================================================
   P19 (04/10, tour 3) : corrections apres le jury de bout en bout.
   Quatre points sur telephone (pied de page, heros, duo, legendes)
   et deux sur ordinateur (menu, formats). Le casque (metalness et
   filaire au repos) est regle dans le moteur, pas ici.
   ============================================================ */

/* 1. Pie de page sur telephone. Quand on arrive au bas de la page,
   le panneau sombre du pied de page occupe tout l'ecran et la fin
   de la section « Sur les reseaux » (la ligne « Me suivre sur les
   reseaux » et la rangee de liens) passait sous la barre du haut :
   le bouton CONTACT recouvrait le lien LinkedIn et la ligne etait
   coupee par le bord. On raccourcit l'espace vide qui precede le
   pied de page (14rem -> 6rem, environ 87 px gagnes) pour que cette
   fin remonte sous la barre. Plus rien d'interactif ne se superpose.
   Mesure : la ligne passe de y -9 a y 78, les liens de y 37 a y 124,
   sous la barre (64 px). Aucun autre reglage du pied de page change. */
@media (max-width: 767px) {
  .s.is-footer > .spacer._14rem {
    height: 6rem;
  }
}

/* 2. Heros sur telephone : le nom « Charles Ouzeau » etait peint en
   blanc sur le fond creme du heros (contraste ~1,2:1, illisible).
   Il prend la couleur d'encre du site (bleu nuit, contraste ~16:1
   sur le fond creme), comme le sous-titre « Fondateur de Neoria ».
   Le mot-symbole reste lisible sur toute la largeur. */
.home-hero-tablet-wordmark {
  color: var(--color--dark-green, #0a1628);
}

/* 2. Le monogramme C O de l'en-tete garde une marge franche de 16 px
   sur les bords, sur telephone, et reste entier. */
@media (max-width: 767px) {
  .nav-inner {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* 5. Menu : l'entree active etait barree d'un trait (le trace SVG
   « circuit » de Lando), ce qui se lisait comme un bug. On retire
   le trait et on marque l'entree courante par un point bleu devant
   le mot, a l'interieur du cadre de l'entree (le cadre est en
   overflow: clip, le point est donc pose dans la zone libre a
   gauche du mot, centre verticalement). La couleur de l'entree
   courante revient au blanc, comme les autres, pour ne plus
   paraitre desactivee. */
.nav-menu-link-current-svg,
.nav-menu-link-current-svg * {
  display: none !important;
}
.nav-menu-link-w.w--current {
  color: var(--color--white, #f3f6fb);
}
.nav-menu-link-w.w--current::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background-color: var(--color--lime, #7eb2ff);
  transform: translateY(-50%);
  pointer-events: none;
}

/* 6. Duo sur telephone : les deux portraits etaient cote a cote,
   separe par une bande creme, et coupes par le haut du cadre. On
   les empile en pleine largeur : chaque portrait montre la visiere
   (cote machine) et le visage (cote humain) en entier. Le texte de
   chaque colonne passe au-dessus des photos, inchange. */
@media (max-width: 767px) {
  .otot-home-inner {
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    min-height: auto;
    padding-top: 7rem;
    padding-bottom: 2rem;
  }
  .otot-home-layout {
    order: 1;
    width: 100%;
  }
  .otot-home-bg {
    order: 2;
    position: static;
    inset: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .otot-home-img-w,
  .otot-home-img-w.is-1,
  .otot-home-img-w.is-2 {
    position: static;
    inset: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: auto;
  }
  .otot-home-img {
    width: 100%;
    max-width: none;
    height: auto;
    object-fit: contain;
    /* Le moteur faisait glisser chaque portrait horizontalement pour
       la mise en page cote a cote. En pleine largeur empilee, ce
       decalage laisserait une bande vide sur un bord : on l'annule. */
    transform: none !important;
  }
}

/* 7. Legendes des realisations sur telephone : le libelle doit tenir
   sur une ligne, sans se couper au milieu d'un mot ni passer sous le
   bord de la carte. Le bloc prend toute la largeur de la carte, le
   nom et le pole restent chacun sur une ligne. */
@media (max-width: 767px) {
  .helmet-grid-item-text-w {
    left: 0;
    right: 0;
    width: auto;
    max-width: 100%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .helmet-grid-item-text-w .text-title-small-label.text,
  .helmet-grid-item-text-w .text-title-small-label.date {
    white-space: nowrap;
  }
}

/* 8. « Proposer un appel » : bouton plein dans la section de la
   promesse, il faisait un second bouton plein de contact sur le
   meme ecran que le CONTACT de l'en-tete. Il devient un lien texte
   a l'encre du site (contraste eleve sur le fond creme de la
   section), souligne d'un filet a l'accent. Au survol, le filet
   passe a l'accent plein et le texte glisse vers un bleu profond :
   le contraste ne baisse jamais. Un seul bouton plein de contact
   par ecran. */
.co-link-cta.btn-w {
  background-color: transparent;
  border-color: transparent;
  height: auto;
  padding-left: 0;
  padding-right: 0;
  color: var(--color--dark-green, #0a1628);
}
.co-link-cta.btn-w .btn-text {
  border-bottom: 1px solid color-mix(in oklch, var(--color--lime, #7eb2ff) 70%, transparent);
  padding-bottom: 0.15em;
}
.co-link-cta.btn-w:hover {
  background-color: transparent;
  border-color: transparent;
  color: color-mix(in oklch, var(--color--dark-green, #0a1628) 72%, var(--color--lime, #7eb2ff));
}
.co-link-cta.btn-w:hover .btn-text {
  border-bottom-color: var(--color--lime, #7eb2ff);
}
.co-link-cta.btn-w:focus-visible {
  outline: 2px solid var(--color--lime, #7eb2ff);
  outline-offset: 3px;
}
.co-link-cta.btn-w .btn-icon-w {
  display: none;
}

/* ============================================================
   P20 (05/10) : finitions apres le quatrieme jury.
   Points traites ici : etiquettes et liens secondaires lisibles,
   texte d'aide du telephone entier, interlignage du manifeste.
   Les capitales accentuees (É, È, À, Ç) sont ecrites en dur dans
   le HTML : l'accent ne depend plus de text-transform: uppercase.
   ============================================================ */

/* 1. Capitales accentuees. Le diacritique de É monte plus haut que
   la ligne (mesure : son sommet arrive 0,12 px au-dessus du cadre),
   et le cadre de l'etiquette (overflow: clip) le rognait. On elargit
   la zone de rognage de quelques pixels : l'accent est entier, la
   mise en page ne bouge pas d'un pixel. */
.eyebrow-w {
  overflow-clip-margin: 5px;
}

/* ------------------------------------------------------------
   2. Etiquettes et liens secondaires : 12 a 13 px minimum et
   contraste AA. La racine Webflow varie avec la largeur de la
   fenetre (13,3 px a 1440, 10,8 px a 390) : les planchers sont
   donc poses en pixels, pas en rem.
   ------------------------------------------------------------ */

/* 2a. Fiches de realisations : nom et pole, sous la vignette.
   Nom et pole passent a 13 px (12 px sur telephone). Le pole
   s'eclaircit pour tenir le contraste AA sur le fond bleu nuit. */
.helmet-grid-item-text-w .text-title-small-label.text,
.helmet-grid-item-text-w .text-title-small-label.date {
  font-size: 13px;
  line-height: 1.25;
  letter-spacing: 0.1em;
}
.helmet-grid-item-text-w .text-title-small-label.text {
  color: var(--color--white, #f3f6fb);
}
.helmet-grid-item-text-w .text-title-small-label.date {
  color: color-mix(in oklch, var(--color--lime, #7eb2ff) 58%, white);
}
@media (max-width: 767px) {
  .helmet-grid-item-text-w {
    height: auto;
  }
  .helmet-grid-item-text-w .text-title-small-label.text,
  .helmet-grid-item-text-w .text-title-small-label.date {
    font-size: 12px;
    letter-spacing: 0.04em;
    /* A 12 px, un nom long ne tient plus sur une seule ligne : il se
       coupe aux espaces au lieu de deborder de la demi-grille. */
    white-space: normal;
  }
}

/* 2b. Legende de survol des fiches (ordinateur) : 12 px minimum,
   pole eclairci sur le fond bleu nuit de la bande. */
.co-real-caption__pole {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: color-mix(in oklch, var(--co-accent) 58%, white);
}
.co-real-caption p {
  font-size: 12px;
  line-height: 1.45;
}

/* 2c. Menu : liens de contact et de reseaux, et etiquette de tete. */
.nav-menu-social-w .btn-text {
  font-size: max(1rem, 13px);
}
.text-eyebrow[data-nav-link-highlight] {
  font-size: 12px;
  color: var(--color--green-off-white-1, #cfd8e6);
}

/* 2d. Pied de page : etiquettes de colonne, liens legaux, copyright. */
.footer-links-w .text-eyebrow {
  font-size: 12px;
  color: var(--color--green-off-white-1, #cfd8e6);
}
.footer-legal-links-w .btn-text {
  font-size: max(1rem, 13px);
}
.footer-legal-links-w .text-title-small-label {
  font-size: 13px;
  line-height: 1.4;
}

/* ------------------------------------------------------------
   3. Texte d'aide du heros sur telephone. Le bloc etait borne a
   10 rem et rogne (overflow: clip) : a 390 px le debut de
   « toucher pour verrouiller » disparaissait. On laisse la phrase
   sortir entiere. Elle se pose a gauche du bouton a main, plus bas
   que la signature du heros, qu'elle ne recouvre donc pas.
   ------------------------------------------------------------ */
@media (max-width: 991px) {
  .touch-desc-inner {
    overflow: visible;
  }
  .home-hero-touch-desc-w .text-eyebrow.touch-desc {
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
  }
}

/* Le bouton a main bascule entre les deux phrases : « toucher pour
   verrouiller » au repos, « Reprendre le scroll » une fois le
   defilement verrouille. Le script du site pose l'etat en ligne ;
   on donne ici le meme etat par defaut (une seule phrase visible),
   pour que les deux ne se superposent jamais si le script ne prend
   pas la main. */
.touch-desc-inner[data-home-swipe-desc="locked"] {
  display: none;
}

/* ------------------------------------------------------------
   4. Manifeste « JE NE VENDS PAS DE L'IA… » : l'accent grave de
   SYSTEMES touchait la ligne du dessus. Ouverture de l'interlignage,
   memes marges, meme mise en page.
   Mesure : a +0,05 em il restait 0,8 px de recouvrement entre le
   sommet de l'accent et le bas de la ligne precedente ; +0,07 em
   est la plus petite ouverture qui degage une garde positive aux
   deux largeurs (garde +1,3 px a 1440, +2,0 px a 390).
   ------------------------------------------------------------ */
.text-impact-lg-mona[data-co-impact] {
  line-height: calc(90.6% + 0.07em);
}

/* ============================================================
   P22 (05/10) : mentions legales, police libre, contrastes et
   finitions d'accessibilite.
   ============================================================ */

/* 1. Police d'affichage libre (SIL Open Font License 1.1),
   auto-hebergee. Remplace la police d'affichage commerciale retiree du
   site. Aucune requete externe : les deux fichiers sont dans
   assets-charles/fonts/. */
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/playfair-display-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/playfair-display-700-latin-ext.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 2. Frise du parcours : texte court des chapitres, meme fond mouvant
   que les libelles. Meme remede que pour les etiquettes : une plaque
   bleu nuit translucide derriere le paragraphe, texte blanc. La mesure
   balaie tout le defilement ; le pire cas tombe a ~10:1, sur le fond
   creme, jamais sous 4,5:1. */
.s.is-horizontal-track .co-chrono-note,
.s.is-horizontal-track .co-chrono-note.is-dark {
  padding: 0.55rem 0.7rem;
  border-radius: 0.45rem;
  background-color: color-mix(in srgb, var(--color--dark-green, #0a1628) 88%, transparent);
  color: color-mix(in srgb, var(--color--white, #f3f6fb) 92%, transparent);
}

/* 3. Bouton de menu : anneau de focus visible sur les deux fonds.
   Le lisere blanc porte sur le fond sombre, le trait bleu nuit sur le
   fond clair ; l'un des deux depasse toujours 3:1.
   La regle generique `*[tabindex]:focus-visible` des feuilles du site
   est ecrite plus loin dans le document et portait un contour invalide
   (`var(--color--primary)` n'existe pas) : on la supplante par une
   specificite superieure et on definit la variable manquante. */
:root { --color--primary: var(--color--lime, #7eb2ff); }
.nav[data-nav-wrap] .nav-ham:focus-visible {
  outline: 3px solid var(--color--dark-green, #0a1628);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--color--white, #f3f6fb);
}

/* 4. Liens legaux du pied de page : cible tactile d'au moins 24 px
   de haut (WCAG 2.5.8), y compris a 390 px ou la racine Webflow
   descend a 10,8 px. */
.footer-legal-links-w .text-link-w {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.footer-legal-links-w .footer-legal-links-col {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.25rem;
  row-gap: 0.35rem;
}
.footer-legal-links-w .btn-text:hover { color: var(--color--white, #f3f6fb); }

/* 5. Pied de page des pages sans gabarit complet (404) : les liens
   legaux restent joignables sur toutes les pages. */
.p22-footer-legal { width: 100%; padding: 1.5rem 2rem 3rem; }
.p22-footer-legal__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  max-width: 78rem;
  margin-inline: auto;
}
.p22-footer-legal__copy {
  margin: 0;
  font-family: "Mona Sans Variable", Arial, sans-serif;
  font-size: max(0.8125rem, 13px);
  color: var(--color--green-off-white-2, #a7b2c4);
}
.p22-footer-legal__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; }
.p22-footer-legal__links a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-family: "Mona Sans Variable", Arial, sans-serif;
  font-size: max(0.8125rem, 13px);
  letter-spacing: 0.06em;
  color: var(--color--green-off-white-1, #cfd8e6);
  text-decoration: none;
}
.p22-footer-legal__links a:hover { color: var(--color--white, #f3f6fb); text-decoration: underline; }
.p22-footer-legal__links a:focus-visible { outline: 3px solid var(--color--lime, #7eb2ff); outline-offset: 3px; }

/* 6. Page 404 (P22, 05/10) : le visuel central quitte la scene 3D.
   La scene n'est plus chargee sur cette page (ni sur les pages legales) :
   le « 404 » est dessine en SVG local, dans le bleu clair du site, aux
   proportions de la scene d'origine : deux « 4 » du gabarit, un anneau
   pour le « 0 ». Aucun fichier 3D n'est requete, aucun canvas n'est monte.
   Les deux SVG « 4 » du gabarit restent masques (display:none). */
.not-found .utility__gl {
  width: min(46rem, 86vw);
  height: auto;
  aspect-ratio: 924 / 348;
}
.co-404-art {
  display: block;
  width: 100%;
  height: auto;
  color: var(--color--lime, #7eb2ff);
  shape-rendering: geometricPrecision;
}

/* Le titre et le grand mot se touchaient (interligne 0,886 sur deux blocs
   empiles au bas de la page). On les separe sans toucher a la taille. */
.not-found .utility__text--w {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}
.not-found .utility__text--w .text-title-reg-mona { line-height: 1; }
.not-found .utility__text--w .text-title-reg-display { line-height: 1; }