/* ==========================================================================
   CATALOGUE DES CLASSES (socle v4)
   Les pages sont codées sans modifier ce fichier. Chaque composant indique
   sa structure HTML attendue. Les variantes sont notées avec « ou ».
   ========================================================================== */
/*
   EN-TETE (toutes pages, collant, floute)
   <header class="entete"><div class="wrap entete-interne">
     <a class="marque" href="index.html"><img src="assets/img/lockup-horizontal-nuit.svg" alt="Isaïa Ebongue" width="192" height="36"><span class="descripteur visually-hidden">TECH&nbsp;· DATA&nbsp;· IA</span></a>
     <nav class="menu-bureau" aria-label="Principal"><ul class="liste-nue">
       <li><a href="index.html#formations">Formations</a></li>
       <li><a href="quelle-ia-choisir.html">Quelle IA choisir</a></li>   (aria-current="page" sur le lien de la page courante)
       <li><a href="a-propos.html">À propos</a></li>
       <li><a href="ressources.html">Ressources</a></li>
     </ul></nav>
     <div class="entete-actions">
       <a class="btn btn-principal btn-compact" href="index.html#reserver">Réserver</a>
       <details class="menu-mobile"><summary aria-label="Menu"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">…3 traits…</svg></summary>
         <nav aria-label="Principal mobile"><ul class="liste-nue">…mêmes liens…</ul></nav>
       </details>
     </div>
   </div></header>
   Le menu mobile (details) se ferme au clic sur un lien (main.js). Breakpoint : 900px.

   FIL D'ARIANE (toutes sauf l'accueil)
   <nav class="fil-ariane" aria-label="Fil d'Ariane"><ol><li><a href="index.html">Accueil</a></li><li>Page</li></ol></nav>

   PAGE GENERIQUE
   <main> <section> <div class="wrap"> … </div> </section> </main>
   section : padding vertical. Classe .alt ou .bande : fond alterne.
   .surtitre (petit titre accent au-dessus d'un h2), .description (texte secondaire),
   .centre (conteneur centre, bouton seul), .relief (<em class="relief">, Lora italic accent),
   .todo (marque a completer : <span class="todo">[À COMPLÉTER&nbsp;: …]</span>),
   .lien (lien avec fleche : <a class="lien" href="…">Texte<span class="fleche" aria-hidden="true">→</span></a>),
   .lien-discret (lien discret sous un bouton), .pilule (pastille contour),
   .slogan (<p class="slogan">Comprendre pour mieux s'en servir.</p>), .chapeau (paragraphe d'introduction),
   .visually-hidden (texte ou champ cache visuellement, lisible par les lecteurs d'ecran).

   BOUTONS
   <a class="btn btn-principal" href="…">Texte<span class="fleche" aria-hidden="true">→</span></a>
   <a class="btn btn-secondaire" href="…">Texte</a>   (ou .btn-compact en complement, dans l'en-tete)

   ACCROCHE (accueil) : <section id="accroche" class="accroche" data-barre-depart>
   <div class="wrap split"> <div class="split-texte"> <p class="pilule">…</p> <h1>…</h1> <p class="slogan">…</p>
   <p class="sous-titre">…</p> <div class="actions">boutons</div> <p class="preuve"><svg class="icone-lecture">…</svg><a>…</a></p>
   </div> <div class="split-visuel"> <figure class="photo-cadre">…</figure> </div> </div></section>
   (.accroche : padding de section plus grand ; photo limitee en largeur sur mobile)

   PHOTO
   <figure class="photo-cadre"><span class="photo-monogramme" aria-hidden="true">iE</span><span class="todo">[À COMPLÉTER&nbsp;: …]</span></figure>
   Variantes : .photo-cadre--large (ratio 3/2 situation) ; .photo-cadre--rond (48px, auteur, sans étiquette).
   Remplacement futur : <figure class="photo-cadre"><img src="…" alt="…" width="…" height="…"></figure> (l'img couvre le cadre).
   Duotone : ajouter .photo-duotone sur le .photo-cadre qui contient l'img.

   VIDEO (jamais d'iframe)
   <article class="video-carte"><div class="video-vignette" aria-hidden="true"><svg class="video-play" viewBox="0 0 24 24" focusable="false">…</svg></div>
     <h3 class="titre-lien"><span class="todo">[À COMPLÉTER&nbsp;: titre de la vidéo 1]</span></h3>
     <a class="lien" href="#" data-todo="lien vidéo 1">Voir la vidéo<span class="fleche" aria-hidden="true">→</span></a></article>
   Dans une <div class="grille grille-3"> (3 colonnes ≥900px).

   BANDE (pleine largeur, fond alterne) : <section class="bande" id="…"><div class="wrap">
     <div class="bande-entete"><h2 class="bande-titre">…</h2><a class="lien" href="…">Voir la chaîne<span class="fleche" aria-hidden="true">→</span></a></div>
     … contenu sur une ligne ou plus …</div></section>

   SPLIT (texte puis visuel ; 2 colonnes ≥900px)
   <div class="split"><div class="split-texte">…</div><div class="split-visuel">…</div></div>
   Inverse (visuel a gauche sur ≥900px) : <div class="split split--inverse">…même ordre DOM…</div>

   CARTES
   <article class="carte"><svg class="icone" …></svg><h3>…</h3><p class="description">…</p></article>
   .grille.grille-3 : grille de cartes (offres et videos seulement).
   .lien-carte (carte cliquable) : <a class="lien-carte" href="…"><h3>…</h3><p class="lien-carte-texte">…</p></a>
   Variante .lien-carte--vedette (bordure accent). Conteneur : .liens-croises (2 colonnes ≥720px).

   LISTES SANS CARTE
   .liste-icones : <ul class="liste-nue liste-icones"><li><svg class="icone">…</svg><p>…</p></li>…</ul>
   .coches : <ul class="coches liste-nue"><li><strong>Titre</strong><span class="coche-detail">…</span></li></ul>
   .coches-oui (coche) ou .coches-non (croix) : <ul class="liste-nue coches-oui"><li>…</li></ul>
   .trio (3 elements compacts, sans carte) : <div class="trio"><div class="trio-item"><svg class="icone">…</svg><h3>…</h3><p class="description">…</p></div>…</div>
   .citation : <blockquote class="citation"><p>«&nbsp;…&nbsp;»</p></blockquote>
   .texte-corps : conteneur de paragraphes (gap, texte secondaire).

   FRISES
   Accueil : <ol class="frise"><li class="etape"><span class="numero" aria-hidden="true">1</span><div><h3>…</h3><p class="description">…</p></div></li></ol>
   Formation : <ol class="frise-verticale liste-nue"><li><span class="numero" aria-hidden="true">0</span><h3>…</h3></li></ol>

   OFFRE ACCUEIL (bandeau d'entree) : <article id="quelle-ia" class="carte carte-vedette offre-anim"><div><p class="pilule">…</p><h3>…</h3><p class="description">…</p><ul class="coches liste-nue">…</ul></div>
     <div class="bloc-prix"><p class="gros-prix">90&nbsp;€</p><p class="sous-prix">…</p><a class="btn btn-principal" href="…">…</a><a class="lien-discret" href="…">En savoir plus →</a></div></article>
   .offre-anim : bordure conique animee (repli : bordure accent). .petit-ligne : petite ligne sous le bouton.

   CARTES FORMATION (accueil) : <div class="grille-formations"><div class="formation-col"><article class="carte formation">
     <span class="pastille-info">…</span> ou <span class="pastille-pleine">…</span> ou <span class="badge">…</span>
     <p class="surtitre">Formation 1</p><h3 class="titre-lien"><a href="formation-ia-debutant.html">…</a></h3>
     <p class="promesse">…</p><dl class="formation-details"><div><dt>Pour qui</dt><dd>…</dd></div>…</dl>
     <p class="prix formation-prix"><strong>149&nbsp;€ <span class="petit-prix">par personne</span></strong><span class="prix-note">…</span></p>
     <a class="btn btn-principal" href="…">…</a></article></div></div>
   Variantes : .formation-vedette (decalee), .formule-attenuee (bordure pointillee).
   .option : texte sous une carte (ligne pointillee). .notes : mentions sous les cartes.

   GABARIT FORMATION (4 pages)  <main><section><div class="wrap page-formation">
     <header class="page-entete" data-barre-depart><p class="pilule">Formation 1</p><h1>…</h1><p class="promesse">…</p>
       <p class="page-pour-qui"><strong>Pour qui&nbsp;:</strong> …</p></header>
     <aside class="aside-offre" aria-label="Offre">
       <p class="gros-prix">149&nbsp;€</p><p class="sous-prix">…</p>
       <dl class="formation-details"><div><dt>Format</dt><dd>…</dd></div><div><dt>Inclus</dt><dd>…</dd></div></dl>
       <a class="btn btn-principal" href="…">…</a><a class="lien" href="index.html#reserver">Réserver ma séance d'abord<span class="fleche" aria-hidden="true">→</span></a>
     </aside>
     <div class="formation-principale">
       <section class="section-formation"><h2>…</h2>…</section>  (sections a à e)
       <section class="section-formation"><h2>Questions fréquentes</h2><div class="faq">…</div></section>
       <div class="appel-final"><h2>…</h2><p class="description">…</p><a class="btn btn-principal" href="…">…</a></div>
       <div class="liens-croises">…</div>
     </div></div></section></main>
   Mobile : aside-offre apres l'en-tete (ordre DOM). ≥1024px : aside sticky a droite (top 110px).
   .frise-verticale : liste numerotee verticale (voir FRISES). .trio : ce que tu recois.

   ARTICLE (quelle-ia-choisir) : <main><section><div class="wrap page-article">
     <header class="article-entete"><h1>…</h1><p class="chapeau">…</p>
       <p class="article-auteur"><span class="photo-cadre photo-cadre--rond"><span class="photo-monogramme" aria-hidden="true">iE</span></span><span>Par Isaïa Ebongue, formateur IA</span><span class="todo">[À COMPLÉTER&nbsp;: …]</span></p></header>
     <nav class="sommaire" aria-label="Sommaire"><p class="sommaire-titre">Sommaire</p><ol><li><a href="#id">…</a></li></ol></nav>
     <div class="article-corps"><h2 id="id">…</h2><p>…</p>…</div>
   </div></section></main>
   ≥1100px : sommaire sticky a gauche (220px) ; colonne de lecture 42rem.
   Tableau : <div class="tableau-wrap" tabindex="0"><table class="tableau"><thead><tr><th>…</th></tr></thead><tbody>…</tbody></table></div>

   FORMULAIRE (ressource, alerte formation)
   <form class="formulaire" method="post" action="#" data-todo="URL du webhook n8n">
     <div class="champ"><label for="prenom">Ton prénom</label><input id="prenom" name="prenom" type="text" autocomplete="given-name"></div>
     <div class="champ"><label for="email">Ton e-mail</label><input id="email" name="email" type="email" required autocomplete="email"></div>
     <div class="visually-hidden" aria-hidden="true"><input name="site_web" tabindex="-1" autocomplete="off"></div>
     <div class="case"><input id="accord" type="checkbox" required><label for="accord">J'accepte …</label><span class="todo">[À COMPLÉTER&nbsp;: …]</span></div>
     <button class="btn btn-principal" type="submit">Recevoir le guide</button>
   </form>
   Focus : contour accent. Champ invalide (apres interaction) : bordure rose (:user-invalid).

   BLOC RESSOURCE (accueil, ressources) : <section id="ressource" class="bande"><div class="wrap"><div class="split split--inverse">
     <div class="split-visuel"><div class="couverture-pdf" aria-hidden="true"><span class="couverture-titre">Extrait du book d'astuces</span><span class="couverture-monogramme">iE</span></div></div>
     <div class="split-texte"><p class="pilule">Gratuit</p><h2>…</h2><p class="description">…</p><ul class="coches liste-nue">…</ul>
       <p><span class="todo">[À COMPLÉTER&nbsp;: …]</span></p> <form class="formulaire">…</form></div></div></div></section>

   FAQ : <div class="faq"><details><summary>Question ?</summary><p>Réponse.</p></details></div>

   RESERVER : <section id="reserver"><div class="wrap"><div class="carte-reserver"><h2>…</h2><p class="description">…</p>
     <div class="reservations"><div class="reservation"><a class="btn btn-principal" href="#">…</a><span class="todo">…</span></div></div>
     <p class="petit-ligne">…</p></div></div></section>
   .appel-final : bloc d'appel a l'action en fin de page formation (structure : h2, p, bouton).

   PAGE MERCI : <main class="page-merci"><div class="wrap"><h1>…</h1><p>…</p><a class="btn btn-principal" href="…">…</a></div></main>

   PIED (toutes pages)
   <footer class="pied"><div class="wrap pied-grille">
     <div class="pied-marque"><img src="assets/img/lockup-horizontal-nuit.svg" alt="Isaïa Ebongue" width="192" height="36"><p class="slogan">Comprendre pour mieux s'en servir.</p><p>Formations IA en visio, en individuel ou en petit groupe.</p></div>
     <nav class="pied-col" aria-labelledby="pied-formations"><p class="pied-titre" id="pied-formations">Formations</p><ul>…</ul></nav>
     <nav class="pied-col" aria-labelledby="pied-isaia"><p class="pied-titre" id="pied-isaia">Isaïa</p><ul>…</ul></nav>
     <div class="pied-bas"><p class="petit">© Isaïa Ebongue</p><p class="petit">Formations indépendantes, sans lien avec les éditeurs des outils cités.</p></div>
   </div></footer>

   BARRE COLLANTE MOBILE (<720px, apres la zone d'entree)
   <aside class="barre-collante" aria-label="Réservation rapide"><span>Quelle IA pour toi&nbsp;? · 90&nbsp;€</span><a class="btn btn-principal" href="…">Réserver</a></aside>
   Elle apparait quand l'element [data-barre-depart] sort de l'ecran (main.js).

   PAGES JURIDIQUES : <main class="wrap page-mentions"><section class="bloc-mention"><h2>…</h2><div class="grille-texte">…</div></section></main>
     <p class="avertissement">…</p> en tete de page si besoin.

   COMPOSANTS D'ACCUEIL (section 3) : .split-texte, .liste-icones, .coches, .demo (fenetre de discussion animee, role img).
   ========================================================================== */

