/**
 * Feuille de styles du LOT 3 — accueil + hub expertises.
 * 05/09/2026, DESIGN.md §7.2 (carte d'offre), §7.3 (carte verticale de
 * decision), §7.4 (bloc de preuve), §7.5 (bloc capture de travail),
 * §13 (composition accueil), §14.1 (composition expertises), §10 (mouvement).
 *
 * Fichier neuf, deja enfile par inc/refonte-loader.php (garde file_exists,
 * ligne 65). Aucune regle de refonte-2026.css, refonte-entete.css,
 * refonte-menu-mobile.css, refonte-pied.css ou js/refonte-2026.js n'est
 * modifiee ici : ces fichiers appartiennent au LOT 1/2 en cours ailleurs.
 * Tous les tokens utilises (--gold, --edge-fort, --panel, --sp-*, etc.)
 * sont deja declares dans :root par refonte-2026.css (LOT 1) et charges
 * avant ce fichier par le loader.
 *
 * Retour arriere : ce fichier est une creation pure. Le supprimer annule
 * entierement ce lot cote CSS (voir JOURNAL-INTERVENTIONS.md §5).
 */

/* ── 0. Budget de hauteur (§13 : cible 5000-5400px desktop) ──────────────
   .sec applique clamp(64px,6vw,96px) haut+bas (refonte-2026.css, hors
   possession de ce lot) : correct pour des sections a un seul bloc de
   texte, trop genereux pour les sections neuves qui portent deja leur
   propre respiration interne (bande de preuve, entrees, cas detaille,
   chez nous). Reduction ciblee ici, par selecteur, sans toucher au token
   partage ni a la regle .sec elle-meme. */
.sec:has(> .wrap > .preuve-bande),
.sec:has(> .wrap > .entrees),
.sec:has(> .wrap > .cas-detaille),
.sec:has(> .wrap > .chez-nous-grid){padding:clamp(var(--sp-10),4vw,var(--sp-16)) 0}

/* ── 1. Bloc capture de travail (§7.5) ───────────────────────────────────
   Cadre reutilise par le hero, le cas detaille et « ce qui tourne chez
   nous ». Une image sans legende est une decoration : la legende est
   posee dans le balisage a chaque usage, jamais optionnelle en CSS. */
.capture{border:1px solid var(--edge-fort);border-radius:var(--r-3,3px);
  box-shadow:0 22px 60px -30px rgba(0,0,0,.55);overflow:hidden;
  background:linear-gradient(165deg,var(--panel),rgba(8,26,45,.6));
  min-width:0;max-width:100%}
/* Debordement reel mesure a 375px : les deux libelles mono de la barre
   ne se coupent pas (mono, sans espace type nom-de-domaine) ; en flex
   sans garde, leur largeur intrinseque force le conteneur au-dela du
   viewport et entraine TOUT le bloc (donc le H1 au-dessus dans la
   grille) hors cadre, un seul bloc rigide poussant toute la ligne de
   grille. Correctif systemique : chaque libelle peut se reduire
   (min-width:0) et se tronque proprement plutot que de pousser le
   parent ; le libelle de droite (secondaire) disparait sous 480px, le
   libelle de gauche (le repere du bloc) reste seul et se tronque. */
.capture-top{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:9px 16px;border-bottom:1px solid var(--rule2);color:var(--muted2);min-width:0}
.capture-top span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.capture-top .dot{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--gold2);margin-right:6px;vertical-align:middle;flex:none}
@media (max-width:480px){.capture-top span:last-child{display:none}}
.capture-media{display:block;position:relative;width:100%;min-width:0}
.capture-media img{display:block;width:100%;height:100%;object-fit:cover}
.capture-legende{padding:14px 16px;font-size:13px;line-height:1.55;color:var(--muted)}

/* Etiquette « schema », jamais « capture » sur un artefact qui n'est pas
   une prise d'ecran (DESIGN §7.6 : un scenario presente comme une
   realisation est un mensonge — la meme regle vaut pour son etiquette). */
