/* ==========================================================================
   JustiComm · page « Formation » (/services/formation/) · formation IA
   v5, 23/10/2026 : dessins et animations retirés (Raoudha : place aux photos, « l’esprit de formation et de partage ») ;
   haut de page en photo pleine largeur, texte à gauche (comme Référencement local) ; photo à côté de la section 2 ;
   bandeau photo après les modules ; photo derrière l’appel final ; démonstrations des modules gardées, fixes.
   Photos ChatGPT livrées par Raoudha le 23/10/2026 (img/photos/*formation*-justicomm-nice*.webp).
   Préfixe : fo-  (css/svc-formation.css sert à l’accueil : ne pas confondre)
   ========================================================================== */

.fo-or { font-style: italic; color: var(--or-texte); }
.surface-sombre .fo-or, .surface-nuit .fo-or { color: var(--or-clair); }
.fo-insecable { white-space: nowrap; }

/* Titres et textes en pleine largeur (règle de Raoudha, 22/10/2026) : aucune mesure étroite, aucune coupure « équilibrée » */
.fo-h2 {
  max-width: none; text-wrap: pretty;
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem);   /* 32 → 44 */
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.fo-texte { max-width: none; margin-top: var(--e-5); font-size: var(--t-corps); line-height: 1.6; color: var(--texte); }

.fo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: clamp(1.75rem, 3vw, 2.25rem); }
.fo-actions--centre { justify-content: center; }
.fo-btn { min-height: 56px; padding-inline: 34px; }
.fo-actions .btn-cartouche { min-height: 56px; }
@media (max-width: 30em) { .fo-actions .fo-btn, .fo-actions .btn-cartouche { width: 100%; } }

/* --------------------------------------------------------------------------
   1. Haut de page : photo (ou vidéo) sur toute la largeur, texte à gauche sur un dégradé pétrole (comme Référencement local)
   -------------------------------------------------------------------------- */
body:has(.fo-haut) .entete__fond { opacity: 1; }
.fo-haut {
  position: relative; isolation: isolate; overflow: hidden;
  padding: calc(var(--h-entete) + clamp(1.5rem, 4vw, 3.5rem)) 0 clamp(2.5rem, 5vw, 4rem);
  background: var(--petrole-profond);
}
.fo-haut__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; margin: calc(-1 * clamp(1.5rem, 4vw, 3.5rem)) 0 var(--e-6); background: radial-gradient(ellipse at 65% 45%, #14494A, #062A2B 75%); }
.fo-haut__fond { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
/* Vidéo du haut (Remotion, 12 s en boucle, sans son) posée sur la photo ; photo seule si « moins d’animations » */
.fo-haut__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
@media (prefers-reduced-motion: reduce) { .fo-haut__video { display: none; } }
.fo-video__bouton {
  position: absolute; z-index: 3; right: clamp(12px, 2.5vw, 32px);
  top: calc(var(--h-entete) + 12px);
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 1rem;
  border: 1px solid rgba(224, 189, 142, 0.55); border-radius: var(--rayon-pilule);
  background: rgba(6, 42, 43, 0.72); color: var(--creme);
  font: 500 0.875rem / 1 var(--f-texte); letter-spacing: 0.04em; cursor: pointer;
}
.fo-video__bouton[hidden] { display: none; }
.fo-video__bouton:hover, .fo-video__bouton:focus-visible { background: rgba(6, 42, 43, 0.9); border-color: var(--or); }
.fo-video__icone { position: relative; width: 10px; height: 12px; }
.fo-video__bouton[data-etat="pause"] .fo-video__icone { border-inline: 3.5px solid var(--or); }
.fo-video__bouton[data-etat="lecture"] .fo-video__icone { width: 0; height: 0; border-block: 6px solid transparent; border-left: 10px solid var(--or); }
@media (prefers-reduced-motion: reduce) { .fo-haut:not(.fo-video--active) .fo-video__bouton { display: none; } }
@media (max-width: 59.99em) { .fo-video__bouton { top: calc(var(--h-entete) + 10px); } }
@media (min-width: 60em) {
  .fo-haut { min-height: min(100svh, 56vw); display: flex; flex-direction: column; justify-content: center; }
  .fo-haut__media { position: absolute; inset: 0; z-index: -1; margin: 0; aspect-ratio: auto; }
  .fo-haut__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 42, 43, 0.96) 0, rgba(6, 42, 43, 0.9) calc(clamp(24px, 4.5vw, 88px) + 40rem), rgba(6, 42, 43, 0.5) calc(clamp(24px, 4.5vw, 88px) + 54rem), rgba(6, 42, 43, 0) calc(clamp(24px, 4.5vw, 88px) + 72rem)), linear-gradient(0deg, rgba(6, 42, 43, 0.9) 0, rgba(6, 42, 43, 0.9) 8.5rem, rgba(6, 42, 43, 0) 15rem); }  /* Pauline : le voile suit la colonne de texte (≥ 5,7:1 de 960 à 1 440 px), bande sombre sous les professions */
  .fo-haut > .conteneur { max-width: none; margin-inline: 0; padding-inline: clamp(24px, 4.5vw, 88px); }
  .fo-haut__grille { display: grid; grid-template-columns: minmax(0, 40rem); }
}
.fo-ariane { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: var(--e-4); font-size: 0.875rem; color: var(--creme-doux); }
.fo-ariane a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-underline-offset: 3px; }
.fo-ariane [aria-current] { color: var(--creme); }
/* Titre comme les autres pages : nom du service, puis la promesse en or italique (≈ 50 px) */
.fo-haut__titre { margin-top: var(--e-3); font: 500 clamp(2.125rem, 1.6rem + 1.6vw, 3.11rem) / 1.1 var(--f-titre); color: var(--creme); text-wrap: pretty; }
.fo-haut__accroche { margin-top: var(--e-5); font: italic 500 clamp(1.3rem, 1.15rem + 0.5vw, 1.55rem) / 1.4 var(--f-titre); color: var(--creme); }
.fo-haut__intro { margin-top: var(--e-3); font-size: var(--t-corps); line-height: 1.6; color: var(--creme-doux); }
/* Ligne des six professions sous le haut de page (comme Référencement local, Réseaux sociaux, Agents IA) */
.fo-professions-haut { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin-top: clamp(2rem, 4vw, 3rem); padding-top: var(--e-3); border-top: 1px solid rgba(224, 189, 142, 0.22); font-size: 0.9375rem; }
.fo-professions-haut a { display: inline-flex; align-items: center; min-height: 44px; color: var(--creme-doux); text-decoration: none; }
.fo-professions-haut a:hover, .fo-professions-haut a:focus-visible { color: var(--or-clair); text-decoration: underline; text-underline-offset: 4px; }
.fo-reperes { display: flex; flex-wrap: wrap; gap: 0.6rem 1.75rem; margin-top: clamp(1.5rem, 3vw, 2rem); font-size: 1rem; color: var(--creme); }
.fo-reperes li { display: inline-flex; align-items: center; gap: 0.55rem; }
.fo-reperes li::before {
  content: ""; flex: none; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--or) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.6' fill='none' stroke='%230A393A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/* --------------------------------------------------------------------------
   2. Un programme construit autour de vos tâches : texte à gauche, photo à droite
   -------------------------------------------------------------------------- */