/* ==========================================================================
   Polices locales
   ========================================================================== */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var-opsz.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lora";
  src: url("../fonts/lora-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Angle animable pour la bordure conique des offres mises en avant */
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* ==========================================================================
   Tokens (charte Nuit emeraude)
   ========================================================================== */
:root {
  --fond: #020e09;
  --fond-alt: #071d13;
  --carte: rgba(13, 44, 30, 0.8);
  --carte-2: rgba(10, 36, 24, 0.8);
  --halo: #0c4e32;
  --filet: #1f8a5b;
  --filet-doux: rgba(31, 138, 91, 0.55);
  --accent: #34d399;
  --texte: #f2eee4;
  --texte-2: #afc3b6;
  --rayon: 20px;
  --rayon-photo: 28px;
  --gouttiere: 20px;
  --ombre-survol: 0 24px 60px -24px rgba(52, 211, 153, 0.35);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: dark;
}

/* ==========================================================================
   Base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: break-word;
  overflow-x: clip;
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  max-width: 100%;
}

img {
  height: auto;
  display: block;
}

a {
  color: var(--accent);
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

p {
  margin: 0;
}

h1,
h2,
h3 {
  margin: 0;
  text-wrap: balance;
  color: var(--texte);
}

h1,
h2,
.prix strong,
.gros-prix {
  font-variation-settings: "opsz" 32;
}

h1 {
  font-size: clamp(2.25rem, 1.2rem + 4vw, 3.75rem);
  line-height: 1.08;
  font-weight: 300;
  letter-spacing: -0.025em;
}

h2 {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  line-height: 1.15;
  font-weight: 300;
  letter-spacing: -0.02em;
  margin-bottom: 32px;
}

h3 {
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* Titre cliquable (h3 qui renvoie vers une page) */
.titre-lien a {
  color: var(--texte);
  text-decoration: none;
}

@media (hover: hover) {
  .titre-lien a:hover {
    color: var(--accent);
  }
}

/* Mot ou groupe de mots mis en relief : Lora Italic, accent */
.relief {
  font-family: "Lora", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

.slogan {
  font-family: "Lora", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.35;
  color: var(--accent);
}

.wrap {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

section {
  padding-block: 56px;
}

@media (min-width: 720px) {
  section {
    padding-block: 88px;
  }
}

.alt,
.bande {
  background: transparent;
}

.liste-nue {
  list-style: none;
  margin: 0;
  padding: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.surtitre {
  margin-bottom: 12px;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.description {
  color: var(--texte-2);
}

.centre {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

.lien {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.lien-discret {
  display: inline-block;
  color: var(--texte-2);
  font-size: 0.9rem;
}

.chapeau {
  max-width: 42rem;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
  color: var(--texte-2);
}

/* ==========================================================================
   Halo unique, en haut de page (derriere l'entete et l'accroche)
   ========================================================================== */
.haut {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
}

/* Halo retire : l'utilisateur ne veut que le reseau anime en fond, rien d'autre */

/* ==========================================================================
   En-tete collant et menu
   ========================================================================== */
.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(2, 14, 9, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(31, 138, 91, 0.35);
}

.entete-interne {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 14px;
}

@media (min-width: 720px) {
  .entete-interne {
    gap: 16px;
    padding-block: 20px;
  }
}

.marque {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 0 auto;
  gap: 6px;
  text-decoration: none;
  color: var(--texte);
}

.marque img {
  height: 28px;
  width: auto;
  max-width: none;
}

@media (max-width: 379.98px) {
  .marque img {
    height: 24px;
  }
}

@media (min-width: 720px) {
  .marque img {
    height: 38px;
  }
}

.descripteur {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-2);
}

.entete-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

/* Menu desktop (≥ 900px) */
.menu-bureau ul {
  display: flex;
  align-items: center;
  gap: 22px;
}

.menu-bureau a {
  color: var(--texte-2);
  font-size: 0.9rem;
  text-decoration: none;
}

.menu-bureau a[aria-current="page"] {
  color: var(--accent);
}

@media (hover: hover) {
  .menu-bureau a:hover {
    color: var(--accent);
  }
}

@media (max-width: 1179.98px) {
  .menu-bureau {
    display: none;
  }
}

@media (min-width: 1180px) {
  .menu-mobile {
    display: none;
  }
}

/* Menu mobile (< 900px) : details, fonctionne sans JavaScript */
.menu-mobile {
  position: static;
}

.menu-mobile summary {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--filet-doux);
  border-radius: 999px;
  color: var(--texte);
  cursor: pointer;
  list-style: none;
}

.menu-mobile summary::-webkit-details-marker {
  display: none;
}

.menu-mobile summary svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.menu-mobile:not([open]) > nav {
  display: none;
}

.menu-mobile[open] > nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 8px var(--gouttiere) 20px;
  background: var(--fond);
  border-bottom: 1px solid rgba(31, 138, 91, 0.35);
}

.menu-mobile ul {
  display: grid;
  gap: 4px;
}

.menu-mobile a {
  display: block;
  padding: 12px 8px;
  border-radius: 12px;
  color: var(--texte);
  font-size: 1.05rem;
  text-decoration: none;
}

.menu-mobile a[aria-current="page"] {
  color: var(--accent);
}

/* ==========================================================================
   Fil d'Ariane (toutes pages sauf l'accueil)
   ========================================================================== */
.fil-ariane {
  padding-top: 24px;
  font-size: 0.85rem;
  color: var(--texte-2);
}

.fil-ariane ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fil-ariane li + li::before {
  content: "›";
  margin-right: 6px;
  color: var(--filet);
}

.fil-ariane a {
  color: var(--texte-2);
}

/* ==========================================================================
   Boutons : pilule accent (principal) et pilule contour (secondaire)
   ========================================================================== */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  max-width: 100%;
  padding: 10px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.btn-principal {
  background: var(--accent);
  color: var(--fond);
}

.btn-principal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.7s var(--ease);
  pointer-events: none;
}

.btn-secondaire {
  background: transparent;
  border-color: var(--filet);
  color: var(--texte);
}

.btn-compact {
  min-height: 40px;
  padding: 8px 16px;
  font-size: 0.85rem;
}

@media (min-width: 720px) {
  .btn-compact {
    min-height: 44px;
    padding: 10px 22px;
    font-size: 0.95rem;
  }
}

.fleche {
  display: inline-block;
  transition: transform 0.25s var(--ease);
}

@media (hover: hover) {
  .btn-principal:hover::before {
    transform: translateX(100%);
  }

  .btn:hover .fleche,
  .lien:hover .fleche {
    transform: translateX(4px);
  }

  .btn-secondaire:hover {
    border-color: var(--accent);
    color: var(--accent);
  }
}

/* ==========================================================================
   Accroche (accueil) : texte + photo en split
   ========================================================================== */
.split {
  display: grid;
  gap: 40px;
  align-items: center;
}

.split-texte,
.split-visuel {
  min-width: 0;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
  }

  .split--inverse .split-visuel {
    grid-column: 1;
    grid-row: 1;
  }

  .split--inverse .split-texte {
    grid-column: 2;
    grid-row: 1;
  }
}

/* Split avec demonstration collante (texte a gauche, visuel sticky a droite) */
@media (min-width: 900px) {
  .split--collant {
    align-items: stretch;
  }

  .split--collant .split-visuel {
    display: block;
  }

  .split--collant .demo {
    position: sticky;
    top: 110px;
  }
}

.texte-corps > h2 {
  margin-bottom: 0;
}

.sous-bloc {
  margin-top: 12px;
  font-size: 1.1rem;
  color: var(--texte);
}

.accroche {
  padding-block: 56px 72px;
}

@media (min-width: 720px) {
  .accroche {
    padding-block: 104px 128px;
  }
}

.pilule {
  display: inline-block;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 24px;
  padding: 6px 14px;
  border: 1px solid var(--filet-doux);
  border-radius: 999px;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 500;
}

.accroche h1 {
  margin-bottom: 24px;
}

.sous-titre {
  max-width: 36rem;
  margin-top: 20px;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
  color: var(--texte-2);
}

.accroche .slogan {
  margin-top: 16px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.preuve {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  font-size: 0.95rem;
  color: var(--texte-2);
}

.preuve a {
  color: var(--texte);
  text-decoration: none;
  border-bottom: 1px solid var(--filet);
}

.icone-lecture {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--accent);
}

.accroche .split-visuel .photo-cadre {
  max-width: 300px;
  margin-inline: auto;
}

@media (min-width: 900px) {
  .accroche .split-visuel .photo-cadre {
    max-width: none;
  }
}

.accroche-texte {
  max-width: 720px;
}

@media (min-width: 900px) {
  .carte-visite {
    width: 140px;
    top: 8px;
  }
}

/* Demonstration animee : fenetre de discussion (aucune image) */
.demo {
  width: 100%;
  max-width: 440px;
  justify-self: center;
  overflow: hidden;
  border: 1px solid var(--filet-doux);
  border-radius: var(--rayon);
  background: var(--carte);
}

.demo-fenetre {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(31, 138, 91, 0.3);
}

.demo-fenetre span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3d5a4c;
}

.demo-corps {
  display: grid;
  gap: 12px;
  padding: 20px;
}

/* Mini-parcours (3 seances) : timeline verticale compacte dans la fenetre demo */
.demo-parcours-corps {
  padding: 28px 24px;
}

.mini-parcours {
  position: relative;
  display: grid;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mini-parcours::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 17px;
  width: 2px;
  background-image: repeating-linear-gradient(180deg, var(--accent) 0 6px, transparent 6px 12px);
  background-size: 2px 24px;
  animation: ecoulement-pipeline-v 1.4s linear infinite;
  opacity: 0.6;
}

@keyframes ecoulement-pipeline-v {
  to { background-position: 0 24px; }
}

.mini-parcours-etape {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  align-items: start;
}

.mini-parcours-num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: var(--fond);
  color: var(--accent);
  font-weight: 600;
}