.etiquette{display:inline-flex;align-items:center;gap:6px;font-family:'JetBrains Mono','JetBrains Mono Repli',monospace;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold2);
  border:1px solid rgba(217,193,135,.4);border-radius:var(--r-pill,999px);padding:4px 10px}

/* ── 2. Hero accueil, colonne droite en capture (§13 section 2) ─────────
   .hero-grid existe deja (refonte-2026.css) : cette regle habille son
   second enfant quand il porte .capture au lieu de .sys. */
.hero-grid > .capture{align-self:start}
.hero-grid .capture-media{aspect-ratio:1200/750}

/* ── 3. Bande de preuve statique (§7.4, variante compacte §13 section 3)
   Remplace .proof .track (bandeau defilant retire). Trois a quatre
   elements, chacun porte client, periode, base, resultat, methode —
   les cinq champs exiges, condenses pour tenir dans une bande. Chaque
   carte est un lien entier vers sa fiche. Reutilisee telle quelle sur
   /expertises/ pour la preuve croisee (meme classe, memes regles). */
.preuve-bande{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;min-width:0;
  background:var(--edge-fort);border:1px solid var(--edge-fort);border-radius:var(--r-3,3px);overflow:hidden}
.preuve-item{display:block;position:relative;padding:18px 22px;background:var(--panel);
  color:inherit;text-decoration:none;transition:background .25s;min-width:0}
.preuve-item:hover{background:var(--panel2)}
.preuve-item:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.preuve-client{display:block;font-size:13px;font-weight:600;color:var(--ivory);margin-bottom:2px}
.preuve-base{display:block;font-size:12.5px;color:var(--muted);line-height:1.45;max-width:32ch;margin-bottom:10px}
.preuve-valeur{display:block;font-size:clamp(24px,2.2vw,32px);font-weight:600;color:var(--gold);line-height:1}
.preuve-valeur span{font-size:13px;font-weight:400;color:var(--muted2);letter-spacing:.02em;margin-left:8px}
.preuve-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;font-family:'JetBrains Mono','JetBrains Mono Repli',monospace;
  font-size:11.5px;color:var(--muted2)}
.preuve-meta b{color:var(--gold2);font-weight:500}
.preuve-lien{display:inline-flex;align-items:center;gap:5px;margin-top:12px;font-size:12.5px;color:var(--gold2)}
.preuve-lien svg{width:12px;height:12px;transition:transform .2s}
.preuve-item:hover .preuve-lien svg{transform:translateX(3px)}
@media (max-width:960px){.preuve-bande{grid-template-columns:1fr}}