.fo-taches__grille { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 60em) { .fo-taches__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.fo-photo {
  position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: #DCD4C5;
  clip-path: polygon(var(--pan) 0, calc(100% - var(--pan)) 0, 100% var(--pan), 100% calc(100% - var(--pan)), calc(100% - var(--pan)) 100%, var(--pan) 100%, 0 calc(100% - var(--pan)), 0 var(--pan));
}
.fo-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Bandeau photo entre les modules et les publics */
.fo-bandeau { position: relative; overflow: hidden; height: clamp(15rem, 34vw, 32rem); background: #0A393A; }
.fo-bandeau img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }  /* visages et classeur visibles */

/* --------------------------------------------------------------------------
   3. Trois modules (fond sombre) : texte d’un côté, démonstration de l’autre, en alternance
   -------------------------------------------------------------------------- */
.fo-modules__liste { display: grid; gap: clamp(3.5rem, 7vw, 5.5rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.fo-module { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: center; scroll-margin-top: calc(var(--h-entete) + 1.5rem); }
@media (min-width: 60em) {
  .fo-module { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); column-gap: clamp(3rem, 6vw, 5.5rem); }
  .fo-module--inverse .fo-module__texte { order: 2; }
}
.fo-module__num { font: 500 clamp(3rem, 2.4rem + 2vw, 4.25rem) / 1 var(--f-titre); color: transparent; -webkit-text-stroke: 1px var(--or); font-variant-numeric: lining-nums; }
.fo-module__titre { margin-top: var(--e-3); font-size: clamp(1.65rem, 1.35rem + 1vw, 2.25rem); line-height: 1.15; color: var(--creme); text-wrap: pretty; }
.fo-module__intro { margin-top: var(--e-4); font: italic 500 clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem) / 1.45 var(--f-titre); color: var(--creme); }
.fo-module__amorce { margin-top: var(--e-5); font-size: var(--t-corps); font-weight: 500; color: var(--or-clair); }
.fo-coches { display: grid; gap: 0.65rem; margin-top: var(--e-3); font-size: var(--t-corps); line-height: 1.55; color: var(--creme); }
.fo-coches li { position: relative; padding-left: 2.1rem; }
.fo-coches li::before {
  content: ""; position: absolute; left: 0; top: 0.25em;
  width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: var(--or) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.6' fill='none' stroke='%230A393A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.fo-module__objectif {
  margin-top: var(--e-5); padding: var(--e-4) var(--e-5);
  border-left: 3px solid var(--or); background: rgba(238, 234, 225, 0.06);
  font: italic 500 clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem) / 1.4 var(--f-titre); color: var(--creme);
}
.fo-module__objectif strong {
  display: block; margin-bottom: 0.2rem;
  font: 500 0.875rem / 1.4 var(--f-texte); font-style: normal; letter-spacing: 0.16em; text-transform: uppercase; color: var(--or-clair);
}
.fo-module__lien { margin-top: var(--e-5); }

/* Démonstrations : cadre commun */
.fo-demo {
  position: relative; display: grid; place-items: center;
  padding: clamp(1.5rem, 4vw, 2.75rem) clamp(1rem, 3vw, 2.25rem);
  border-radius: 18px;
  background: radial-gradient(ellipse at 50% 30%, rgba(224, 189, 142, 0.14), transparent 70%), #072F30;
  box-shadow: inset 0 0 0 1px rgba(224, 189, 142, 0.22);
}

/* Démonstration 1 : téléphone */
.fo-tel {
  width: min(100%, 19.5rem); padding: 0.9rem 0.9rem 1.1rem;
  border-radius: 30px; border: 7px solid #0E1C1D; background: #FBF8F2; color: var(--encre);
  box-shadow: 0 1.75rem 3rem -1.25rem rgba(0, 0, 0, 0.7);
}
.fo-tel__barre { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; font-weight: 500; }
.fo-tel__barre i { width: 64px; height: 14px; border-radius: 9px; background: #0E1C1D; }
.fo-tel__tete { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.9rem; padding-bottom: 0.7rem; border-bottom: 1px solid #E2DCD0; }
.fo-tel__avatar { display: grid; place-items: center; flex: none; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--petrole); color: var(--or); font-size: 0.8125rem; font-weight: 600; }
.fo-tel__tete b { display: block; font: 600 1.05rem / 1.2 var(--f-titre); color: var(--petrole); }
.fo-tel__tete small { display: block; font-size: 0.75rem; color: var(--succes); }
.fo-tel__fil { display: grid; gap: 0.5rem; margin-top: 0.8rem; }
.fo-bulle { max-width: 88%; padding: 0.55rem 0.75rem; font-size: 0.875rem; line-height: 1.4; }
.fo-bulle--eux { justify-self: end; border-radius: 12px 12px 3px 12px; background: #E9E2D3; }
.fo-bulle--ia { justify-self: start; border-radius: 12px 12px 12px 3px; background: var(--petrole); color: var(--creme); }
.fo-tel__statut { justify-self: center; margin-top: 0.25rem; padding: 0.3rem 0.8rem; border-radius: var(--rayon-pilule); background: rgba(176, 99, 57, 0.12); color: #8A4A28; font-size: 0.8125rem; font-weight: 500; }
.fo-tel__statut::before { content: "→ "; }
.fo-tel__action { margin-top: 0.9rem; padding: 0.7rem; border-radius: var(--rayon-pilule); background: #FBF8F2; box-shadow: inset 0 0 0 1.5px var(--cuivre); font-weight: 600;  /* Octave : cuivre en contour, repère de l’intervention humaine (6,4:1) */ color: #8A4A28; font-size: 0.9375rem; font-weight: 500; text-align: center; }

/* Démonstration 2 : fenêtre d’assistant IA */
.fo-fen__barre { display: flex; align-items: center; gap: 6px; padding: 0.6rem 0.9rem; background: #E9E2D3; font-size: 0.8125rem; font-weight: 500; color: var(--petrole); }
.fo-fen__barre i { width: 10px; height: 10px; border-radius: 50%; background: #CDBEA6; }
.fo-fen__barre span { margin-left: 0.5rem; }
.fo-fen__controles li {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.75rem; border-radius: var(--rayon-pilule);
  background: rgba(44, 108, 71, 0.12); color: #24583A; font-size: 0.875rem; font-weight: 500;
}
.fo-fen__controles li::before { content: "✓"; font-weight: 700; }
.fo-fen {
  width: min(100%, 30rem); border-radius: 12px; overflow: hidden;
  background: #FBF8F2; color: var(--encre);
  box-shadow: 0 1.75rem 3rem -1.25rem rgba(0, 0, 0, 0.7);
}
.fo-fen__corps { display: grid; gap: 0.85rem; padding: 1.1rem 1.1rem 1.25rem; }
.fo-fen__demande { justify-self: end; max-width: 88%; padding: 0.65rem 0.85rem; border-radius: 12px 12px 3px 12px; background: var(--petrole); color: var(--creme); font-size: 0.9375rem; line-height: 1.45; }
.fo-fen__reponse { position: relative; padding: 0.85rem 0.95rem 1rem; border-radius: 12px 12px 12px 3px; background: #F1EBDF; font-size: 0.9375rem; line-height: 1.5; }
.fo-fen__reponse p + p { margin-top: 0.35rem; }
.fo-fen__reponse mark { padding: 0 0.15rem; border-radius: 3px; background: rgba(224, 189, 142, 0.6); color: inherit; box-shadow: 0 0 0 1.5px var(--cuivre); }
.fo-fen__controles { display: flex; flex-wrap: wrap; gap: 0.45rem; }

/* Démonstration 3 : automatisation et validation humaine */
.fo-flux__tete svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fo-flux {
  width: min(100%, 29rem); padding: 1.1rem 1.1rem 1.25rem; border-radius: 12px;
  background: #FBF8F2; color: var(--encre); box-shadow: 0 1.75rem 3rem -1.25rem rgba(0, 0, 0, 0.7);
}
.fo-flux__tete { display: flex; align-items: center; gap: 0.55rem; padding-bottom: 0.8rem; border-bottom: 1px solid #E2DCD0; font-size: 0.9375rem; font-weight: 500; color: var(--petrole); }
.fo-flux__etapes { position: relative; display: grid; gap: 0.6rem; margin-top: 0.9rem; }
.fo-flux__etapes::before { content: ""; position: absolute; left: 0.62rem; top: 0.9rem; bottom: 0.9rem; width: 2px; background: #DCD4C5; }
.fo-flux__etapes li { position: relative; display: grid; grid-template-columns: 1fr auto; column-gap: 0.75rem; padding: 0.55rem 0.75rem 0.55rem 2.2rem; border-radius: 8px; background: #F1EBDF; }
.fo-flux__etapes li::before { content: ""; position: absolute; left: 0.3rem; top: 50%; width: 0.75rem; height: 0.75rem; margin-top: -0.375rem; border-radius: 50%; background: var(--petrole); box-shadow: 0 0 0 3px #FBF8F2; }
.fo-flux__etapes b { font-size: 0.9375rem; font-weight: 500; color: var(--petrole); }
.fo-flux__etapes small { grid-column: 1; font-size: 0.8125rem; color: var(--taupe); }
.fo-flux__etapes .fo-flux__humain { background: rgba(176, 99, 57, 0.1); box-shadow: inset 0 0 0 1.5px var(--cuivre); }
.fo-flux__etapes .fo-flux__humain::before { background: var(--cuivre); }
.fo-flux__etat { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: grid; }
.fo-flux__etat > span { grid-area: 1 / 1; justify-self: end; padding: 0.3rem 0.7rem; border-radius: var(--rayon-pilule); font-size: 0.8125rem; font-weight: 500; white-space: nowrap; }
.fo-flux__valide { background: var(--succes); color: #FFF; }
.fo-flux__attente { background: #FFF3E0; color: var(--attention); box-shadow: inset 0 0 0 1px var(--attention); opacity: 0; }
.fo-flux__valide::before { content: "✓ "; }


/* --------------------------------------------------------------------------
   4. Pour qui
   -------------------------------------------------------------------------- */
.fo-publics__liste { display: grid; gap: var(--gouttiere); margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 52em) { .fo-publics__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fo-public {
  display: grid; align-content: start; gap: var(--e-4);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: #FBF8F2; border: 1px solid var(--lin);
  font-size: var(--t-corps); line-height: 1.6;
}
.fo-public__picto { width: 72px; height: 72px; }
.fo-public__picto path { fill: none; stroke: var(--petrole); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fo-public__plein { fill: var(--cuivre); }
.fo-public__point { fill: var(--or-400); }
.fo-public__titre { font-size: var(--t-carte); color: var(--petrole); text-wrap: pretty; }

.fo-professions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-4); margin-top: clamp(2rem, 4vw, 2.75rem); }
.fo-professions__titre { font-size: var(--t-legende); font-weight: 500; color: var(--texte); }
.fo-professions__liste { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fo-professions__liste a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0.3rem 1rem;
  border: 1px solid #CDBEA6; border-radius: var(--rayon-pilule);
  color: var(--petrole); font-size: 1rem; text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.fo-professions__liste a:hover, .fo-professions__liste a:focus-visible { background: var(--or-200); border-color: var(--or-400); }


/* --------------------------------------------------------------------------
   5. Avant, pendant, après : trois cartes à grand numéro, animées comme les étapes de Réseaux sociaux (encadré « cas fictifs » retiré, Raoudha)
   -------------------------------------------------------------------------- */
.fo-etapes { position: relative; display: grid; gap: var(--gouttiere); margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 52em) {
  .fo-etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fo-etapes::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: linear-gradient(90deg, var(--or-400), var(--cuivre)); transform-origin: left; }
}
.fo-etape {
  position: relative; z-index: 1;
  display: grid; align-content: start; gap: var(--e-3);
  box-shadow: 0 24px 48px -26px rgba(6, 42, 43, 0.35); transition: translate var(--d) var(--ease-sortie);
  padding: clamp(1.5rem, 3vw, 2rem);
  background: #FBF8F2; border: 1px solid #DCD4C5;
  font-size: var(--t-corps); line-height: 1.6; color: var(--texte);
}
.fo-etape__tete { display: flex; align-items: flex-start; justify-content: space-between; }
.fo-etape__num { font: 500 clamp(3rem, 2.5rem + 1.5vw, 4rem) / 1 var(--f-titre); color: transparent; -webkit-text-stroke: 1px var(--or-400); font-variant-numeric: lining-nums; }
.fo-etape__picto { flex: none; width: 2.6rem; height: 2.6rem; padding: 0.55rem; border-radius: 50%; background: var(--petrole); fill: none; stroke: var(--or); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fo-etape__repere { margin-top: var(--e-2); font: italic 500 1.35rem / 1.1 var(--f-titre); color: var(--or-texte); }
.fo-etape:hover { translate: 0 -6px; }
.fo-etape:hover .fo-etape__num { color: var(--or); }
.fo-etape__num { transition: color var(--d) var(--ease-sortie); }
@media (prefers-reduced-motion: no-preference) {
  .js .fo-etapes:not(.est-visible) .fo-etape { opacity: 0; }
  .js .fo-etapes.est-visible .fo-etape { animation: fo-apparait 0.7s var(--ease-sortie) calc(var(--i) * 0.25s) both; }
  .js .fo-etapes.est-visible .fo-etape__picto { animation: fo-pop 0.5s var(--ease-sortie) calc(0.2s + var(--i) * 0.25s) both; }
  .js .fo-etapes:not(.est-visible)::before { transform: scaleX(0); }
  .js .fo-etapes.est-visible::before { transition: transform 1.6s var(--ease-douce) 0.2s; transform: scaleX(1); }
  .js .fo-etapes.est-visible .fo-etape__num { animation: fo-remplit 0.9s var(--ease-sortie) calc(0.7s + var(--i) * 0.35s) both; }
}
@media (prefers-reduced-motion: reduce) { .fo-etape { transition: none; } .fo-etape:hover { translate: none; } }
@keyframes fo-apparait { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: none; } }
@keyframes fo-pop { 0% { opacity: 0; scale: 0.4; } 70% { opacity: 1; scale: 1.12; } 100% { opacity: 1; scale: 1; } }
@keyframes fo-remplit { 0% { color: transparent; } 50% { color: var(--or); } 100% { color: transparent; } }
.fo-etape__titre { font-size: clamp(1.4rem, 1.25rem + 0.5vw, 1.7rem); line-height: 1.2; color: var(--petrole); text-wrap: pretty; }


/* --------------------------------------------------------------------------
   6. Tarif (fond sombre) : texte à gauche, carte claire du prix à droite
   -------------------------------------------------------------------------- */
.fo-tarif__grille { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; margin-top: clamp(1.25rem, 2.5vw, 2rem); }
@media (min-width: 56em) { .fo-tarif__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 19rem); } }
.fo-tarif .fo-texte { margin-top: 0; color: var(--creme-doux); }
.fo-tarif .fo-actions { margin-top: var(--e-5); }
/* Carte du prix, compacte (Raoudha : « tellement écrit gros ») */
.fo-prix {
  display: grid; justify-items: center; gap: var(--e-1);
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1rem, 2.5vw, 1.75rem);
  background: #FBF8F2; color: var(--encre); text-align: center;
  clip-path: polygon(var(--pan) 0, calc(100% - var(--pan)) 0, 100% var(--pan), 100% calc(100% - var(--pan)), calc(100% - var(--pan)) 100%, var(--pan) 100%, 0 calc(100% - var(--pan)), 0 var(--pan));
}
.fo-prix__montant { font: 500 clamp(1.9rem, 1.55rem + 1vw, 2.4rem) / 1.1 var(--f-titre); color: var(--petrole); font-variant-numeric: lining-nums; }
.fo-prix__des { display: block; font-size: 0.55em; font-style: italic; color: var(--or-texte); }
.fo-prix__duree { font-size: var(--t-legende); color: var(--encre); }  /* carte claire sur fond sombre : --texte vaut la crème ici */


/* --------------------------------------------------------------------------
   7. FAQ : composant faq5 ; 8. appel final
   -------------------------------------------------------------------------- */
.fo-final { position: relative; overflow: hidden; isolation: isolate; text-align: center; }
.fo-final__fond { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.fo-final::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 75% at 50% 50%, rgba(6, 42, 43, 0.9), rgba(6, 42, 43, 0.62) 70%, rgba(6, 42, 43, 0.5)); }
.fo-final__contenu { display: grid; justify-items: center; }
.fo-final__texte { margin-top: var(--e-5); font-size: var(--t-corps); line-height: 1.6; color: var(--creme-doux); }
.fo-final__promesse { margin-top: var(--e-4); font: italic 500 clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem) / 1.3 var(--f-titre); color: var(--or-clair); }
.fo-final__contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.25rem 0.75rem; margin-top: var(--e-6); font-size: var(--t-legende); color: var(--creme-doux); }
.fo-final__contact a { display: inline-flex; align-items: center; min-height: 44px; color: var(--creme); text-underline-offset: 4px; text-decoration-color: rgba(224, 189, 142, 0.5); }
.fo-final__contact a:hover, .fo-final__contact a:focus-visible { color: var(--or-clair); }

/* Contrôle d’Octave (23/10/2026) : tablette, premier bouton dans le premier écran ; téléphone, surtitre plus petit et bouton Pause réduit à son icône */
@media (min-width: 40em) and (max-width: 59.99em) { .fo-haut__media { aspect-ratio: 16 / 9; } }
@media (max-width: 30em) {
  .fo-haut .surtitre { font-size: 0.8125rem; letter-spacing: 0.14em; }
  .fo-video__bouton { width: 44px; padding: 0; justify-content: center; }
  .fo-video__bouton [data-libelle] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* --------------------------------------------------------------------------
   Démonstrations animées (Raoudha, 23/10/2026 : « comme la console d’avis de Référencement local ») :
   chaque scène se joue une fois, pas à pas, en moins de 5 s ; bouton « Revoir la démonstration » ;
   état final fixe sans JavaScript et en « moins d’animations ».
   -------------------------------------------------------------------------- */
.fo-demo { gap: var(--e-4); }
.fo-revoir {
  justify-self: center; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 1.1rem;
  border: 1px solid rgba(224, 189, 142, 0.5); border-radius: var(--rayon-pilule); background: transparent;
  font: 500 0.875rem / 1 var(--f-texte); letter-spacing: 0.03em; color: var(--creme); cursor: pointer;
}
.fo-revoir::before { content: "↻"; color: var(--or); font-size: 1rem; }
.fo-revoir:hover, .fo-revoir:focus-visible { border-color: var(--or); color: var(--or-clair); }
.fo-revoir[hidden] { display: none; }

/* 01 · la fiche que reçoit l’équipe */
.fo-demo--tel { position: relative; }
.fo-equipe {
  width: min(100%, 15rem); padding: 0.85rem 1rem; border-radius: 10px;
  background: #FBF8F2; color: var(--encre); border-left: 3px solid var(--cuivre);
  box-shadow: 0 1.25rem 2.25rem -1rem rgba(0, 0, 0, 0.65); font-size: 0.8125rem; line-height: 1.45;
}
.fo-equipe__tete { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #8A4A28; }
.fo-equipe__titre { margin-top: 0.15rem; font: 600 1.05rem / 1.2 var(--f-titre); color: var(--petrole); }
.fo-equipe__rappel { margin-top: 0.35rem; font-weight: 600; color: var(--petrole); }
/* La fiche se pose à côté du téléphone seulement si le cadre est assez large (sinon, elle passe dessous) */
.fo-demo--tel { container-type: inline-size; }
@container (min-width: 36rem) {
  .fo-demo--tel > .fo-tel { justify-self: start; margin-left: clamp(0.25rem, 2cqw, 1.25rem); }
  .fo-demo--tel > .fo-revoir { justify-self: start; margin-left: 5.5rem; }
  .fo-demo--tel > .fo-equipe { position: absolute; right: 0.75rem; bottom: 20%; width: 13rem; rotate: 3deg; }
}

/* 02 · demande annotée, date vérifiée */
.fo-annot { background-image: linear-gradient(var(--or), var(--or)); background-size: 100% 2px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 1px; }
.fo-annot sup { margin-left: 0.15em; font-size: 0.75rem; font-weight: 600; color: var(--or-clair); }
.fo-fen__legende { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem; font-size: 0.8125rem; color: var(--petrole); }
.fo-fen__legende span { padding: 0.2rem 0.6rem; border-radius: var(--rayon-pilule); background: rgba(224, 189, 142, 0.28); }
.fo-fen__legende b { margin-right: 0.25rem; color: #8A4A28; }
.fo-fen__note { display: grid; margin-top: 0.6rem; }
.fo-fen__note > span { grid-area: 1 / 1; justify-self: start; padding: 0.25rem 0.65rem; border-radius: var(--rayon-pilule); font-size: 0.8125rem; font-weight: 500; }
.fo-fen__note-avant { background: rgba(176, 99, 57, 0.12); box-shadow: inset 0 0 0 1px var(--cuivre); color: #8A4A28; opacity: 0; }
.fo-fen__note-apres { background: rgba(44, 108, 71, 0.12); color: #24583A; }
.fo-fen__note-apres::before { content: "✓ "; font-weight: 700; }

/* 03 · progression du jour 0 au jour 7, validation humaine */
.fo-flux__etapes::after { content: ""; position: absolute; left: 0.62rem; top: 0.9rem; bottom: 0.9rem; width: 2px; background: var(--petrole); transform-origin: top; }
.fo-flux__regle { margin-top: 0.85rem; padding-top: 0.7rem; border-top: 1px dashed #CDBEA6; font: italic 600 1rem / 1.3 var(--f-titre); color: #8A4A28; text-align: center; }

@media (prefers-reduced-motion: no-preference) {
  .js .fo-demo:not(.est-visible) .fo-e { opacity: 0; }
  .js .fo-demo.est-visible .fo-e { animation: fo-apparait 0.5s var(--ease-sortie) calc(0.3s + var(--e) * var(--pas, 0.55s)) both; }
  .fo-demo--fen { --pas: 0.45s; }
  /* 01 */
  .js .fo-demo.est-visible .fo-tel__action { animation: fo-apparait 0.5s var(--ease-sortie) calc(0.3s + var(--e) * var(--pas, 0.55s)) both, fo-appui 0.5s ease 4.1s 1; }
  .js .fo-demo.est-visible .fo-equipe { animation-name: fo-glisse; }
  /* 02 */
  .js .fo-demo:not(.est-visible) .fo-annot { background-size: 0 2px; }
  .js .fo-demo.est-visible .fo-annot { animation: fo-souligne 0.45s ease calc(0.6s + var(--a) * 0.25s) both; }
  .js .fo-demo:not(.est-visible) .fo-fen__note-apres { opacity: 0; }
  .js .fo-demo.est-visible .fo-fen__note-avant { animation: fo-passe 0.85s ease 2.1s both; }
  .js .fo-demo.est-visible .fo-fen__note-apres { animation: fo-pop 0.45s var(--ease-sortie) 2.95s both; }
  /* 03 */
  .js .fo-demo:not(.est-visible) .fo-flux__etapes::after { transform: scaleY(0); }
  .js .fo-demo.est-visible .fo-flux__etapes::after { animation: fo-progresse 3s linear 0.3s both; }
  .js .fo-demo:not(.est-visible) .fo-flux__valide { opacity: 0; }
  .js .fo-demo.est-visible .fo-flux__attente { animation: fo-passe 0.65s ease 1.4s both; }
  .js .fo-demo.est-visible .fo-flux__valide { animation: fo-pop 0.45s var(--ease-sortie) 1.95s both; }
}
@media (prefers-reduced-motion: reduce) { .fo-revoir { display: none; } }
@keyframes fo-glisse { from { opacity: 0; translate: 28px 0; } to { opacity: 1; translate: none; } }
@keyframes fo-souligne { from { background-size: 0 2px; } to { background-size: 100% 2px; } }
@keyframes fo-passe { 0% { opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fo-progresse { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes fo-appui { 50% { transform: scale(0.95); filter: brightness(1.08); } }
.fo-flux__etapes li { z-index: 1; }
.fo-flux__etapes::after { z-index: 0; }

/* Bloc « En pratique » sous le prix (Raoudha, 23/10/2026, après la comparaison avec les formations concurrentes) */
.fo-pratique { margin-top: clamp(2rem, 4vw, 3rem); padding-top: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid rgba(224, 189, 142, 0.3); }
.fo-pratique__titre { font-size: clamp(1.35rem, 1.2rem + 0.5vw, 1.6rem); color: var(--creme); }
.fo-pratique__liste { display: grid; gap: var(--e-5) var(--gouttiere); margin: var(--e-5) 0 0; }
@media (min-width: 40em) { .fo-pratique__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .fo-pratique__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fo-pratique__item { display: grid; grid-template-columns: auto 1fr; column-gap: var(--e-3); align-items: start; }
.fo-pratique__picto { grid-row: 1 / span 2; width: 26px; height: 26px; margin-top: 0.1rem; fill: none; stroke: var(--or); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fo-pratique__item dt { font-size: 0.875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--or-clair); }
.fo-pratique__item dd { margin: 0.2rem 0 0; font-size: var(--t-legende); line-height: 1.5; color: var(--creme); }

/* Titres de section un peu plus sobres (règle de Raoudha du 23/10/2026 : H2 ≈ 38 px) */
.fo-h2 { font-size: clamp(1.75rem, 1.45rem + 1.1vw, 2.375rem); }

/* --------------------------------------------------------------------------
   Exemple : une demi-journée de formation (texte validé par Raoudha le 23/10/2026)
   Frise horaire à gauche, aperçu du support remis à droite (pages qui s’ouvrent en éventail, une fois)
   -------------------------------------------------------------------------- */
.fo-exemple__grille { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 60em) { .fo-exemple__grille { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }

.fo-horaire { position: relative; display: grid; gap: var(--e-5); }
.fo-horaire::before { content: ""; position: absolute; left: 5.75rem; top: 0.5rem; bottom: 0.5rem; width: 2px; background: linear-gradient(180deg, var(--or-400), var(--cuivre)); transform-origin: top; }
.fo-horaire li { position: relative; display: grid; grid-template-columns: 5rem 1fr; column-gap: 2rem; align-items: baseline; font-size: var(--t-corps); line-height: 1.55; color: var(--texte); }
.fo-horaire li::before { content: ""; position: absolute; left: calc(5.75rem - 5px); top: 0.55em; width: 12px; height: 12px; border-radius: 50%; background: var(--petrole); box-shadow: 0 0 0 4px var(--creme); }
.fo-horaire__heure { font: 600 1.35rem / 1.2 var(--f-titre); color: var(--or-texte); font-variant-numeric: lining-nums; white-space: nowrap; }
.fo-horaire strong { font-weight: 500; color: var(--petrole); }
.fo-horaire a { color: inherit; text-decoration-color: var(--or-400); text-underline-offset: 3px; }
.fo-horaire__pause p { font-style: italic; color: var(--texte-doux); }
.fo-horaire li.fo-horaire__pause::before { background: var(--creme); box-shadow: inset 0 0 0 2px var(--or-400), 0 0 0 4px var(--creme); }

.fo-livret { display: grid; justify-items: center; gap: var(--e-5); }
.fo-livret__pages { position: relative; width: min(100%, 19rem); aspect-ratio: 3 / 4; margin-top: var(--e-4); }
.fo-livret__page, .fo-livret__couverture { position: absolute; inset: 0; border-radius: 4px; box-shadow: 0 1.5rem 2.5rem -1.25rem rgba(2, 24, 24, 0.45); }
.fo-livret__page { display: flex; flex-direction: column; gap: 0.7rem; padding: 1.6rem 1.4rem; background: #FFFDF8; border: 1px solid #E2DCD0; }
.fo-livret__page--2 { rotate: 9deg; translate: 22% 4%; }
.fo-livret__page--1 { rotate: -6deg; translate: -16% 2%; }
.fo-livret__barre { display: block; width: var(--l); height: 10px; border-radius: 3px; background: var(--petrole); }
.fo-livret__ligne { display: block; width: var(--l); height: 6px; border-radius: 3px; background: #D6CFC1; }
.fo-livret__cadre { display: grid; gap: 0.5rem; padding: 0.7rem; border-radius: 6px; background: rgba(224, 189, 142, 0.22); border-left: 3px solid var(--or); }
.fo-livret__coche { display: block; width: 70%; height: 14px; padding-left: 1.4rem; border-radius: 3px;
  background: linear-gradient(#D6CFC1, #D6CFC1) 1.4rem 50% / calc(100% - 1.4rem) 6px no-repeat,
              url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%230A393A'/%3E%3Cpath d='M5.5 10.4l3 3 6-6.6' fill='none' stroke='%23E0BD8E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 0 50% / 14px 14px no-repeat; }
.fo-livret__couverture {
  display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; padding: 2rem 1.6rem;
  background: linear-gradient(160deg, var(--petrole) 0%, var(--petrole-profond) 100%);
  box-shadow: inset 0 0 0 1px rgba(224, 189, 142, 0.55), inset 0 0 0 7px var(--petrole-profond), inset 0 0 0 8px rgba(224, 189, 142, 0.3), 0 1.75rem 3rem -1.25rem rgba(2, 24, 24, 0.55);
}
.fo-livret__marque { font: 500 0.75rem / 1 var(--f-texte); letter-spacing: 0.2em; text-transform: uppercase; color: var(--or); }
.fo-livret__titre { font: 500 2rem / 1.05 var(--f-titre); color: var(--creme); }
.fo-livret__sous { font: italic 500 1.05rem / 1.2 var(--f-titre); color: var(--or-clair); }
.fo-livret__onglets { position: absolute; right: -10px; top: 18%; display: grid; gap: 6px; }
.fo-livret__onglets i { display: block; width: 10px; height: 34px; border-radius: 0 4px 4px 0; background: var(--or); }
.fo-livret__onglets i:nth-child(2) { background: var(--or-200); }
.fo-livret__onglets i:nth-child(3) { background: #D08A5E; }
.fo-livret__legende { max-width: 24rem; font-size: var(--t-legende); line-height: 1.5; color: var(--texte); text-align: center; }

@media (prefers-reduced-motion: no-preference) {
  .js .fo-horaire:not(.est-visible) li { opacity: 0; }
  .js .fo-horaire.est-visible li { animation: fo-apparait 0.6s var(--ease-sortie) calc(0.2s + var(--i) * 0.3s) both; }
  .js .fo-horaire:not(.est-visible)::before { transform: scaleY(0); }
  .js .fo-horaire.est-visible::before { transition: transform 1.8s var(--ease-douce) 0.1s; transform: scaleY(1); }
  .js .fo-livret:not(.est-visible) .fo-livret__page { rotate: 0deg; translate: 0 0; }
  .fo-livret__page { transition: rotate 0.9s var(--ease-sortie) 0.5s, translate 0.9s var(--ease-sortie) 0.5s; }
}
/* Aperçu du support : l’éventail reste dans le cadre et la légende ne touche pas les pages */
.fo-livret { gap: clamp(2.5rem, 5vw, 3.5rem); }
.fo-livret__pages { width: min(66%, 18rem); }
.fo-horaire { gap: var(--e-6); }

/* Pour qui : une photo en haut de chaque carte (images ChatGPT livrées par Raoudha le 23/10/2026) */
.fo-public { padding: 0; overflow: hidden; gap: 0; }
.fo-public__photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 35%; }
.fo-public__corps { display: grid; align-content: start; gap: var(--e-3); padding: clamp(1.25rem, 2.5vw, 1.75rem); }

/* Pour qui : une photo en haut de chaque carte (images ChatGPT livrées par Raoudha le 23/10/2026) */
.fo-public { padding: 0; overflow: hidden; gap: 0; }
.fo-public__photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 35%; }
.fo-public__corps { display: grid; align-content: start; gap: var(--e-3); padding: clamp(1.25rem, 2.5vw, 1.75rem); }

/* « Même esprit » que Réseaux sociaux, Référencement local et Publicité (règle de Raoudha, 23/10/2026) :
   surtitre au-dessus de chaque titre de section, appel final calé à gauche sur la photo */
.fo-sur { margin-bottom: var(--e-3); }
.fo-sur + .fo-h2, .fo-sur + .titre-section { margin-top: 0; }
.fo-final { text-align: left; }
.fo-final__contenu { justify-items: start; }
.fo-final .fo-h2 { margin-inline: 0; }
.fo-final .fo-actions--centre, .fo-final__contact { justify-content: flex-start; }
.fo-final::before { background: linear-gradient(90deg, rgba(6, 42, 43, 0.95) 0%, rgba(6, 42, 43, 0.88) 45%, rgba(6, 42, 43, 0.45) 75%, rgba(6, 42, 43, 0.25) 100%); }
@media (min-width: 60em) {
  .fo-final > .conteneur { max-width: none; margin-inline: 0; padding-inline: clamp(24px, 4.5vw, 88px); }
  .fo-final__contenu { grid-template-columns: minmax(0, 42rem); }
  .fo-final__fond { object-position: 70% 40%; }
}
@media (max-width: 59.99em) { .fo-final::before { background: rgba(6, 42, 43, 0.86); } }
/* Recontrôle de Pauline (23/10/2026, non bloquant) : texte collé à son intitulé dans « En pratique » ; démo 02 un peu plus courte (≈ 4,6 s) */
.fo-pratique__item { align-content: start; }
.fo-demo--fen { --pas: 0.42s; }