.mini-parcours-etape:last-child .mini-parcours-num {
  background: var(--accent);
  color: var(--fond);
}

.mini-parcours-etape h4 {
  margin: 4px 0 4px;
  font-size: 1.05rem;
}

.mini-parcours-etape p {
  margin: 0;
  color: var(--texte-2);
  font-size: 0.92rem;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .mini-parcours::before {
    animation: none;
  }
}

.bulle {
  position: relative;
  max-width: 85%;
  margin: 0;
  padding: 10px 16px;
  border-radius: 20px;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--texte);
}

.bulle-toi {
  justify-self: end;
  background: rgba(52, 211, 153, 0.12);
  border-bottom-right-radius: 6px;
}

.bulle-ia {
  justify-self: start;
  background: rgba(2, 14, 9, 0.5);
  border: 1px solid rgba(31, 138, 91, 0.45);
  border-bottom-left-radius: 6px;
}

/* Etat final (aussi affiche sans animation) : barree et estompee */
.bulle-invente {
  opacity: 0.45;
  text-decoration: line-through;
  text-decoration-color: #fca5a5;
  text-decoration-thickness: 2px;
}

.separateur {
  justify-self: center;
  margin: 4px 0;
  color: var(--texte-2);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.pastille {
  justify-self: start;
  margin-top: -4px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
}

.pastille-invente {
  background: rgba(248, 113, 113, 0.12);
  color: #fca5a5;
}

.pastille-verifiable {
  background: var(--accent);
  color: var(--fond);
}

.saisie,
.bulle-invente {
  grid-row: 2;
  grid-column: 1;
}

.saisie {
  display: none;
  align-self: start;
  justify-self: start;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  border: 1px solid rgba(31, 138, 91, 0.45);
  border-radius: 999px;
  background: rgba(2, 14, 9, 0.5);
}

.saisie span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--texte-2);
}

/* ==========================================================================
   Photos : cadre, variantes, duotone, marque a completer
   ========================================================================== */
.photo-cadre {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin: 0;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--filet-doux);
  border-radius: var(--rayon-photo);
  background: var(--carte);
}

.photo-cadre--large {
  aspect-ratio: 3 / 2;
}

.photo-cadre--rond {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  aspect-ratio: auto;
  border-radius: 50%;
}

.photo-cadre img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.photo-monogramme {
  font-family: "Lora", Georgia, serif;
  font-style: italic;
  font-size: clamp(3.5rem, 2.6rem + 4vw, 6rem);
  line-height: 1;
  color: var(--accent);
  opacity: 0.35;
  user-select: none;
}

.photo-cadre--rond .photo-monogramme {
  font-size: 1rem;
}

.photo-cadre .todo {
  position: absolute;
  left: 50%;
  bottom: 12px;
  translate: -50% 0;
  width: max-content;
  max-width: calc(100% - 24px);
  text-align: center;
  background: rgba(2, 14, 9, 0.85);
  z-index: 1;
}

/* Duotone : a placer sur le .photo-cadre qui contient l'img */
.photo-duotone {
  isolation: isolate;
}

.photo-duotone img {
  filter: grayscale(1) contrast(1.05);
}

.photo-duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #34d399;
  mix-blend-mode: color;
  opacity: 0.25;
  pointer-events: none;
}

/* ==========================================================================
   Videos (vignettes, jamais d'iframe)
   ========================================================================== */
.video-carte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--filet-doux);
  border-radius: var(--rayon);
  background: var(--carte);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.video-carte h3 {
  font-size: 1.05rem;
}

.video-vignette {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(31, 138, 91, 0.35);
  background: var(--carte);
  background-size: cover;
  background-position: center;
  color: var(--accent);
  transition: transform 0.4s ease;
}

.video-vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 14, 9, 0.05) 0%, rgba(2, 14, 9, 0.55) 100%);
  transition: opacity 0.3s ease;
}

.video-vignette .video-play {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45));
}

@media (hover: hover) {
  .video-carte:hover .video-vignette {
    transform: scale(1.04);
  }
}

.video-play {
  width: 56px;
  height: 56px;
}

.video-carte .lien {
  font-size: 0.95rem;
}

@media (hover: hover) {
  .video-carte:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: var(--ombre-survol);
  }
}

/* ==========================================================================
   Bandes (pleine largeur, fond alterne)
   ========================================================================== */
.bande-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 32px;
}

.bande-titre {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  margin-bottom: 0;
}

.bande-note {
  max-width: 40rem;
  margin-top: 32px;
  color: var(--texte-2);
}

/* ==========================================================================
   Cartes (survol uniquement sur les ecrans qui survolent)
   ========================================================================== */
.carte {
  position: relative;
  background: var(--carte);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--filet-doux);
  border-radius: var(--rayon);
  padding: 24px;
  transition: opacity 0.7s var(--ease), translate 0.7s var(--ease), transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.icone {
  display: block;
  width: 24px;
  height: 24px;
  margin-bottom: 16px;
  color: var(--accent);
}

.grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

@media (min-width: 720px) {
  .grille {
    gap: 20px;
  }
}

@media (min-width: 900px) {
  .grille-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Carte cliquable (liens croises, article a lire) */
.liens-croises {
  display: grid;
  gap: 16px;
}

@media (min-width: 720px) {
  .liens-croises {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

.lien-carte {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 24px;
  border: 1px solid var(--filet-doux);
  border-radius: var(--rayon);
  background: var(--carte);
  color: var(--texte);
  text-decoration: none;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.lien-carte h3 {
  font-size: 1.1rem;
}

.lien-carte-texte {
  font-size: 0.95rem;
  color: var(--texte-2);
}

.lien-carte--vedette {
  border-color: var(--accent);
}

@media (hover: hover) {
  .lien-carte:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: var(--ombre-survol);
  }
}

/* Carte mise en avant : bordure conique qui tourne (repli : bordure accent fixe) */
.offre-anim {
  border: 1px solid var(--accent);
}

@supports (background: conic-gradient(red, red)) {
  .offre-anim {
    border-color: transparent;
    background:
      var(--carte) padding-box,
      conic-gradient(from var(--angle, 0deg), var(--filet), var(--accent), var(--halo), var(--accent), var(--filet)) border-box;
  }
}

@media (hover: hover) {
  .carte:hover {
    transform: translateY(-4px);
    box-shadow: var(--ombre-survol);
  }

  .carte:not(.offre-anim):hover {
    border-color: var(--accent);
  }
}

/* ==========================================================================
   Listes sans carte : icones, coches, trio, deux colonnes, citation
   ========================================================================== */
.liste-icones li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding-block: 16px;
  border-top: 1px solid var(--filet-doux);
}

.liste-icones li:first-child {
  border-top: 0;
  padding-top: 0;
}

.liste-icones .icone {
  margin: 3px 0 0;
}

.liste-icones p {
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.45;
}

.coches-oui li,
.coches-non li,
.coches li {
  position: relative;
  padding-left: 30px;
  font-size: 1.05rem;
}

.coches-oui li + li,
.coches-non li + li,
.coches li + li {
  margin-top: 14px;
}

.coches-oui li::before,
.coches li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 600;
}

.coches-non li::before {
  content: "\00d7";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--texte-2);
  font-size: 1.2rem;
  line-height: 1.2;
}