/* ── 4. Cas detaille pleine largeur (§13 section 5) ──────────────────── */
.cas-detaille{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:center;min-width:0}
.cas-detaille > *{min-width:0}
.cas-detaille .capture-media{aspect-ratio:1200/750}
.cas-detaille-corps{display:flex;flex-direction:column;gap:16px}
.cas-detaille-corps .k{font-family:'JetBrains Mono','JetBrains Mono Repli',monospace;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold)}
.cas-detaille-corps h3{font-size:clamp(22px,2.4vw,28px);font-weight:600;line-height:1.2;letter-spacing:-.015em}
.cas-detaille-corps p{font-size:16px;line-height:1.65;color:var(--muted);max-width:52ch}
.cas-detaille-champs{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--edge);border-radius:3px;overflow:hidden;margin-top:6px}
.cas-detaille-champs div{padding:16px 18px;border-right:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.cas-detaille-champs div:nth-child(2n){border-right:none}
.cas-detaille-champs div:nth-last-child(-n+2){border-bottom:none}
.cas-detaille-champs .k{display:block;font-size:11px;letter-spacing:.1em}
.cas-detaille-champs b{display:block;margin-top:6px;font-size:15px;font-weight:600;color:var(--ivory);line-height:1.35}
.cas-detaille-champs .cd-methode{grid-column:1 / -1;border-right:none}
.cas-detaille-champs .cd-methode b{font-size:13.5px;font-weight:400;color:var(--muted)}
@media (max-width:960px){.cas-detaille{grid-template-columns:1fr}.cas-detaille-champs{grid-template-columns:1fr}
  .cas-detaille-champs div{border-right:none}.cas-detaille-champs div:nth-last-child(-n+2){border-bottom:1px solid var(--edge)}
  .cas-detaille-champs div:last-child{border-bottom:none}}

/* ── 5. Cartes des cinq metiers, carte entiere cliquable (§7.2) ─────────
   .card existe deja (refonte-2026.css). Ces regles retirent le curseur
   generique et etendent le lien du titre a la carte entiere, sans
   dupliquer .card lui-meme. Le titre reste le lien accessible ; ::after
   ne fait qu'etendre sa zone de clic. */
.cards .card{cursor:default;position:relative}
.cards .card h3 a{position:static}
.cards .card h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.cards .card:has(h3 a):hover{cursor:pointer}
.cards .card .tarif{margin-top:auto;padding-top:14px;border-top:1px solid var(--rule2)}
.cards .card .tarif b{display:block;font-size:17px;color:var(--gold);font-weight:600}
.cards .card .tarif span{display:block;margin-top:3px;font-size:12px}

/* ── 6. Ce qui tourne chez nous (§13 section 7) ──────────────────────── */
/* Hauteur cible de section 420px (§13 ligne 7) : la capture portrait
   (ratio 1200/1496) rendue a pleine largeur de colonne depasserait tres
   largement ce budget. Cadre a hauteur fixe, image en object-fit:contain
   (aucun recadrage supplementaire, l'image entiere reste visible,
   simplement reduite) plutot qu'un aspect-ratio qui force la hauteur. */
.chez-nous-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,40px);min-width:0}
.chez-nous-grid > figure{min-width:0}
.chez-nous-grid .capture-media{height:300px;display:flex;align-items:center;justify-content:center;background:var(--deep)}
/* Le <picture> intermediaire n'a pas de hauteur propre : sans cette
   regle, le height:100% de l'image ne resout contre rien de definite et
   l'image retombe sur sa taille intrinseque (1200x1496), qui deborde le
   cadre de 300px et se fait rogner par overflow:hidden sur .capture.
   Le <picture> doit explicitement remplir le parent flex avant que
   l'image en heritte. */
.chez-nous-grid .capture-media picture{display:block;width:100%;height:100%}
.chez-nous-grid .capture-media img{width:auto;height:100%;object-fit:contain;margin:0 auto}
.chez-nous-grid figure[data-role="schema"] .capture-media{background:var(--base)}
.chez-nous-grid figure[data-role="schema"] .capture-media picture,
.chez-nous-grid figure[data-role="schema"] .capture-media img{width:100%;height:100%;object-fit:cover}
.chez-nous-grid figure{margin:0}
@media (max-width:820px){.chez-nous-grid{grid-template-columns:1fr}.chez-nous-grid .capture-media{height:260px}}

/* ── 7. Trois entrees de lecture (§7.8 nav, §13 section 4, §14.1) ───────
   Reutilisee sur l'accueil (sans phrase de resultat, DESIGN §13 ne
   l'exige pas a cet endroit) et sur /expertises/ (avec phrase de
   resultat, DESIGN §14.1). Le contenu differe par page, le composant est
   le meme : c'est une correction systemique, pas deux composants proches
   qui divergent sans raison. */
.entrees{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--edge);border-radius:3px;overflow:hidden;min-width:0}
.entrees > article{padding:24px 22px;border-right:1px solid var(--edge);background:linear-gradient(170deg,var(--panel),rgba(8,26,45,.55));display:flex;flex-direction:column;gap:11px;min-width:0}
.entrees > article:last-child{border-right:none}
.entrees .k{font-family:'JetBrains Mono','JetBrains Mono Repli',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold2)}
.entrees h3{font-size:19px;font-weight:600;line-height:1.25}
.entrees ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:2px}
.entrees li a{font-size:14.5px;color:var(--ivory);text-decoration:none;border-bottom:1px solid rgba(217,193,135,.25);padding-bottom:1px;transition:border-color .2s,color .2s}
.entrees li a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.entrees .resultat{margin-top:auto;padding-top:12px;border-top:1px solid var(--rule2);font-size:12.5px;color:var(--muted);line-height:1.5}
.entrees .resultat a{color:var(--gold2)}
@media (max-width:1200px){.entrees{grid-template-columns:1fr}.entrees > article{border-right:none;border-bottom:1px solid var(--edge)}.entrees > article:last-child{border-bottom:none}}

