/* =========================================================
   Sitero — apropos.css
   Deux sections ajoutées à la page d'accueil :
     1. « L'offre en chiffres »  → .ab-nums   (panneau turquoise plein)
     2. « Qui est derrière »     → .ab-me     (portrait + texte)

   Cette feuille est INDÉPENDANTE : elle ne modifie rien de style.css.
   Toutes les classes sont préfixées « ab- » pour qu'aucun nom court
   (.cta, .ph, .note…) ne puisse en écraser un autre du site.

   À charger APRÈS style.css :
     <link rel="stylesheet" href="assets/css/apropos.css?v=1">
   ========================================================= */

/* ---------------------------------------------------------
   Alias locaux de la palette.
   On passe par des variables intermédiaires pour deux raisons :
   - une seule ligne à corriger si un nom de variable change ;
   - la valeur de secours (le 2e argument de var) garantit que la
     section reste lisible même si style.css n'était pas chargé.
   --------------------------------------------------------- */
.ab-nums,
.ab-me{
  --ab-t:var(--tint,#0a8fa8);      /* turquoise principal */
  --ab-th:var(--tint-h,#0ba6c2);   /* survol, un ton plus clair */
  --ab-tl:var(--tint-l,#2ecfe6);   /* turquoise vif, sur fond foncé seulement */
  --ab-td:var(--tint-d,#065f70);   /* turquoise profond, fond du panneau */
  --ab-gold:var(--gold-l,#e8a33d); /* second accent, employé une seule fois */
}


/* =========================================================
   1. L'OFFRE EN CHIFFRES
   -----------------------------------------------------------
   Volontairement différent du bloc noir « 65 % / 3 s / 1er » qui
   parle du MARCHÉ : ici on parle de L'OFFRE. Fond turquoise plein
   plutôt que noir, cellules séparées par des filets comme une
   fiche technique. C'est le bloc le plus coloré du site : il doit
   se lire comme un tableau d'engagements, pas comme une pub.
   ========================================================= */
.ab-nums{padding:var(--pad-s) 0}

/* Le panneau porte la classe utilitaire .sec--dark en plus de la
   sienne : c'est ce qui prévient le reste du site qu'on est sur une
   surface foncée (curseur « goutte d'eau » qui s'éclaircit, contour
   de focus clair). On lui rend juste son fond turquoise ici, avec
   une spécificité supérieure pour passer devant le noir de .sec--dark. */
.ab-nums .ab-nums__panel{
  position:relative;overflow:hidden;
  border-radius:var(--r-xl);
  background:
    radial-gradient(120% 130% at 8% 0%,rgba(46,207,230,.30),transparent 58%),
    linear-gradient(145deg,var(--ab-td) 0%,var(--ab-t) 62%,#0b7f95 100%);
  box-shadow:0 30px 70px -46px rgba(6,95,112,.85);
  color:#fff;
}

/* Bandeau d'en-tête du panneau : il cadre le tableau et annonce
   franchement le statut des chiffres (des engagements, pas des
   résultats). */
.ab-nums__tag{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:16px clamp(20px,2.4vw,32px);
  border-bottom:1px solid rgba(255,255,255,.20);
  font-size:.78rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.88);
}
.ab-nums__tag .ic{font-size:1.15em;stroke-width:2.6;color:var(--ab-tl)}

/* La grille déborde d'1 px à droite et en bas : le panneau étant en
   overflow:hidden, les filets de la dernière colonne et de la
   dernière ligne sortent du cadre. Aucun nth-child à réécrire à
   chaque point de rupture — ça marche quel que soit le nombre de
   colonnes affichées. */
.ab-nums__grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  margin:0 -1px -1px 0;
}
.ab-num{
  padding:clamp(24px,2.6vw,34px) clamp(20px,2.2vw,30px) clamp(26px,2.8vw,36px);
  border-right:1px solid rgba(255,255,255,.16);
  border-bottom:1px solid rgba(255,255,255,.16);
  transition:background .45s var(--e);
}
.ab-num:hover{background:rgba(255,255,255,.07)}

.ab-num__v{display:flex;align-items:baseline;gap:.12em;flex-wrap:wrap}
/* tabular-nums : sans ça, la largeur des chiffres change pendant que
   le compteur tourne et le bloc tremble à chaque image. */
.ab-num__n{
  font-size:clamp(2.6rem,4.4vw,3.5rem);line-height:1;font-weight:660;
  letter-spacing:-.05em;color:#fff;font-variant-numeric:tabular-nums;
}
.ab-num__u{
  font-size:clamp(1.1rem,1.9vw,1.5rem);font-weight:600;letter-spacing:-.02em;
  color:var(--ab-tl);
}
.ab-num__sep{
  font-size:1.1rem;font-weight:500;color:rgba(255,255,255,.62);
  margin:0 .18em;letter-spacing:0;
}
.ab-num__k{
  margin-top:16px;font-size:1.02rem;font-weight:620;letter-spacing:-.02em;
  color:#fff;text-wrap:balance;
}
.ab-num__d{
  margin-top:9px;font-size:.87rem;line-height:1.5;
  color:rgba(255,255,255,.72);text-wrap:pretty;
}

/* La mise en garde sous le panneau. Elle est aussi importante que les
   chiffres : elle dit ce qu'ils ne sont pas. */
.ab-nums__foot{
  display:flex;gap:14px;align-items:flex-start;
  margin-top:26px;padding-left:18px;
  border-left:3px solid var(--ab-t);
  max-width:78ch;
}
.ab-nums__foot p{color:var(--ink-2);font-size:.9rem;line-height:1.6}
.ab-nums__foot b{color:var(--ink);font-weight:600}


/* =========================================================
   2. QUI EST DERRIÈRE SITERO
   -----------------------------------------------------------
   Une seule colonne de lecture. Le grand portrait encadré a été
   retiré au profit de la FICHE (assets/css/fiche.css) : une petite
   pastille posée en signature sous le titre, qui s'ouvre au survol
   et donne le numéro. Thibault voulait sa tête plus petite et le
   geste du site de Yoan ; à partir de là, une colonne de portrait
   n'avait plus rien à porter, et deux colonnes dont une presque
   vide auraient déséquilibré la section.
   ========================================================= */
.ab-me{padding:var(--pad-s) 0}
.ab-me__in{display:block}
.ab-me__txt{max-width:800px}

/* ---------- la signature sous le titre ---------- */
.ab-me__sign{margin:30px 0 34px}
.ab-me__ou{
  margin-top:14px;color:var(--ink-3);font-size:.86rem;line-height:1.5;max-width:46ch;
}

/* 🔴 LA FICHE FLOTTE, ELLE NE POUSSE PAS.
   En grandissant au survol elle passe de 78 à 186 px de haut. Laissée dans
   le flux, elle repoussait tout le texte de la page à chaque passage de
   souris ; en réservant la place de l'état ouvert, elle laissait un trou
   blanc de 108 px quand personne ne la survolait.
   La sortie : une fente de la hauteur de l'état FERMÉ, dans laquelle la
   fiche est posée en absolu. Elle s'ouvre alors PAR-DESSUS le paragraphe
   qui suit — c'est une carte opaque avec une ombre, elle se lit comme un
   calque au-dessus, exactement comme la vignette du site de Yoan.
   La hauteur de la fente n'est pas devinée : 58 px de photo + 2 × 8 px de
   marge intérieure + 2 × 1 px de filet = 78 px, et la colonne de texte est
   plus courte que la photo. Les trois valeurs sont dans fiche.css. */
@media (hover:hover) and (pointer:fine){
  .ab-me__fente{position:relative;height:78px}
  .ab-me__fente .fiche{position:absolute;top:0;left:0;z-index:3}
}

/* ---------- colonne texte ---------- */
/* Le .h2 du site est calibré pour la pleine largeur (jusqu'à 3,6 rem).
   Ici il vit dans une colonne de 800 px : à taille normale il partait
   sur quatre lignes. On le redescend, sans toucher au .h2 global. */
.ab-me__txt .h2{font-size:clamp(1.95rem,3.6vw,2.8rem);letter-spacing:-.032em;line-height:1.08}
.ab-me__txt .lead{margin-top:22px}
.ab-me__p{margin-top:20px;color:var(--ink-2);font-size:1rem;line-height:1.65;max-width:62ch}
.ab-me__p b{color:var(--ink);font-weight:600}

/* Trois arguments courts, chacun sur son filet. Pas de carte, pas
   d'ombre : un filet turquoise suffit à séparer, et ça allège la
   page qui contient déjà beaucoup de cartes. */
.ab-me__pts{margin-top:36px;display:grid;gap:2px;background:var(--line);border-radius:var(--r-m);overflow:hidden}
.ab-me__pt{display:flex;gap:16px;align-items:flex-start;background:var(--white);padding:20px 22px;transition:background .4s var(--e)}
.ab-me__pt:hover{background:var(--paper)}
.ab-me__pt .ic{font-size:1.35rem;color:var(--ab-t);stroke-width:1.8;margin-top:.15em}
.ab-me__pt b{display:block;font-size:1rem;font-weight:620;letter-spacing:-.02em}
.ab-me__pt p{margin-top:6px;color:var(--ink-2);font-size:.93rem;line-height:1.55}

/* L'encadré de transparence sur l'activité complémentaire.
   Fond turquoise très pâle + filet à gauche : on le remarque sans
   qu'il ressemble à un avertissement de danger. */
.ab-me__note{
  margin-top:32px;padding:24px 26px;
  border-radius:var(--r-m);
  border-left:4px solid var(--ab-t);
  background:linear-gradient(100deg,rgba(10,143,168,.09),rgba(10,143,168,.03));
}
.ab-me__note h3{font-size:1rem;font-weight:640;letter-spacing:-.02em;margin-bottom:10px}
.ab-me__note p{color:var(--ink-2);font-size:.95rem;line-height:1.6;max-width:64ch}
.ab-me__note b{color:var(--ink);font-weight:600}

.ab-me__go{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}


/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .ab-nums__grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .ab-nums__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:460px){
  .ab-nums__grid{grid-template-columns:1fr}
  .ab-num{padding:22px 20px 24px}
}

/* =========================================================
   PRÉFÉRENCES SYSTÈME
   ========================================================= */
/* Note importante sur les compteurs.
   Le mécanisme data-count de main.js part toujours de 0 et n'est
   lancé que si GSAP tourne ET que le visiteur n'a pas demandé de
   « mouvement réduit ». Dans les autres cas, les chiffres restent
   affichés à 0 — c'est déjà le cas du bloc noir existant.
   Parade retenue ici, sans toucher au JavaScript : chaque valeur est
   RÉPÉTÉE en toutes lettres dans la note de sa cellule. Même figée à
   0, la section reste donc exacte et compréhensible. */
@media print{
  /* .sec--dark force le blanc à l'impression : on remet du texte noir
     pour que le panneau ne s'imprime pas en blanc sur blanc. */
  .ab-nums .ab-nums__panel{box-shadow:none;border:1px solid #000}
  .ab-num__n,.ab-num__k{color:#000!important}
  .ab-num__u{color:#000!important}
  .ab-num__d,.ab-nums__tag{color:#333!important}
  .ab-num{border-color:#bbb!important}
  .ab-me__por::before{display:none}
}