/* =========================================================================
   v1-fin-3.css — FINITION haut de gamme (qui-sommes-nous / contact / faq)
   Chargé APRÈS v1-theme.css. Ne touche que le <main> de ces 3 pages :
   cadre photo « Yann » 16/9, panneau pétales horizontal, présentation claire
   (mission/valeurs/groupe/démarche), formulaire contact double entrée + RGPD,
   FAQ en accordéons aérés, homogénéité des marques (Spectrum/X, CECRL).
   Aucune animation en boucle ; interactions au survol uniquement ; AA.
   ========================================================================= */

/* ---- 1) Cadre photo « Yann » 16/9 (renfort du .v1-photoframe de v1-theme) --- */
.v1-photoframe{ line-height:0; isolation:isolate; }
.v1-photoframe > picture{ display:block; width:100%; }
.v1-photoframe img{ transition:transform .4s var(--ease,cubic-bezier(.4,0,.2,1)); }
.v1-photoframe:hover img{ transform:scale(1.03); }           /* survol sobre, non bouclé */
@media (prefers-reduced-motion:reduce){
  .v1-photoframe img{ transition:none; }
  .v1-photoframe:hover img{ transform:none; }
}
/* légende discrète optionnelle sous une photo encadrée */
.v1-photocap{ margin-top:12px; font-size:.86rem; color:var(--muted); line-height:1.45; text-align:center; }
.v1-photocap b{ color:var(--c-pole); font-weight:800; }

/* hero : le cadre photo remplace l'ancien aplat/logo, format paysage garanti */
.v1-hero .v1-photoframe{ border-radius:26px;
  box-shadow:0 24px 60px -22px color-mix(in srgb,var(--c-pole) 55%,transparent); }
.v1-hero .v1-photoframe img{ aspect-ratio:16/9; }

/* bande photo pleine largeur (démarche / rupture éditoriale) */
.v1-photoband{ margin:clamp(28px,4vw,44px) 0 0; }
.v1-photoband .v1-photoframe img{ aspect-ratio:16/9; }