.coches-non {
  color: var(--texte-2);
}

.coche-detail {
  display: block;
  margin-top: 2px;
  font-size: 0.95rem;
  color: var(--texte-2);
}

.trio {
  display: grid;
  gap: 28px;
  margin-top: 56px;
}

@media (min-width: 720px) {
  .trio {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }

  .trio:has(> :nth-child(4)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.trio-item {
  padding-top: 20px;
  border-top: 1px solid var(--filet-doux);
}

.trio-item .icone {
  margin-bottom: 12px;
}

.trio-item h3 {
  margin-bottom: 6px;
  font-size: 1.05rem;
}

.trio-item .description {
  font-size: 0.95rem;
}

.texte-corps {
  display: grid;
  gap: 20px;
  color: var(--texte-2);
}

.citation {
  margin: 0;
  padding-left: 20px;
  border-left: 2px solid var(--filet);
  font-family: "Lora", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  line-height: 1.25;
  color: var(--texte);
}

/* ==========================================================================
   Frises : accueil (horizontale) et formation (verticale)
   ========================================================================== */
.frise {
  position: relative;
  display: grid;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.frise::before {
  content: "";
  position: absolute;
  top: 28px;
  bottom: 28px;
  left: 27px;
  width: 1px;
  background: var(--filet);
}

.etape {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.numero {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--carte);
  color: var(--accent);
  font-size: 1.1rem;
  font-weight: 500;
}

.etape h3 {
  margin-bottom: 6px;
}

@media (min-width: 720px) {
  .frise {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  .frise::before {
    top: 28px;
    bottom: auto;
    left: calc(100% / 6);
    right: calc(100% / 6);
    width: auto;
    height: 1px;
  }

  .etape {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }
}

.frise-verticale {
  position: relative;
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.frise-verticale::before {
  content: "";
  position: absolute;
  top: 28px;
  bottom: 28px;
  left: 27px;
  width: 1px;
  background: var(--filet);
}

.frise-verticale li {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.frise-verticale h3 {
  font-size: 1.05rem;
  font-weight: 500;
}

/* ==========================================================================
   Offres : bandeau d'entree, cartes formation, aside
   ========================================================================== */
.carte-vedette {
  display: grid;
  gap: 28px;
  padding: 32px;
}

.carte-vedette h3 {
  margin-bottom: 12px;
  font-size: 1.4rem;
}

.carte-vedette .coches {
  margin-top: 20px;
}

.bloc-prix {
  display: grid;
  gap: 16px;
  justify-items: start;
  align-content: start;
}

.gros-prix {
  font-size: clamp(3.25rem, 2.4rem + 3vw, 4.75rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--texte);
}

.sous-prix {
  color: var(--texte-2);
}

.petit-ligne {
  color: var(--texte-2);
  font-size: 0.85rem;
}

@media (min-width: 720px) {
  .carte-vedette {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: center;
    gap: 48px;
    padding: 44px;
  }
}

.grille-formations {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

@media (min-width: 720px) {
  .grille-formations {
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  .grille-formations {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }
}

.formation-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.formation {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.formation .surtitre {
  margin-bottom: 0;
}

.formation .formation-details {
  flex: 1 1 auto;
}

.carte-vedette + .grille-formations {
  margin-top: 40px;
}

@media (min-width: 1024px) {
  .grille-formations {
    row-gap: 12px;
  }

  .formation-col {
    display: contents;
  }

  .formation-col:nth-child(1) > .formation {
    grid-column: 1;
    grid-row: 1;
  }

  .formation-col:nth-child(2) > .formation {
    grid-column: 2;
    grid-row: 1;
  }

  .formation-col:nth-child(3) > .formation {
    grid-column: 3;
    grid-row: 1;
  }

  .formation-col .option {
    grid-column: 2;
    grid-row: 2;
  }
}

.formation h3 {
  margin-bottom: 0;
}

.promesse {
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--texte);
}

.pastille-info,
.pastille-pleine,
.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
}

.pastille-info {
  border: 1px solid var(--filet-doux);
  color: var(--texte-2);
}

.pastille-pleine {
  background: var(--accent);
  color: var(--fond);
}

.badge {
  border: 1px solid var(--filet);
  color: var(--accent);
}

.formule-attenuee {
  border-style: dashed;
}

.formation-details {
  flex: 1 1 auto;
  display: grid;
  align-content: start;
  gap: 14px;
  margin: 0;
}

.formation-details dt {
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.formation-details dd {
  margin: 4px 0 0;
  color: var(--texte-2);
}

.formation-prix {
  color: var(--texte);
  font-weight: 500;
}

.prix {
  margin-top: auto;
  padding-top: 8px;
  color: var(--texte-2);
}

.prix strong {
  display: block;
  color: var(--texte);
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1.2;
}

.petit-prix {
  font-size: 1rem;
  font-weight: 400;
}

.prix-note {
  display: block;
  font-size: 0.875rem;
  color: var(--texte-2);
}

.formation .btn {
  margin-top: 4px;
}

@media (min-width: 1024px) {
  .formation-vedette {
    transform: translateY(-12px);
  }

  @media (hover: hover) {
    .formation-vedette:hover {
      transform: translateY(-16px);
    }
  }
}

.option {
  padding-top: 16px;
  border-top: 1px dashed var(--filet);
  color: var(--texte-2);
  font-size: 0.9rem;
}

.notes {
  display: grid;
  gap: 8px;
  margin-top: 32px;
  color: var(--texte-2);
  font-size: 0.95rem;
}

/* ==========================================================================
   Gabarit formation : en-tete de page, grille principale + aside
   ========================================================================== */
main > .wrap:first-child + section {
  padding-top: 32px;
}

.page-formation {
  display: grid;
  gap: 40px;
  padding-block: 16px 0;
}

.page-entete {
  display: grid;
  gap: 16px;
  justify-items: start;
}

.page-entete h1 {
  font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem);
}

.page-entete .promesse {
  max-width: 40rem;
}

.page-pour-qui {
  max-width: 40rem;
  color: var(--texte-2);
}

.page-pour-qui strong {
  color: var(--texte);
  font-weight: 500;
}

.formation-principale {
  display: grid;
  gap: 64px;
  min-width: 0;
}

.section-formation {
  padding-block: 0;
  display: grid;
  gap: 24px;
}

.section-formation > h2 {
  margin-bottom: 0;
}

.section-formation .trio {
  margin-top: 0;
}

.aside-offre {
  display: grid;
  gap: 20px;
  align-content: start;
  padding: 28px;
  border: 1px solid var(--accent);
  border-radius: 24px;
  background: var(--carte);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.aside-offre .gros-prix {
  font-size: clamp(3rem, 2.4rem + 2vw, 4rem);
}

.aside-offre .btn {
  width: 100%;
}

.aside-offre .lien {
  justify-content: center;
}

.aside-offre .formulaire {
  padding-top: 20px;
  border-top: 1px dashed var(--filet);
}

.appel-final {
  display: grid;
  justify-items: start;
  gap: 16px;
  padding: 32px 24px;
  border: 1px solid var(--filet-doux);
  border-radius: 28px;
  background: var(--carte);
}

.appel-final > h2 {
  margin-bottom: 0;
}

@media (min-width: 720px) {
  .appel-final {
    padding: 44px;
  }
}

@media (min-width: 1024px) {
  .page-formation {
    grid-template-columns: minmax(0, 1fr) 340px;
    column-gap: 56px;
    align-items: start;
  }

  .page-entete {
    grid-column: 1 / -1;
  }

  .aside-offre {
    grid-column: 2;
    grid-row: 2;
    position: sticky;
    top: 110px;
  }

  .formation-principale {
    grid-column: 1;
    grid-row: 2;
  }
}

/* ==========================================================================
   Gabarit article (quelle-ia-choisir) : sommaire + colonne de lecture 42rem
   ========================================================================== */
.page-article {
  display: grid;
  gap: 40px;
  padding-block: 16px 0;
}

.article-entete {
  display: grid;
  gap: 20px;
  justify-items: start;
  max-width: 42rem;
}

.article-entete h1 {
  font-size: clamp(2rem, 1.3rem + 3vw, 3rem);
}

.article-auteur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--texte-2);
}

.article-corps {
  display: grid;
  gap: 24px;
  max-width: 42rem;
  color: var(--texte-2);
  font-size: 1.05rem;
}

.article-corps h2 {
  margin: 16px 0 0;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  scroll-margin-top: 110px;
}

.sommaire {
  display: grid;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--filet-doux);
  border-radius: var(--rayon);
  background: var(--carte-2);
  font-size: 0.95rem;
}

.sommaire-titre {
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sommaire ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sommaire a {
  color: var(--texte-2);
  text-decoration: none;
}

@media (hover: hover) {
  .sommaire a:hover {
    color: var(--accent);
  }
}

@media (min-width: 1100px) {
  .page-article {
    grid-template-columns: 220px minmax(0, 42rem);
    column-gap: 56px;
    align-items: start;
  }

  .article-entete {
    grid-column: 1 / -1;
  }

  .sommaire {
    grid-column: 1;
    grid-row: 2;
    position: sticky;
    top: 110px;
  }

  .article-corps {
    grid-column: 2;
    grid-row: 2;
  }
}

/* Tableau : le defilement reste dans son conteneur */
.tableau-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--filet-doux);
  border-radius: var(--rayon);
}

.tableau {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.tableau th,
.tableau td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
  border-bottom: 1px solid rgba(31, 138, 91, 0.3);
}

.tableau th {
  background: var(--carte-2);
  color: var(--accent);
  font-weight: 500;
}

.tableau td {
  color: var(--texte-2);
}

.tableau tr:last-child td {
  border-bottom: 0;
}

/* ==========================================================================
   Formulaire
   ========================================================================== */
.formulaire {
  display: grid;
  gap: 16px;
  max-width: 32rem;
}

.champ {
  display: grid;
  gap: 8px;
}

.champ label,
.case label {
  font-weight: 500;
  color: var(--texte);
}

.formulaire input[type="text"],
.formulaire input[type="email"] {
  width: 100%;
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid var(--filet);
  border-radius: 999px;
  background: rgba(2, 14, 9, 0.6);
  color: var(--texte);
  font: inherit;
  font-size: 1rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.formulaire input[type="text"]:focus,
.formulaire input[type="email"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

.formulaire input:user-invalid {
  border-color: #fca5a5;
}

.case {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.case input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: var(--accent);
}

.case input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.case label {
  font-weight: 400;
  color: var(--texte-2);
}

.case .todo {
  grid-column: 2;
  justify-self: start;
}

.formulaire .btn {
  justify-self: start;
}

/* ==========================================================================
   Bloc ressource : couverture de PDF en CSS
   ========================================================================== */
.couverture-pdf {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: min(100%, 300px);
  aspect-ratio: 3 / 4;
  margin-inline: auto;
  padding: 28px;
  overflow: hidden;
  border: 1px solid var(--filet-doux);
  border-radius: 16px;
  background: var(--carte);
  box-shadow: 0 30px 60px -30px rgba(52, 211, 153, 0.45);
  transform: rotate(-3deg);
}

.couverture-pdf::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 10%, rgba(52, 211, 153, 0.18), transparent 60%);
  pointer-events: none;
}

.couverture-titre {
  position: relative;
  font-family: "Lora", Georgia, serif;
  font-style: italic;
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--texte);
}

.couverture-monogramme {
  position: relative;
  font-family: "Lora", Georgia, serif;
  font-style: italic;
  font-size: 4rem;
  line-height: 1;
  color: var(--accent);
  opacity: 0.35;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.faq details {
  background: var(--carte);
  border: 1px solid var(--filet-doux);
  border-radius: var(--rayon);
  padding: 0 20px;
  transition: border-color 0.25s ease, opacity 0.7s var(--ease), translate 0.7s var(--ease);
}

.faq details[open] {
  border-color: var(--accent);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  cursor: pointer;
  list-style: none;
  font-weight: 500;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  flex-shrink: 0;
  color: var(--accent);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
}

.faq details[open] summary::after {
  content: "\2212";
}

.faq details p {
  margin: 0 0 20px;
  color: var(--texte-2);
}

/* ==========================================================================
   Reserver (bloc final de l'accueil)
   ========================================================================== */
.carte-reserver {
  display: grid;
  justify-items: center;
  gap: 20px;
  padding: 40px 24px;
  border: 1px solid var(--filet-doux);
  border-radius: 28px;
  background: var(--carte);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  text-align: center;
}

.carte-reserver h2 {
  margin-bottom: 0;
}

.carte-reserver .description {
  max-width: 36rem;
}

@media (min-width: 720px) {
  .carte-reserver {
    padding: 56px 48px;
  }
}

.reservations {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 32px;
}

.reservation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 100%;
}

/* Marques a completer */
.todo {
  display: inline-block;
  max-width: 100%;
  padding: 2px 8px;
  border: 1px dashed var(--accent);
  border-radius: 6px;
  color: var(--accent);
  font-size: 0.85rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   Page merci (noindex)
   ========================================================================== */
.page-merci {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 70vh;
  padding-block: 72px;
  text-align: center;
}

.page-merci .wrap {
  display: grid;
  justify-items: center;
  gap: 20px;
}

.page-merci p {
  max-width: 36rem;
  color: var(--texte-2);
}

/* ==========================================================================
   Pied de page (3 colonnes >= 720px)
   ========================================================================== */
.pied {
  padding-block: 56px 40px;
  border-top: 1px solid var(--filet);
  background: rgba(2, 14, 9, 0.75);
  color: var(--texte-2);
  font-size: 0.9rem;
}

.pied-grille {
  display: grid;
  gap: 36px;
}

@media (min-width: 720px) {
  .pied-grille {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
  }
}

.pied-marque {
  display: grid;
  gap: 14px;
  justify-items: start;
}

.pied-marque img {
  height: 30px;
  width: auto;
  max-width: none;
}

.pied .slogan {
  font-size: 1.15rem;
}

.pied-col {
  display: grid;
  gap: 12px;
  align-content: start;
}

.pied-titre {
  color: var(--texte);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pied-col ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pied a {
  color: var(--texte);
  text-decoration: none;
}

@media (hover: hover) {
  .pied a:hover {
    color: var(--accent);
    text-decoration: underline;
  }
}

.pied-bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(31, 138, 91, 0.3);
}

.pied .petit {
  font-size: 0.85rem;
}

/* Barre d'action collante, mobile seulement, apres l'entree de page */
.barre-collante {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(2, 14, 9, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(31, 138, 91, 0.35);
  font-size: 0.9rem;
}

.barre-collante span {
  min-width: 0;
  color: var(--texte);
}

.barre-collante .btn {
  flex-shrink: 0;
  min-height: 40px;
  padding: 8px 16px;
  font-size: 0.9rem;
}

@media (max-width: 719.98px) {
  body.barre-visible .barre-collante {
    display: flex;
  }

  body.barre-visible {
    padding-bottom: 88px;
  }
}

/* ==========================================================================
   Pages juridiques
   ========================================================================== */
.page-mentions {
  padding-block: 48px 72px;
}

.page-mentions h1 {
  margin-bottom: 40px;
  font-size: clamp(2rem, 1.4rem + 2.5vw, 2.75rem);
}

.avertissement {
  margin-bottom: 40px;
  padding: 16px 20px;
  border: 1px dashed var(--accent);
  border-radius: var(--rayon);
  background: var(--carte);
  color: var(--accent);
  font-weight: 500;
}

.bloc-mention {
  padding-block: 0;
  margin-bottom: 40px;
}

.bloc-mention h2 {
  font-size: 1.4rem;
  margin-bottom: 16px;
}

.bloc-mention .grille-texte {
  display: grid;
  gap: 12px;
  color: var(--texte-2);
}

.bloc-mention ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--texte-2);
}

/* ==========================================================================
   Animations d'entree (seulement si le mouvement est permis)
   ========================================================================== */
@keyframes apparait {
  from {
    opacity: 0;
    translate: 0 16px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes saisie {
  0% {
    opacity: 0;
  }

  15%,
  85% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes rebond {
  0%,
  100% {
    opacity: 0.3;
    translate: 0 0;
  }

  50% {
    opacity: 1;
    translate: 0 -3px;
  }
}

@keyframes barrer {
  from {
    text-decoration-color: transparent;
  }

  to {
    text-decoration-color: #fca5a5;
  }
}

@keyframes estompe {
  to {
    opacity: 0.45;
  }
}

@keyframes halo {
  from {
    opacity: 0.7;
    transform: scale(0.96);
  }

  to {
    opacity: 1;
    transform: scale(1.04);
  }
}

@keyframes tourne {
  to {
    --angle: 360deg;
  }
}

@keyframes ouvre {
  from {
    opacity: 0;
    translate: 0 -6px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes montee {
  from {
    translate: 0 100%;
  }

  to {
    translate: 0 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  body.barre-visible .barre-collante {
    animation: montee 0.35s var(--ease) both;
  }

  .haut::before {
    animation: halo 10s ease-in-out infinite alternate;
  }

  .accroche .split-texte > * {
    animation: apparait 0.7s var(--ease) both;
  }

  .accroche .split-texte > *:nth-child(2) {
    animation-delay: 0.12s;
  }

  .accroche .split-texte > *:nth-child(3) {
    animation-delay: 0.24s;
  }

  .accroche .split-texte > *:nth-child(n + 4) {
    animation-delay: 0.36s;
  }

  .accroche .split-visuel .photo-cadre {
    animation: apparait 0.6s var(--ease) both;
  }

  .demo {
    animation: apparait 0.6s var(--ease) both;
  }

  .mini-parcours-etape {
    animation: apparait 0.6s var(--ease) both;
  }

  .mini-parcours-etape:nth-child(2) {
    animation-delay: 0.5s;
  }

  .mini-parcours-etape:nth-child(3) {
    animation-delay: 1s;
  }

  .bulle-toi {
    animation: apparait 0.6s 0.3s both;
  }

  .saisie {
    display: inline-flex;
    animation: saisie 0.8s 1.1s both;
  }

  .saisie span {
    animation: rebond 0.8s ease-in-out infinite;
  }

  .saisie span:nth-child(2) {
    animation-delay: 0.15s;
  }

  .saisie span:nth-child(3) {
    animation-delay: 0.3s;
  }

  .bulle-invente {
    animation: apparait 0.6s 1.9s both, barrer 0.8s 2.6s both, estompe 0.6s 3.4s forwards;
  }

  .pastille-invente {
    animation: apparait 0.5s 1.9s both;
  }

  .separateur {
    animation: apparait 0.5s 3.9s both;
  }

  .bulle-toi-apres {
    animation: apparait 0.6s 4.3s both;
  }

  .bulle-verif {
    animation: apparait 0.6s 4.9s both;
  }

  .pastille-verifiable {
    animation: apparait 0.5s 5.5s both;
  }

  .faq details[open] p {
    animation: ouvre 0.35s var(--ease);
  }

  .offre-anim {
    animation: tourne 6s linear infinite;
  }
}

/* Apparition au defilement : sans JavaScript, tout reste visible */
html.js [data-reveal] {
  opacity: 0;
  translate: 0 24px;
}

html.js [data-reveal].is-visible {
  opacity: 1;
  translate: 0 0;
}

:where([data-reveal]) {
  transition: opacity 0.7s var(--ease), translate 0.7s var(--ease);
}

html.js [data-reveal]:nth-child(2):not(:hover) {
  transition-delay: 0.08s;
}

html.js [data-reveal]:nth-child(3):not(:hover) {
  transition-delay: 0.16s;
}

html.js [data-reveal]:nth-child(4):not(:hover) {
  transition-delay: 0.24s;
}

/* Mouvement reduit : tout est coupe, tout est visible dans son etat final */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  html.js [data-reveal] {
    opacity: 1;
    translate: none;
  }
}

/* ==========================================================================
   Pipeline technique anime (schema de flux, ex: architecture Soniq)
   ========================================================================== */
.pipeline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 24px;
  padding: 24px 12px;
}

.pipeline-etape {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 128px;
  text-align: center;
}

.pipeline-icone {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: radial-gradient(circle at 50% 40%, rgba(52, 211, 153, 0.18), transparent 70%);
  color: var(--accent);
}

.pipeline-icone svg {
  width: 24px;
  height: 24px;
}

.pipeline-etape p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--texte-2);
}

.pipeline-ligne {
  flex: 1 1 32px;
  min-width: 24px;
  max-width: 64px;
  height: 2px;
  margin-top: -32px;
  background-image: repeating-linear-gradient(90deg, var(--accent) 0 8px, transparent 8px 16px);
  background-size: 32px 2px;
  animation: ecoulement-pipeline 1s linear infinite;
  opacity: 0.7;
}

@keyframes ecoulement-pipeline {
  to { background-position: 32px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pipeline-ligne {
    animation: none;
  }
}

.carte-projet-visuel {
  margin-top: 16px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--filet-doux);
  background: var(--fond-alt);
}

.carte-projet-visuel img {
  display: block;
  width: 100%;
  height: auto;
}

/* Convictions (a propos) : titres en grand */
.frise-verticale h3 .relief {
  font-size: 1.6rem;
  line-height: 1.2;
}

/* ==========================================================================
   Fond futuriste : reseau de noeuds anime (JS), un seul canvas fixe pour
   tout le site (assets/js/fond-reseau.js), plus accents sur les heros.
   ========================================================================== */
.fond-reseau--global {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.85;
}

/* Orbe lumineuse unique, discrete, derriere l'accroche et les en-tetes de page */
.accroche,
.page-entete,
.article-entete {
  position: relative;
}

/* Orbe retiree : l'utilisateur ne veut que le reseau anime, aucun gradient decoratif en plus */

/* Grille technique discrete, qui s'estompe vers le bas plutot que de couper net */
.accroche,
.article-entete {
  background-image:
    linear-gradient(rgba(52, 211, 153, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52, 211, 153, 0.045) 1px, transparent 1px);
  background-size: 42px 42px;
  background-position: center;
  animation: derive-grille 34s linear infinite;
  mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
}

@keyframes derive-grille {
  from { background-position: 0 0, 0 0; }
  to { background-position: 42px 84px, 84px 42px; }
}

/* Scanline discrete sur les pastilles "pilule" : un seul passage, pas une boucle qui attire l'oeil en continu */
.pilule {
  position: relative;
  overflow: hidden;
}

.pilule::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(52, 211, 153, 0.16), transparent);
  animation: passage-lumiere 1.6s ease-out 1;
  animation-delay: 0.6s;
}

@keyframes passage-lumiere {
  0% { left: -60%; }
  100% { left: 140%; }
}

/* Rotation de bordure animee sur l'offre mise en avant (via @property --angle) */
@keyframes offre-anim-rotation {
  to { --angle: 360deg; }
}

@supports (background: conic-gradient(red, red)) {
  .offre-anim {
    animation: offre-anim-rotation 6s linear infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .accroche::before,
  .page-entete::before,
  .accroche,
  .pilule::after,
  .offre-anim {
    animation: none !important;
  }
}

/* Sprint 1 : exemples avant/après, sections masquées */
[hidden] { display: none !important; }
.avant-apres { border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; padding: 1.25rem 1.5rem; margin: 0 0 1rem; }
.avant-apres h3 { margin: 0 0 .75rem; }
.avant-apres .aa-ligne { margin: .35rem 0; }
.avant-apres .petit { opacity: .65; margin: .75rem 0 0; }

/* Marqueurs de travail masqués en public (restent visibles sur les pages légales à compléter) */
body:not(.legal) .todo { display: none !important; }

/* Lot 2 : LinkedIn, visuels a droite, noms de projets */
.entete-linkedin { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: inherit; opacity: .85; }
.entete-linkedin:hover { opacity: 1; }
.entete-linkedin svg { width: 22px; height: 22px; }
.btn-linkedin { display: inline-flex; align-items: center; gap: .5rem; }
.btn-linkedin svg { width: 18px; height: 18px; }
.visuel-avant-apres { border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px; padding: 1.5rem; display: grid; gap: 1rem; }
.visuel-avant-apres .va-bloc { border-radius: 12px; padding: 1rem 1.25rem; background: rgba(255, 255, 255, .04); }
.visuel-avant-apres .va-apres { background: rgba(120, 220, 160, .08); border: 1px solid rgba(120, 220, 160, .25); }
.visuel-avant-apres .va-etiquette { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; opacity: .7; margin: 0 0 .35rem; }
.visuel-avant-apres p { margin: 0; }
.compteurs { display: grid; gap: 1rem; }
.compteurs .carte { margin: 0; }
.sous-titre-projet { margin: .1rem 0 .4rem; font-weight: 600; opacity: .9; }
.nom-technique { margin: 0 0 .75rem; font-size: .8rem; opacity: .6; }
.carte-dev { margin-top: 1.5rem; }
@media (max-width: 1179px) { .entete-linkedin { display: none; } }

/* Correctifs lot 2 */
.video-vignette .video-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.menu-bureau a { white-space: nowrap; }
.menu-bureau ul { gap: 1rem; }
#formations .grille { margin-top: 2rem; }
@media (max-width: 1179px) { .entete-linkedin { display: none; } }

/* AI Council : schema des agents */
.illustration-council { margin: 1rem 0 0; color: var(--accent); }
.illustration-council svg { width: 100%; height: auto; display: block; }

/* Lot 3 : test d'entree, carte AI Council, miniature Qui je suis, composants */
.btn-compact { white-space: nowrap; }
.video-hero { padding: 0; overflow: hidden; }
.video-hero .video-vignette { width: 100%; border-radius: 0; }
.video-hero figcaption { padding: .75rem 1rem; margin: 0; }
.carte-projet--large { grid-column: 1 / -1; display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .carte-projet--large { grid-template-columns: 1fr 1fr; } }
.carte-projet--large .illustration-council { margin: 0; max-width: 420px; justify-self: center; width: 100%; }
.test-ia { display: grid; gap: 1rem; margin: 1.5rem 0; max-width: 640px; }
.test-ia h2 { margin: 0; }
.test-ia progress { width: 100%; height: 8px; accent-color: var(--accent); }
.test-options { display: grid; gap: .75rem; }
.test-option { text-align: left; padding: 1rem 1.25rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .04); color: inherit; font: inherit; cursor: pointer; min-height: 48px; }
.test-option:hover, .test-option:focus-visible, .test-option[aria-pressed="true"] { border-color: var(--accent); background: rgba(120, 220, 160, .1); outline: none; }
.test-resultat { border: 1px solid rgba(120, 220, 160, .35); border-radius: 14px; padding: 1.25rem 1.5rem; display: grid; gap: .75rem; }
.test-resultat p { margin: 0; }
.liens-internes .lien-carte { display: block; }

@media (max-width: 639px) { .btn-detail { display: none; } }

/* En-tete tres petit ecran */
@media (max-width: 420px) {
  .marque img { width: 128px; height: auto; }
  .entete-actions { gap: 6px; }
  .entete-actions .btn-compact { padding: 0.45rem 0.7rem; font-size: 0.85rem; }
}

.illustration-bassa { margin: 1rem 0 0; color: var(--accent); }
.illustration-bassa svg { width: 100%; max-width: 320px; height: auto; display: block; }

/* Lot 4 : ecran de resultat du test */
.test-plan { display: grid; gap: .75rem; }
.test-astuce { border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; padding: .9rem 1.1rem; background: rgba(255, 255, 255, .04); }
.test-astuce p { margin: 0; }
.test-astuce .petit { opacity: .7; margin-bottom: .25rem; }
.test-astuce--plan { border-color: rgba(120, 220, 160, .4); background: rgba(120, 220, 160, .08); }
.test-resultat h3 { margin: 0; }

/* Lot 4 : cartes projets alignees */
.carte-projet { display: flex; flex-direction: column; }
.carte-projet .description { min-height: 11.5rem; }
.carte-projet .coches { margin-bottom: 1rem; }
.carte-projet .pipeline { margin-top: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem .6rem; }
.carte-projet .pipeline .pipeline-ligne { display: none; }
.carte-projet .pipeline-etape { text-align: center; }
.carte-projet .carte-projet-visuel, .carte-projet .illustration-bassa { margin-top: auto; }
.carte-projet--large .description { min-height: 0; }

/* Lot 4b : alignement fin des cartes projets */
.carte-projet .sous-titre-projet { min-height: 3.2rem; }
.carte-projet .nom-technique { min-height: 2.7rem; }
.carte-projet .description { min-height: 14rem; }
.carte-projet--large { display: grid; }
.carte-projet--large .sous-titre-projet, .carte-projet--large .nom-technique { min-height: 0; }
@media (max-width: 899px) { .carte-projet .description, .carte-projet .sous-titre-projet, .carte-projet .nom-technique { min-height: 0; } }

/* Lecteur de presse : illustration (meme style que Bassa Voice) */
.illustration-lecteur { margin: 1rem 0 0; color: var(--accent); }
.illustration-lecteur svg { width: 100%; max-width: 320px; height: auto; display: block; }
.carte-projet .illustration-lecteur { margin-top: auto; }

/* Lot 5 : vides des cartes projets, schema Soniq, titres A propos */
.carte-projet .description { min-height: 0; }
.carte-projet .coches { margin-bottom: 1.5rem; }
.illustration-soniq { margin: 1rem 0 0; color: var(--accent); }
.illustration-soniq svg { width: 100%; max-width: 320px; height: auto; display: block; }
.carte-projet .illustration-soniq { margin-top: auto; }
[data-point="methode"] h3 { margin-bottom: .6rem; }

/* Lot 7 : cartes "Les bases" et "Developpeurs" cote a cote */
.grille-deux-formations { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
@media (min-width: 900px) { .grille-deux-formations { grid-template-columns: repeat(2, 1fr); } }
.grille-deux-formations .carte-dev { margin-top: 0; }

/* Lot 7 : accueil plus court sur mobile (14 800 px avant). Texte courant inchange (16 px). */
@media (max-width: 720px) {
  .page-accueil main > section { padding-top: 28px; padding-bottom: 28px; }
  .page-accueil main > section h2 { margin-bottom: 20px; }
  .page-accueil #accroche { padding-top: 20px; padding-bottom: 28px; }
  .page-accueil #accroche .photo-cadre { max-height: 260px; overflow: hidden; }
  .page-accueil #accroche .photo-cadre img { width: 100%; height: 260px; object-fit: cover; object-position: center top; }
  .page-accueil #reconnais .carte, .page-accueil #chiffres .carte, .page-accueil #formations .carte { padding: 14px 16px; }
  .page-accueil #formations .carte.formation { gap: 10px; }
  .page-accueil #reconnais .grille { gap: 10px; }
  .page-accueil #reconnais .carte h3 { font-size: 17px; line-height: 1.3; }
  .page-accueil #chiffres .gros-prix { font-size: 40px; line-height: 40px; }
  .page-accueil #resultats .wrap { gap: 20px; }
  .page-accueil .visuel-avant-apres { padding: 16px; gap: 10px; }
  .page-accueil .va-bloc { padding: 12px 14px; }
  .page-accueil #ressource .split-visuel { display: none; }
  .page-accueil .video-carte { display: grid; grid-template-columns: 112px 1fr; grid-template-areas: "v t" "v l"; column-gap: 12px; row-gap: 4px; align-items: center; padding: 10px; }
  .page-accueil .video-carte .video-vignette { grid-area: v; }
  .page-accueil .video-carte h3 { grid-area: t; font-size: 15px; line-height: 1.3; align-self: end; }
  .page-accueil .video-carte .lien { grid-area: l; align-self: start; }
  .page-accueil #youtube .video-image { width: 112px; height: 84px; object-fit: contain; }
  .page-accueil #youtube .video-play { width: 30px; height: 30px; }
  .page-accueil #youtube .grille { gap: 10px; }
  .page-accueil .trio { margin-top: 24px; gap: 12px; }
  .page-accueil .trio-item { display: grid; grid-template-columns: 36px 1fr; grid-template-areas: "i h" "i p"; column-gap: 12px; padding-top: 12px; }
  .page-accueil .trio-item .icone { grid-area: i; }
  .page-accueil .trio-item h3 { grid-area: h; margin: 0; }
  .page-accueil .trio-item p { grid-area: p; margin: 0; }
  .page-accueil .carte-reserver { padding: 28px 20px; }
  .pied-grille { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .pied-grille > .pied-marque, .pied-grille > .pied-bas { grid-column: 1 / -1; }
  .page-accueil #formations .carte-dev .surtitre { display: none; }
  .page-accueil #formations .grille-deux-formations { gap: 10px; margin-top: 10px; }
  .page-accueil #formations .grille { gap: 10px; }
  .page-accueil #formations .notes { margin-top: 12px; }
  .page-accueil .coche-detail { line-height: 1.4; }
  .page-accueil .coches li + li { margin-top: 8px; }
  .page-accueil .carte-reserver .petit-ligne { display: none; }
}

/* Lot 10 : vraie couverture du carnet (remplace la couverture vide) */
.couverture-carnet { display: block; width: 100%; max-width: 300px; height: auto; margin-inline: auto; border-radius: 10px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
@media (max-width: 720px) { .couverture-carnet { max-width: 200px; } }

/* Lot 11 : carnet en ligne (carnet.html) */
.carnet-web { padding-block: 40px 64px; }
.carnet-intro { margin-bottom: 32px; }
.carnet-web h2 { margin: 40px 0 16px; }
.carnet-web p, .carnet-web li, .carnet-web small { font-size: 1rem; line-height: 1.6; }
.carnet-points, .carnet-sommaire, .carnet-etapes { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.carnet-points li, .carnet-sommaire a, .carnet-etape { display: block; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; background: rgba(255, 255, 255, 0.03); }
.carnet-sommaire { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.carnet-sommaire a { text-decoration: none; color: inherit; }
.carnet-sommaire a b { color: var(--accent); margin-right: 6px; }
.carnet-pastilles { display: flex; flex-wrap: wrap; gap: 10px; }
.carnet-pastilles span { padding: 6px 12px; border-radius: 999px; border: 1px solid currentColor; }
.carnet-pastilles .p-ok { color: #5fd49a; } .carnet-pastilles .p-doute { color: #f0b04a; } .carnet-pastilles .p-faux { color: #ff7a7a; }
.carnet-fiche { margin-top: 40px; padding: 24px 20px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; background: rgba(255, 255, 255, 0.03); }
.carnet-fiche h3 { margin: 4px 0 8px; }
.carnet-fiche h4 { margin: 24px 0 10px; color: var(--accent); }
.carnet-fiche-tete { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: start; }
.carnet-illu svg { width: 64px; height: 64px; color: var(--accent); }
.carnet-num { color: var(--accent); margin: 0; }
.carnet-etape { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; }
.carnet-etape .n { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--accent); color: var(--accent); }
.carnet-etape p { margin: 0; }
.carnet-grille { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.carnet-boite { display: grid; gap: 6px; padding: 12px 14px; border: 1px dashed rgba(255, 255, 255, 0.3); border-radius: 10px; }
.carnet-boite .blanc { letter-spacing: 0.08em; color: var(--accent); }
.carnet-choix { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.carnet-choix .cx, .carnet-boite .cx { display: inline-block; width: 14px; height: 14px; border: 1.5px solid currentColor; border-radius: 50%; vertical-align: -2px; margin-right: 6px; }
.carnet-outil { margin: 12px 0 0; opacity: 0.8; }
.carnet-retenir, .carnet-pratique p, .carnet-astuce { margin: 16px 0 0; }
.carnet-retenir { padding: 14px 16px; border-left: 3px solid var(--accent); background: rgba(255, 255, 255, 0.04); }
.carnet-retenir p { margin: 4px 0 0; }
.carnet-pratique .fais b { color: #5fd49a; } .carnet-pratique .evite b { color: #ff7a7a; }
.carnet-fin { margin-top: 48px; }
@media (max-width: 720px) {
  .carnet-web { padding-block: 24px 40px; }
  .carnet-fiche { padding: 18px 14px; }
  .carnet-fiche-tete { grid-template-columns: 48px 1fr; gap: 12px; }
  .carnet-illu svg { width: 48px; height: 48px; }
  .carnet-sommaire { grid-template-columns: 1fr; }
  .carnet-grille { grid-template-columns: 1fr; }
}

/* Lot 12 : citation signee (accueil, section Qui je suis) et titre en citation (A propos) */
.citation cite { display: block; margin-top: 12px; font-family: "Inter", system-ui, sans-serif; font-style: normal; font-size: 1rem; letter-spacing: 0.04em; color: var(--accent); }
.citation cite::before { content: "\2014\00a0"; content: ""; }
.citation-titre { font-family: "Lora", Georgia, serif; font-style: italic; font-weight: 400; line-height: 1.25; font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.6rem); }
.signature { margin: 8px 0 24px; font-size: 1rem; letter-spacing: 0.04em; color: var(--accent); }
/* Lot 15 : accueil plus court (parcours en une ligne par etape, cartes d'offres courtes, carnet resume) */
.parcours-court { list-style: none; margin: 20px 0 28px; padding: 0; display: grid; gap: 10px; }
.parcours-etape { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; background: rgba(255, 255, 255, 0.03); line-height: 1.5; }
.parcours-etape b { color: var(--accent); }
.parcours-etape .lien, .parcours-etape .lien-discret { white-space: nowrap; }
.offre-courte { display: grid; gap: 8px; align-content: start; }
.offre-courte h3 { margin: 0; }
.offre-courte .prix { margin: 0; }
.offre-courte .btn { justify-self: start; margin-top: 4px; }
#ressource .actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Lot 16 : le site s'ouvre sur la citation signee */
.accroche h1.citation-titre { font-size: clamp(1.75rem, 1.3rem + 2vw, 3rem); margin: 0; }

/* Lot 18 : photo en entier, sans recadrage (ratio du fichier 733 x 1100). Mobile : sous la signature, centree. Ordinateur : a droite de la citation */
.accroche-texte { max-width: 1040px; }
.citation-bloc { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 14px; margin-bottom: 8px; }
.citation-bloc .signature { margin: 0; }
.citation-photo { width: 160px; margin: 4px auto 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--filet-doux); }
.citation-photo img { display: block; width: 100%; height: auto; }
@media (min-width: 900px) {
  .citation-bloc { grid-template-columns: minmax(0, 1fr) 220px; column-gap: 48px; row-gap: 12px; }
  .citation-bloc h1 { grid-column: 1; grid-row: 1; align-self: end; }
  .citation-bloc .signature { grid-column: 1; grid-row: 2; align-self: start; }
  .citation-photo { grid-column: 2; grid-row: 1 / 3; align-self: center; width: 220px; margin: 0; }
}

/* Lot 19 : photo entiere sur A propos (ratio du fichier, sans recadrage) */
.photo-cadre.photo-entiere, .accroche .split-visuel .photo-cadre.photo-entiere { aspect-ratio: auto; display: block; width: 160px; max-width: 100%; margin-inline: auto; }
.photo-cadre.photo-entiere img { position: static; display: block; width: 100%; height: auto; object-fit: contain; }
@media (min-width: 900px) {
  .photo-cadre.photo-entiere, .accroche .split-visuel .photo-cadre.photo-entiere { width: 300px; }
}

/* Lot 20 : mobile, photo carree (fichier dedie) a gauche et bouton LinkedIn a droite, sur une ligne. Ordinateur inchange */
.citation-contact { display: flex; align-items: center; gap: 16px; margin-top: 4px; }
.citation-contact .citation-photo { flex: 0 0 auto; width: 120px; margin: 0; }
.citation-photo picture { display: block; }
@media (min-width: 900px) {
  .citation-contact .citation-photo { width: 220px; }
}

/* Lot 21 : « Me contacter » (WhatsApp et LinkedIn). Mobile : a droite de la photo carree, boutons l'un sous l'autre. Ordinateur : sous la photo, centres */
.citation-liens { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.citation-liens-titre { margin: 0; font-size: 0.9rem; color: var(--texte-2); }
.citation-lien { justify-content: center; text-align: center; min-height: 44px; }
@media (min-width: 900px) {
  .citation-contact { display: flex; flex-direction: column; align-items: center; gap: 14px; grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; }
  .citation-contact .citation-photo { grid-column: auto; grid-row: auto; }
  .citation-liens { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
  .citation-liens-titre { flex-basis: 100%; text-align: center; }
  .citation-lien { width: 160px; }
}

/* Lot 22 : promo pilote. Citation en petit au-dessus du titre ; page candidater.html */
.citation-petite { margin: 0; padding-left: 14px; border-left: 2px solid var(--accent); }
.citation-petite blockquote { margin: 0; }
.citation-petite p { margin: 0; font-family: "Lora", Georgia, serif; font-style: italic; font-size: 1.05rem; line-height: 1.45; color: var(--texte); }
.citation-petite .signature { margin: 6px 0 0; font-size: 0.9rem; }
.accroche h1.promo-titre { margin: 0; font-size: clamp(1.7rem, 1.25rem + 2vw, 2.9rem); }
.accroche .citation-bloc .sous-titre { margin: 0; }
.accroche .citation-bloc .actions { margin: 4px 0 0; }
.places { margin: 0; font-size: 0.95rem; color: var(--accent); }
@media (min-width: 900px) {
  .accroche .citation-bloc > *:not(.citation-contact) { grid-column: 1; grid-row: auto; align-self: start; }
  .accroche .citation-bloc > .citation-contact { grid-column: 2; grid-row: 1 / 7; align-self: center; }
}
.page-candidater { padding-block: 48px 72px; }
.page-candidater h1 { margin: 0 0 12px; }
.page-candidater .chapeau { margin: 0 0 16px; }
.promo-recap { margin: 24px 0; }
.promo-recap h2 { font-size: 1.15rem; margin: 0 0 8px; }
.promo-recap ul + h2 { margin-top: 20px; }
.candidature-repli, .candidature-externe, #candidature { margin-top: 24px; }
.candidature-repli h2, #candidature h2 { font-size: 1.15rem; margin: 0 0 8px; }
#candidature .champ { display: grid; gap: 6px; margin: 0 0 16px; }
#candidature fieldset.champ { border: 0; padding: 0; }
#candidature fieldset label { display: flex; gap: 8px; align-items: center; min-height: 44px; }
#candidature input[type="text"], #candidature input[type="email"], #candidature textarea { width: 100%; max-width: 100%; padding: 10px 12px; font: inherit; color: inherit; background: var(--carte); border: 1px solid var(--filet); border-radius: 8px; }
#candidature .consentement { grid-template-columns: auto 1fr; align-items: start; font-size: 0.95rem; }
#candidature .consentement input { margin-top: 4px; width: 20px; height: 20px; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.candidature-message:empty { display: none; }

/* Lot 23 : entree = citation + photo + Me contacter + Réserver un créneau ; promo pilote dans un bloc juste dessous */
.citation-creneau { justify-content: center; text-align: center; min-height: 44px; }
@media (min-width: 900px) {
  .citation-liens .citation-lien, .citation-liens .citation-creneau { width: 100%; flex-basis: 100%; }
}
#promo { padding-block: 8px 40px; }
.promo-carte { display: grid; gap: 14px; justify-items: start; max-width: 760px; }
.promo-carte .pilule { margin: 0; }
.promo-carte h2.promo-titre { margin: 0; font-size: clamp(1.45rem, 1.15rem + 1.4vw, 2.2rem); }
.promo-carte .sous-titre, .promo-carte .actions { margin: 0; }

/* Lot 24 : promo dans l'entree. Mobile : apres Me contacter (ordre du code). Ordinateur : directement sous la citation, photo + contact a droite */
.citation-promo { display: grid; gap: 12px; justify-items: start; margin-top: 8px; padding: 20px; border: 1px solid var(--filet-doux); border-radius: 16px; background: var(--carte); }
.citation-promo .pilule, .citation-promo .sous-titre, .citation-promo .actions, .citation-promo .places { margin: 0; }
.citation-promo h2.promo-titre { margin: 0; font-size: clamp(1.4rem, 1.15rem + 1.2vw, 2rem); }
@media (min-width: 900px) {
  .accroche .citation-bloc { grid-template-rows: auto auto 1fr; }
  .accroche .citation-bloc > h1 { grid-column: 1; grid-row: 1; }
  .accroche .citation-bloc > .signature { grid-column: 1; grid-row: 2; }
  .accroche .citation-bloc > .citation-promo { grid-column: 1; grid-row: 3; align-self: start; margin-top: 12px; }
  .accroche .citation-bloc > .citation-contact { grid-column: 2; grid-row: 1 / 4; align-self: start; }
}

/* Lot 24b : le masque de fondu ne s'applique plus au contenu de l'entree (il effacait la promo et les boutons en bas de section).
   La grille et son fondu passent sur un pseudo-element derriere le contenu. */
.accroche { mask-image: none; -webkit-mask-image: none; background-image: none; animation: none; isolation: isolate; }
.accroche::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(52, 211, 153, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52, 211, 153, 0.045) 1px, transparent 1px);
  background-size: 42px 42px;
  background-position: center;
  animation: derive-grille 34s linear infinite;
  mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
}
@media (prefers-reduced-motion: reduce) {
  .accroche::after { animation: none !important; }
}

/* Portfolio (une page) : hero, cartes, projets, parcours, etapes, contact, bouton WhatsApp flottant */
.pf-hero { padding-block: 40px 56px; }
.pf-hero-grille { display: grid; gap: 24px; align-items: center; }
.pf-hero-texte { display: grid; gap: 14px; justify-items: start; }
.pf-hero-texte > * { margin: 0; }
.pf-descripteur { font-size: 0.85rem; font-weight: 500; letter-spacing: 0.14em; color: var(--accent); }
.pf-hero h1 { font-weight: 300; margin: 0; }
.pf-slogan { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); }
.pf-sous-titre { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem); font-weight: 500; color: var(--texte); }
.pf-benefice { color: var(--accent); font-weight: 500; }
.pf-phrase { max-width: 36rem; font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem); color: var(--texte); }
.pf-hero .actions { margin: 6px 0 0; }
.pf-zone { font-size: 0.9rem; color: var(--texte-2); }
.pf-portrait { order: -1; width: 160px; margin: 0; border-radius: 16px; overflow: hidden; }
.pf-portrait img { display: block; width: 100%; height: auto; -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent); mask-image: linear-gradient(to bottom, #000 80%, transparent); }
@media (min-width: 900px) {
  .pf-hero { padding-block: 72px 96px; }
  .pf-hero-grille { grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; }
  .pf-portrait { order: 0; width: 360px; border-radius: 0; overflow: visible; }
  .pf-portrait img { -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent); mask-image: linear-gradient(to bottom, #000 80%, transparent); }
}
.pf-grille-3, .pf-grille-2 { display: grid; gap: 16px; }
@media (min-width: 720px) { .pf-grille-3 { grid-template-columns: repeat(3, 1fr); } .pf-grille-2 { grid-template-columns: repeat(2, 1fr); } }
.pf-carte h3, .pf-projet h3 { margin: 0 0 8px; font-size: 1.2rem; }
.pf-carte p, .pf-projet p { margin: 0; }
.pf-projet { display: flex; flex-direction: column; gap: 8px; }
.pf-projet p.petit { color: var(--texte-2); }
.pf-visuel { margin: 0 0 8px; border-radius: 12px; overflow: hidden; color: var(--accent); background: rgba(2, 14, 9, 0.55); border: 1px solid var(--filet-doux); aspect-ratio: 16 / 9; display: grid; place-items: center; }
.pf-videos { margin-top: 24px; }
.pf-video { display: flex; flex-direction: column; gap: 10px; color: var(--texte); text-decoration: none; }
.pf-video img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; border: 1px solid var(--filet-doux); }
.pf-video span { font-weight: 500; line-height: 1.35; }
.pf-video:hover span, .pf-video:focus-visible span { color: var(--accent); text-decoration: underline; }
.pf-videos-bouton { margin: 28px 0 0; }
.pf-visuel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-visuel svg { width: 88%; height: auto; }
.pf-etroit { max-width: 760px; }
.pf-parcours li { margin-bottom: 6px; color: var(--texte); }
#parcours + #videos { padding-top: 40px; }
.pf-bloc { padding: 20px 22px; border: 1px solid var(--filet-doux); border-radius: 14px; background: rgba(2, 14, 9, 0.35); }
.pf-bloc h3 { margin: 0 0 10px; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.pf-grille-projets { display: grid; gap: 16px; }
@media (min-width: 720px) { .pf-grille-projets { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .pf-grille-projets { grid-template-columns: repeat(4, 1fr); } }
.pf-projet .pf-technique { margin-top: auto; padding-top: 6px; font-size: 0.85rem; color: var(--texte-2); }
.pf-etapes { counter-reset: etape; display: grid; gap: 14px; }
.pf-etape { counter-increment: etape; position: relative; padding: 14px 16px 14px 60px; border: 1px solid var(--filet-doux); border-radius: 12px; background: var(--carte); }
.pf-etape::before { content: counter(etape); position: absolute; left: 16px; top: 12px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #020e09; font-weight: 600; }
.pf-contact { display: grid; gap: 16px; justify-items: start; }
.pf-contact > * { margin: 0; }
.pf-delai { color: var(--texte-2); font-size: 0.95rem; }
.pf-pied-interne { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; padding-block: 24px; }
.pf-pied-liens { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.pf-pied-liens a { color: var(--texte-2); overflow-wrap: anywhere; }
.pf-mail { color: var(--texte-2); }
.pf-mail a { color: var(--accent); overflow-wrap: anywhere; }
.wa-flottant { position: fixed; right: 16px; bottom: 16px; z-index: 50; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #020e09; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
.wa-flottant svg { width: 28px; height: 28px; }
@media (min-width: 900px) {
  .wa-flottant { display: none; }
}
.page-portfolio .pied { padding-bottom: 72px; }
@media (min-width: 900px) { .page-portfolio .pied { padding-bottom: 0; } }