/* ── 8. Matrice de decision : tableau ≥720, cartes verticales <720 (§7.3)
   Les deux rendus lisent le meme tableau de donnees PHP (une seule
   source) : aucune divergence possible entre les deux presentations. */
@media (max-width:719px){.mx-wrap{display:none}}
.mx-cartes{display:none}
@media (max-width:719px){.mx-cartes{display:flex;flex-direction:column;gap:16px}}
.mx-carte{border:1px solid var(--edge-fort);border-radius:3px;padding:20px 20px 22px;background:linear-gradient(168deg,var(--panel),rgba(8,26,45,.5));display:flex;flex-direction:column;gap:0}
.mx-carte .mc-k{display:block;font-family:'JetBrains Mono','JetBrains Mono Repli',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold2);margin-bottom:8px}
.mx-carte .mc-constat{font-size:17px;line-height:1.45;color:var(--ivory);max-width:46ch}
.mx-carte hr{border:none;border-top:1px solid var(--rule2);margin:16px 0}
.mx-carte .mc-etape{font-size:15px;color:var(--ivory)}
.mx-carte .mc-action{font-size:16px;line-height:1.5;color:var(--muted);margin-top:8px}
.mx-carte .mc-action a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(217,193,135,.35)}
.mx-carte .btn{margin-top:16px;width:100%;justify-content:center}

/* Degrade d'affordance sur le tableau desktop quand il deborde de son
   conteneur (§7.3 : « au-dessus de 720 px, le tableau reprend, avec un
   degrade de bord droit tant que sa largeur depasse celle du
   conteneur »). Bascule par la classe .a-deborde, posee par le script de
   la page (mesure scrollWidth > clientWidth, sans animation, garde
   prefers-reduced-motion sans objet ici car il n'y a aucun mouvement,
   seul un etat statique change). */
.mx-wrap{position:relative}
.mx-wrap.a-deborde::after{content:"";position:absolute;top:0;right:0;bottom:0;width:56px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--base) 92%)}

/* ── 9. Etats de survol/clavier communs a ce lot ─────────────────────── */
.entrees li a:focus-visible,.mx-carte .mc-action a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ── Revue design finale 05/09 (B1) : le lien du titre de carte metier heritait
   du bleu navigateur, aucune regle de couleur n'etant posee. Jumelle de la
   regle .bgrid h3 a de refonte-2026.css. */
.cards .card h3 a{color:var(--ivory);text-decoration:none;transition:color .22s}
.cards .card:hover h3 a,.cards .card h3 a:focus-visible{color:var(--gold)}

/* Finition 06/09 : rattacher les repères au titre et laisser les cartes
   prendre la hauteur de leur contenu (la cause était le stretch de grille). */
.sec-head:has(> .mono){flex-direction:column;align-items:flex-start;gap:16px}
.sec-head > .mono{order:-1;display:flex;align-items:center;gap:12px;color:var(--gold2)}
.sec-head > .mono::before{content:"";width:32px;height:1px;background:currentColor;flex:none}
.entrees,.proc5,.fiche-libre{align-items:start;gap:16px;border:0;border-radius:0;overflow:visible}
.entrees > article,.proc5 > .proc5-etape,.fiche-libre > div{min-height:0;border:1px solid var(--edge);border-radius:3px}
.entrees > article:last-child,.proc5 > .proc5-etape:last-child,.fiche-libre > div:last-child{border:1px solid var(--edge)}
@media(max-width:1200px){.entrees > article:last-child,.fiche-libre > div:nth-child(2){border:1px solid var(--edge)}}