/* ---- 2) Panneau pétales décoratif, HORIZONTAL et sobre --- */
.v1-petalpanel{ padding:clamp(28px,4vw,44px); color:#fff; overflow:hidden; }
.v1-petalpanel > *{ position:relative; z-index:1; }
.v1-petalpanel h2,.v1-petalpanel h3{ color:#fff; }
.v1-petalpanel p{ color:rgba(255,255,255,.92); }
.v1-petalpanel .v1-eyebrow{ color:rgba(255,255,255,.92); }
.v1-petalpanel .v1-eyebrow::before{ background:rgba(255,255,255,.85) !important; }
.v1-petalpanel .v1-devise{ color:#fff; }
/* variante par couleur explicite (panneau vert Academy à droite) */
.v1-petalpanel.is-green{ background:var(--c-green); }
.v1-petalpanel.is-navy{ background:var(--c-navy); }

/* liste d'entités / puces sur panneau coloré */
.v1-petalpanel .v1-panel-list{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:12px; }
.v1-petalpanel .v1-panel-list li{ position:relative; padding-left:26px; line-height:1.5;
  color:rgba(255,255,255,.94); }
.v1-petalpanel .v1-panel-list li::before{ content:""; position:absolute; left:0; top:.5em;
  width:12px; height:12px; border-radius:50%; background:rgba(255,255,255,.9); }
.v1-petalpanel .v1-panel-list li b{ color:#fff; }

/* ---- 3) Présentation claire : carte structurée + grille de stats --- */
.v1-clearcard{
  background:var(--paper,#fff); border:1px solid var(--line,#e6e9ef);
  border-left:5px solid var(--c-pole); border-radius:18px;
  padding:clamp(22px,3vw,32px); box-shadow:var(--sh-sm,0 6px 20px -14px rgba(9,66,104,.35));
}
.v1-clearcard > .v1-eyebrow{ color:var(--c-pole); }
.v1-clearcard h3{ margin:6px 0 10px; }
.v1-clearcard > p{ color:var(--muted); max-width:62ch; }

/* grille de stats — renfort du .v1-statgrid de v1-theme (mini-cartes colorées) */
.v1-statgrid{ margin-top:22px; }
.v1-statgrid > div{ transition:transform .2s var(--ease,ease), box-shadow .2s var(--ease,ease); }
.v1-statgrid > div:hover{ transform:translateY(-3px);
  box-shadow:0 16px 34px -20px color-mix(in srgb,var(--c-pole) 55%,transparent); }
@media (prefers-reduced-motion:reduce){
  .v1-statgrid > div{ transition:none; } .v1-statgrid > div:hover{ transform:none; }
}

/* ---- 4) Homogénéité marques --- */
/* suffixe programme « Spectrum » / « X » : hérite la couleur du bloc, plus de teinte fixe */
.pgm-suffix{ color:inherit; font-weight:800; white-space:nowrap; }
.v1-section--navy .pgm-suffix,.v1-petalpanel .pgm-suffix{ color:var(--c-yellow,#feeb58); }
/* abréviation CECRL : focus visible AA (le reste vient de v1.css) */
.v1-abbr:focus-visible{ outline:2px solid var(--c-pole); outline-offset:3px; border-radius:3px; }

/* ---- 5) Groupe NSX Ventures : panneau pétales horizontal (remplace aplat) --- */
/* le visuel de droite devient un vrai panneau à filigrane, façon capture Yann */
.v1-group-grid .v1-petalpanel{ align-self:stretch; display:flex; flex-direction:column;
  justify-content:center; min-height:100%; }
.v1-group-grid .v1-petalpanel .v1-devise{ margin-top:8px; display:block;
  font-family:var(--font-head); font-size:clamp(1.1rem,1.8vw,1.5rem); line-height:1.35; }
.v1-group-grid .v1-petalpanel .v1-panel-tag{ display:inline-block; margin-top:16px;
  font-size:.8rem; letter-spacing:.04em; text-transform:uppercase;
  color:rgba(255,255,255,.85); }

/* ---- 6) Contact : cadre photo dans le hero + panneau info accentué --- */
.v1-contact-hero-grid{ display:grid; grid-template-columns:1.1fr .9fr;
  gap:clamp(24px,4vw,48px); align-items:center; }
.v1-contact-hero-grid .v1-photoframe{ border-radius:24px;
  box-shadow:0 22px 55px -24px color-mix(in srgb,var(--c-pole) 55%,transparent); }
@media (max-width:860px){ .v1-contact-hero-grid{ grid-template-columns:1fr; }
  .v1-contact-hero-grid .v1-photoframe{ max-width:560px; margin-inline:auto; order:-1; } }

/* ---- 7) FAQ : accordéons aérés + repère de section --- */
.v1-faq details{ transition:box-shadow .2s var(--ease,ease); }
.v1-faq details[open]{ box-shadow:0 16px 34px -22px color-mix(in srgb,var(--c-pole) 45%,transparent); }
.v1-faq summary:focus-visible{ outline:2px solid var(--c-pole); outline-offset:2px; border-radius:10px; }
@media (prefers-reduced-motion:reduce){ .v1-faq details{ transition:none; } }

/* ---- 8) Dispositions fines mobile-first --- */
@media (max-width:720px){
  .v1-hero .v1-photoframe{ max-width:560px; margin-inline:auto; }
  .v1-clearcard{ padding:22px; }
}

/* ---- 9) Contact : aside coordonnées en panneau vert (lisibilité AA) --- */
.v1-contact-info.v1-petalpanel{ color:#fff; }
.v1-contact-info.v1-petalpanel h3{ color:#fff; }
.v1-contact-info.v1-petalpanel p{ color:#fff; }
.v1-contact-info.v1-petalpanel a{ color:#fff; text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px;
  text-decoration-color:rgba(255,255,255,.6); }
.v1-contact-info.v1-petalpanel a:hover{ text-decoration-color:#fff; }
.v1-contact-info.v1-petalpanel a:focus-visible{ outline:2px solid #fff; outline-offset:2px; border-radius:3px; }
.v1-contact-info.v1-petalpanel svg{ color:rgba(255,255,255,.9); }
.v1-contact-info.v1-petalpanel .v1-contact-legal{ color:rgba(255,255,255,.85); }

/* ============================================================
   QSN — héro pleine largeur (photo retirée) + fix débordement
   panneau « Deux pôles, une même exigence » + garde-fous responsive.
   Scopé (n'affecte pas les héros avec photo des autres pages).
   ============================================================ */
.v1-hero-grid--solo{ grid-template-columns:1fr; }
.v1-hero-grid--solo .copy{ max-width:none; }
/* Le panneau « Deux pôles » est un bloc TEXTE : l'aspect-ratio 4/3.2
   (prévu pour un panneau-image) forçait une largeur > cellule → débordement. */
.v1-group-visual.v1-petalpanel{ aspect-ratio:auto; display:block; align-items:flex-start; }
/* Garde-fous anti-débordement des grilles (min-width:0 sur enfants grid) */
.v1-hero-grid, .v1-hero-grid > *{ min-width:0; }
.v1-group-grid, .v1-group-grid > *{ min-width:0; }

/* ============================================================
   Responsive — quick wins globaux (audit projet, 2026-07-17)
   ============================================================ */
/* 1) Coupure des mots/URL longs (pages légales notamment) */
body{ overflow-wrap:break-word; }
.v1-legal-article a, .v1-legal-article code{ overflow-wrap:anywhere; }
/* 2) Garde-fou min-width:0 généralisé sur enfants de grille */
.v1-piliers>*, .v1-values>*, .v1-panel-grid>*, .v1-split>*,
.v1-levels>*, .v1-steps>*, .v1-grid4>*, .v1-footer-top>*,
.v1-contact-grid>*, .v1-form>*{ min-width:0; }
/* 3) H1 héros : autoriser le retour à la ligne du mot souligné */
.v1-hero h1 .ul{ white-space:normal; }

/* ============================================================
   RTL (arabe) — miroir des accents directionnels (audit projet)
   Additif : ne s'applique que sous [dir="rtl"]. LTR inchangé.
   (Tiroir mobile laissé à droite : animation à retravailler à part.)
   ============================================================ */
[dir="rtl"] .v1-values.four .v1-value{ border-left:0; border-right:4px solid var(--c-orange); }
[dir="rtl"] .v1-values.four .v1-value:nth-child(2){ border-right-color:var(--c-green); }
[dir="rtl"] .v1-values.four .v1-value:nth-child(3){ border-right-color:var(--c-blue); }
[dir="rtl"] .v1-values.four .v1-value:nth-child(4){ border-right-color:var(--c-yellow-d); }
[dir="rtl"] .v1-devise{ border-left:0; border-right:3px solid var(--c-yellow); padding-left:0; padding-right:14px; }
[dir="rtl"] .v1-step{ border-left:0; border-right:5px solid var(--ac,var(--c-navy)); }
[dir="rtl"] .v1-step.cta{ border-right-color:var(--c-orange); }
[dir="rtl"] .v1-step .idx{ right:auto; left:22px; }
[dir="rtl"] .v1-course-intro{ border-left:0; border-right:5px solid var(--pill,var(--c-green)); }
[dir="rtl"] .v1-acc .v1-level{ border-left:0; border-right:6px solid var(--lv,var(--c-orange)); }
[dir="rtl"] .v1-acc-head{ text-align:right; }
[dir="rtl"] .v1-featcard{ border-left:0; border-right:5px solid var(--ac,var(--c-green)); }
[dir="rtl"] .v1-legal-note{ border-left:0; border-right:4px solid var(--c-orange); }
[dir="rtl"] .v1-toc a{ border-left:0; border-right:2px solid transparent; }
[dir="rtl"] .v1-toc a:hover{ border-right-color:var(--c-orange); }
[dir="rtl"] .v1-clearcard{ border-left:0; border-right:5px solid var(--c-pole); }
[dir="rtl"] .v1-clearcard ul li{ padding-left:0; padding-right:30px; }
[dir="rtl"] .v1-clearcard ul li::before{ left:auto; right:0; }
[dir="rtl"] .v1-petalpanel .v1-panel-list li{ padding-left:0; padding-right:26px; }
[dir="rtl"] .v1-petalpanel .v1-panel-list li::before{ left:auto; right:0; }

/* Renfort : panneau « Deux pôles » = bloc texte (prime sur l'ancien aspect-ratio/flex) */
.v1-group-visual.v1-petalpanel{
  aspect-ratio:auto !important;
  display:block !important;
  min-height:0 !important;
  width:100%; max-width:100%;
  text-align:start;
}
.v1-group-visual.v1-petalpanel .v1-panel-list li{ white-space:normal; }

/* Panneau « Deux pôles » — texte de rééquilibrage (note + repères) */
.v1-group-visual .v1-panel-note{ margin:16px 0 0; font-weight:500; font-size:1rem; line-height:1.55; color:rgba(255,255,255,.9); }
.v1-group-visual .v1-panel-stats{ margin:14px 0 0; font-weight:600; letter-spacing:.02em; color:#fff; }
.v1-group-visual .v1-panel-stats b{ color:var(--c-yellow); font-weight:800; }

/* Panneau groupe — contenu étoffé (intro, chiffres, clôture) + alignement haut */
#groupe .v1-group-grid{ align-items:stretch; }
.v1-group-visual .v1-panel-intro{ margin:14px 0 0; font-weight:500; font-size:1.02rem; line-height:1.55; color:rgba(255,255,255,.92); }
.v1-group-visual .v1-panel-note{ margin:18px 0 0; font-weight:500; font-size:1rem; line-height:1.55; color:rgba(255,255,255,.82); }
.v1-group-visual .v1-panel-figs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin:24px 0 0; }
/* Fix audit responsive 2026-07-22 : minmax(0,1fr) au lieu de "auto" pour éviter
   un rognage silencieux du 3e chiffre sur téléphone étroit (<360px), le parent
   .v1-petalpanel étant en overflow:hidden. */
@media (max-width:480px){ .v1-group-visual .v1-panel-figs{ grid-template-columns:1fr; } }
.v1-group-visual .v1-panel-figs > div{ display:flex; flex-direction:column; }
.v1-group-visual .v1-panel-figs b{ font-size:2.1rem; line-height:1; color:var(--c-yellow); font-weight:800; }
.v1-group-visual .v1-panel-figs span{ font-size:.9rem; font-weight:500; color:rgba(255,255,255,.85); margin-top:5px; }
.v1-group-visual .v1-panel-close{ margin:24px 0 0; font-weight:600; font-size:1.04rem; line-height:1.5; color:#fff; }

/* Panneau groupe : occuper toute la hauteur (aligné bas de la colonne gauche) */
.v1-group-visual.v1-petalpanel{ display:flex !important; flex-direction:column; justify-content:space-between; gap:6px; }

/* Panneau groupe — ligne actualité (Algérie) */
.v1-group-visual .v1-panel-news{ margin:18px 0 0; padding:12px 14px; border-radius:12px; background:rgba(254,235,88,.12); border-inline-start:3px solid var(--c-yellow); color:#fff; font-weight:600; font-size:.98rem; line-height:1.45; }