/* ============================================================
   ACCUEIL — feuille propre à la page d'accueil, chargée par elle seule.

   PARTI PRIS, ET CE QU'IL ÉCARTE.

   Ce qui date une page d'entreprise, ce n'est presque jamais la couleur : c'est la
   GRAMMAIRE. Cartes à ombre portée posées sur un fond bleu clair, titres centrés suivis
   d'un sous-titre gris, rangée de trois pictogrammes ronds, boutons à grand rayon — cette
   grammaire-là a dix ans et se reconnaît au premier coup d'œil. Elle est écartée en bloc.

   À la place, une grammaire éditoriale :
     · LE FILET plutôt que l'ombre. La structure se lit par des traits de 1 px, pas par des
       boîtes qui flottent. Rien ne « décolle » de la page ;
     · LA TYPOGRAPHIE porte la hiérarchie. Titre très grand, interlettrage resserré,
       graisse 600 — pas 800 : au-delà, un caractère variable s'épaissit et redevient lourd ;
     · LES CHIFFRES SONT ÉCRITS FIN (graisse 300). Un grand nombre en gras crie ; le même
       nombre en fin impose. C'est le geste qui distingue un rapport annuel d'une réclame ;
     · LE PLEIN BORD. La photographie du bandeau touche le bord de l'écran. Une image
       enfermée dans un cadre arrondi au milieu d'une colonne, c'est la vignette de 2015 ;
     · LE PAPIER. Les bandes alternées sont sur un blanc CHAUD (#f6f4f0), pas sur un gris
       bleuté. Deux points de chaleur suffisent à sortir du registre « logiciel » ;
     · LE BLEU EST RARE. Il ne sert qu'à ce sur quoi on peut cliquer. Partout ailleurs,
       encre et papier. Une couleur qui ne signifie rien n'est plus regardée.

   RESPIRATION. Les blocs sont espacés de 104 px sur grand écran, et les alinéas de section
   sont volontairement inégaux : c'est l'irrégularité maîtrisée qui donne le rythme, une
   grille parfaitement régulière endort.

   VARIABLES PRÉFIXÉES --ac-. Aucune redéfinition des variables de site.css : l'en-tête et
   le pied de page doivent rester rigoureusement identiques au reste du site.
   TOUTES les classes sont préfixées « ac- » : aucune collision possible avec site.css ni
   style.css, quoi qu'on y ajoute plus tard.
   ============================================================ */

:root{
  --ac-encre:#0b2239;          /* identique à --encre : la page et le pied de page s'accordent */
  --ac-encre-2:#16324a;
  --ac-papier:#f6f4f0;         /* blanc CHAUD — la seule addition à la palette */
  --ac-filet:#e4e1db;
  --ac-filet-fort:#cfcbc3;
  --ac-gris:#63696f;
  --ac-gris-clair:#8b9099;
  --ac-bleu:#1054c9;
  --ac-bleu-clair:#7fb0ff;
  --ac-gouttiere:clamp(24px, 5vw, 64px);
}

/* Réglages typographiques valables sur toute la page. `text-wrap:balance` répartit les
   titres sur leurs lignes au lieu de laisser un mot seul en dernière ligne ; ignoré par les
   navigateurs qui ne le connaissent pas. */
.ac h1,.ac h2,.ac h3{text-wrap:balance}
.ac{ -webkit-font-smoothing:antialiased }

/* ---- étiquette de section : numéro + intitulé, filet, majuscules espacées ---------------- */
.ac-label{display:flex;align-items:center;gap:14px;font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ac-gris-clair);margin:0 0 26px}
.ac-label b{color:var(--ac-bleu);font-weight:600;font-variant-numeric:tabular-nums}
.ac-label::after{content:"";flex:1;height:1px;background:var(--ac-filet);max-width:90px}

/* ---- boutons : angles quasi francs (3 px), aplat plein, aucune ombre -------------------- */
.ac-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  background:var(--ac-bleu);color:#fff;border:1px solid var(--ac-bleu);border-radius:3px;
  font:inherit;font-weight:600;font-size:.98rem;padding:16px 30px;cursor:pointer;
  text-decoration:none;transition:background .16s,border-color .16s}
.ac-btn:hover{background:var(--ac-encre);border-color:var(--ac-encre)}
.ac-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .16s}
.ac-btn:hover svg{transform:translateX(3px)}

/* ============================================================
   1. BANDEAU — texte sur papier à gauche, photographie à fond perdu à droite.

   La saisie du SIRET est DANS le bandeau. Un bouton qui renvoie ailleurs coûte un
   chargement de page et une décision de plus avant la seule action que cette page doit
   obtenir. Le champ, lui, ne coûte qu'une frappe.
   ============================================================ */
.ac-hero{border-bottom:1px solid var(--ac-filet);background:#fff}

/* ALIGNEMENT DU TEXTE SUR L'AXE DE L'EN-TÊTE, la colonne voisine filant jusqu'au bord.
   Le retrait est porté par la GRILLE et calculé en `100%`, pas en `100vw` : `100vw` compte
   la largeur de la barre de défilement, ce qui décalerait le titre de quelques pixels par
   rapport au logo — un désaxement discret mais visible, et le genre de détail qui distingue
   une page tenue d'une page approximative. `100%` se résout sur la largeur de contenu,
   exactement comme le conteneur du site. */
.ac-hero-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.78fr);
  align-items:stretch;padding-left:max(24px, calc((100% - 1140px) / 2))}
.ac-hero-txt{padding:clamp(56px,7vw,96px) var(--ac-gouttiere) clamp(56px,7vw,100px) 0;
  display:flex;flex-direction:column;justify-content:center;min-width:0}

.ac-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ac-gris);margin:0 0 24px}
.ac-eyebrow::before{content:"";width:26px;height:1px;background:var(--ac-bleu)}

/* Le titre est l'objet le plus grand de la page, et de loin. C'est la hiérarchie qui rend
   une mise en page contemporaine, pas le nombre d'effets.
   ⚠️ La taille est calée sur la LONGUEUR de l'accroche, pas choisie dans l'absolu. L'ancienne
   (« Vos formations, financées par votre OPCO », 3 lignes courtes coupées à la main) tenait à
   4.5rem. Celle du 2026-08-05 fait deux phrases : à 4.5rem elle occupait sept lignes et
   chassait la barre SIRET sous la ligne de flottaison. 2.8rem la ramène à quatre lignes en
   gardant le titre comme objet dominant. Toute réécriture de l'accroche doit re-mesurer ça. */
.ac-hero h1{font-size:clamp(2.05rem,3.1vw,2.8rem);font-weight:600;letter-spacing:-.03em;
  line-height:1.12;color:var(--ac-encre);margin:0;text-wrap:balance}
.ac-hero h1 em{font-style:normal;color:var(--ac-bleu)}
.ac-hero-chapo{font-size:clamp(1.02rem,1.35vw,1.16rem);color:var(--ac-gris);
  margin:24px 0 0;max-width:44ch;line-height:1.62}

/* ---- la barre de saisie : un seul objet, filet unique, bouton intégré ------------------- */
/* 640 -> 730 px (2026-08-06) : à 640, le bouton prenant 283 px, il ne restait que 355 px au champ
   alors que son texte d'exemple en demande 372 — « …de votre entreprise » était coupé net, sur la
   seule ligne où le visiteur cherche quoi taper. La colonne en offre 679 en desktop, le reste
   vient du repli naturel de la barre. */
.ac-siret{margin:34px 0 0;max-width:730px}
.ac-siret label{display:block;font-size:.78rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ac-gris);margin:0 0 11px}
.ac-siret-bar{display:flex;align-items:stretch;border:1px solid var(--ac-filet-fort);
  border-radius:3px;background:#fff;transition:border-color .16s,box-shadow .16s}
.ac-siret-bar:focus-within{border-color:var(--ac-bleu);
  box-shadow:0 0 0 3px rgba(16,84,201,.14)}
.ac-siret input{flex:1;min-width:0;font:inherit;font-size:1.02rem;padding:17px 18px;
  border:0;background:transparent;color:var(--ac-encre);border-radius:3px}
.ac-siret input::placeholder{color:var(--ac-gris-clair)}
.ac-siret input:focus{outline:none}
.ac-siret .ac-btn{border-radius:0 2px 2px 0;flex:none;border-width:0;padding:16px 26px}
.ac-siret-note{display:flex;flex-wrap:wrap;gap:6px 20px;margin:14px 0 0;font-size:.84rem;
  color:var(--ac-gris)}
.ac-siret-note span{display:inline-flex;align-items:center;gap:7px}
.ac-siret-note svg{width:14px;height:14px;stroke:var(--ac-bleu);fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---- les trois chiffres, sous un filet. Graisse 300 : ils imposent sans crier ----------- */
.ac-chiffres{display:flex;flex-wrap:wrap;gap:0;margin:44px 0 0;border-top:1px solid var(--ac-filet)}
.ac-chiffres div{padding:22px 34px 0 0;margin-right:34px;border-right:1px solid var(--ac-filet)}
.ac-chiffres div:last-child{border-right:0;margin-right:0;padding-right:0}
.ac-chiffres b{display:block;font-size:clamp(2rem,3.4vw,2.9rem);font-weight:300;
  letter-spacing:-.035em;line-height:1;color:var(--ac-encre);font-variant-numeric:tabular-nums}
.ac-chiffres span{display:block;font-size:.83rem;color:var(--ac-gris);margin-top:8px;
  max-width:19ch;line-height:1.45}

/* ---- la photographie : plein bord, sans cadre, sans arrondi ---------------------------- */
.ac-hero-img{position:relative;min-height:100%;background:var(--ac-papier)}
.ac-hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 30%;display:block}

/* ============================================================
   2. BANDE DE CONFIANCE — une seule ligne, sur encre. Elle sépare le bandeau du reste
   comme un filet épais, et porte le seul argument non chiffrable de la page.
   ============================================================ */
.ac-confiance{background:var(--ac-encre);color:rgba(255,255,255,.82)}
.ac-confiance-in{max-width:1140px;margin:0 auto;padding:20px 24px;display:flex;
  flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 40px;
  font-size:.9rem;text-align:center}
.ac-confiance span{display:inline-flex;align-items:center;gap:10px}
.ac-confiance svg{width:16px;height:16px;stroke:var(--ac-bleu-clair);fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ac-confiance b{color:#fff;font-weight:600}

/* ============================================================
   3. LES OPÉRATEURS — noms, pas logos.

   Onze logos d'OPCO alignés laisseraient entendre un partenariat ou un agrément qui
   n'existe pas. Les noms disent exactement la même chose — « nous connaissons leurs
   barèmes » — sans rien revendiquer. Ils sont posés sur un filet, sans pastille : une
   pastille arrondie autour de chaque nom est précisément le tic à éviter.
   ============================================================ */
.ac-opco{background:var(--ac-papier);border-bottom:1px solid var(--ac-filet);
  padding:clamp(44px,5vw,64px) 0}
.ac-opco-in{max-width:1140px;margin:0 auto;padding:0 24px}
.ac-opco-tete{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ac-gris-clair);margin:0 0 24px}
.ac-opco-noms{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--ac-filet-fort);
  padding-top:22px}
.ac-opco-noms span{font-size:clamp(1rem,1.5vw,1.22rem);font-weight:600;letter-spacing:-.02em;
  color:var(--ac-encre-2);padding:7px 0;margin-right:30px;white-space:nowrap}
.ac-opco-noms span.ac-fonds{color:var(--ac-gris-clair);font-weight:500}
.ac-opco-pied{margin:20px 0 0;font-size:.88rem;color:var(--ac-gris);max-width:76ch}

/* ============================================================
   SECTIONS COURANTES
   ============================================================ */
.ac-sect{padding:clamp(64px,8vw,104px) 0}
.ac-sect-papier{background:var(--ac-papier);border-top:1px solid var(--ac-filet);
  border-bottom:1px solid var(--ac-filet)}
.ac-in{max-width:1140px;margin:0 auto;padding:0 24px}
/* PAS de max-width en `ch` ici : l'unité `ch` se calcule sur la taille de police de
   L'ÉLÉMENT qui la porte. Sur ce div, c'est celle du corps de texte (17 px), pas celle du
   titre (50 px) — 22ch valait donc ~190 px et étranglait tous les titres de section sur
   quatre ou cinq lignes. C'est la colonne de la grille qui donne la mesure, elle seule. */
.ac-tete{min-width:0}
.ac-tete h2{font-size:clamp(1.85rem,4vw,3.1rem);font-weight:600;letter-spacing:-.04em;
  line-height:1.04;color:var(--ac-encre);margin:0}
.ac-intro{max-width:52ch;color:var(--ac-gris);font-size:1.04rem;margin:20px 0 0;line-height:1.66}

/* En-tête à deux colonnes : titre à gauche, chapô à droite, alignés sur la même ligne de
   base. Beaucoup plus tenu qu'un titre centré suivi d'un sous-titre. */
.ac-tete-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:var(--ac-gouttiere);align-items:end;margin-bottom:clamp(40px,5vw,64px)}
.ac-tete-2 .ac-intro{margin:0}

/* ============================================================
   4. TROIS ÉTAPES — colonnes décalées.

   Le décalage vertical (la 2e colonne descend, la 3e descend davantage) est ce qui crée
   le rythme. Trois blocs parfaitement alignés se lisent comme un tableau ; décalés, ils se
   lisent comme une progression — ce qu'ils sont.
   ============================================================ */
.ac-etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ac-gouttiere)}
.ac-etape{min-width:0}
.ac-etapes>.ac-etape:nth-child(2){margin-top:40px}
.ac-etapes>.ac-etape:nth-child(3){margin-top:80px}
.ac-etape figure{margin:0 0 22px;overflow:hidden;background:var(--ac-papier)}
.ac-etape img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;
  transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.ac-etape:hover img{transform:scale(1.03)}
.ac-etape-n{display:flex;align-items:center;gap:12px;font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ac-bleu);margin:0 0 10px;
  font-variant-numeric:tabular-nums}
.ac-etape-n::after{content:"";flex:1;height:1px;background:var(--ac-filet)}
.ac-etape h3{font-size:clamp(1.15rem,1.7vw,1.4rem);font-weight:600;letter-spacing:-.028em;
  margin:0 0 10px;color:var(--ac-encre)}
.ac-etape p{color:var(--ac-gris);font-size:.97rem;margin:0;line-height:1.62}

/* ============================================================
   5. SECTEURS — grille éditoriale, sans carte.

   Pas de fond, pas de bordure autour du bloc, pas d'ombre : une image, un filet, du texte.
   Le survol ne fait pas « décoller » la vignette, il agrandit l'image sous un cadre fixe
   et allume le filet. Le mouvement reste dans l'image, jamais dans la mise en page.
   ============================================================ */
.ac-secteurs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3.4vw,48px)}
.ac-secteur{display:block;text-decoration:none;color:inherit;min-width:0}
.ac-secteur figure{margin:0 0 18px;overflow:hidden;background:var(--ac-papier)}
.ac-secteur img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;
  transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.ac-secteur:hover img{transform:scale(1.045)}
.ac-secteur-tete{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  border-top:1px solid var(--ac-filet-fort);padding-top:14px;transition:border-color .16s}
.ac-secteur:hover .ac-secteur-tete{border-color:var(--ac-bleu)}
.ac-secteur h3{font-size:1.1rem;font-weight:600;letter-spacing:-.026em;margin:0;
  color:var(--ac-encre)}
/* Affordance permanente, pas au survol : sur écran tactile il n'y a pas de survol. */
.ac-secteur h3 svg{width:15px;height:15px;margin-left:8px;vertical-align:-1px;
  stroke:var(--ac-bleu);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .2s cubic-bezier(.22,.61,.36,1)}
.ac-secteur:hover h3 svg{transform:translateX(4px)}
.ac-secteur-opco{font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ac-gris-clair);white-space:nowrap;flex:none}
.ac-secteur p{color:var(--ac-gris);font-size:.94rem;margin:9px 0 0;line-height:1.6}

/* ============================================================
   6. ARGUMENTAIRE — énoncé à gauche, trois points à droite, séparés par des filets.
   Aucune illustration : c'est la respiration entre deux blocs d'images.
   ============================================================ */
.ac-argu{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:var(--ac-gouttiere)}
.ac-argu h2{font-size:clamp(1.85rem,4vw,3.1rem);font-weight:600;letter-spacing:-.04em;
  line-height:1.04;color:var(--ac-encre);margin:0}
.ac-argu-liste{display:flex;flex-direction:column}
.ac-argu-item{padding:26px 0;border-top:1px solid var(--ac-filet)}
.ac-argu-item:first-child{padding-top:0;border-top:0}
.ac-argu-item:last-child{padding-bottom:0}
.ac-argu-item h3{font-size:1.08rem;font-weight:600;letter-spacing:-.024em;margin:0 0 8px;
  color:var(--ac-encre)}
.ac-argu-item p{color:var(--ac-gris);font-size:.97rem;margin:0;line-height:1.64}

/* ============================================================
   7. QUESTIONS — <details> natif. Replié sans une ligne de JavaScript, et le texte reste
   dans le HTML pour les moteurs.
   ============================================================ */
.ac-faq{border-top:1px solid var(--ac-filet-fort)}
.ac-faq-item{border-bottom:1px solid var(--ac-filet)}
.ac-faq-item summary{cursor:pointer;list-style:none;position:relative;
  padding:22px 52px 22px 0;font-size:clamp(1rem,1.3vw,1.1rem);font-weight:600;
  letter-spacing:-.02em;color:var(--ac-encre);transition:color .15s}
.ac-faq-item summary:hover{color:var(--ac-bleu)}
.ac-faq-item summary::-webkit-details-marker{display:none}
/* Croix qui devient trait : plus lisible qu'un chevron, et l'état ouvert se lit sans
   comparer avec les voisins. */
.ac-faq-item summary::before,
.ac-faq-item summary::after{content:"";position:absolute;right:8px;top:50%;
  background:var(--ac-bleu);transition:transform .22s ease,opacity .22s ease}
.ac-faq-item summary::before{width:14px;height:1.5px;transform:translateY(-50%)}
.ac-faq-item summary::after{width:1.5px;height:14px;right:14px;transform:translateY(-50%)}
.ac-faq-item[open] summary::after{transform:translateY(-50%) rotate(90deg);opacity:0}
.ac-faq-item p{color:var(--ac-gris);margin:0 0 24px;font-size:1rem;max-width:78ch;
  line-height:1.68}

/* ============================================================
   8. APPEL FINAL — pleine largeur sur encre, la même barre de saisie qu'en haut.
   Un visiteur qui a déroulé toute la page ne doit pas avoir à y remonter.
   ============================================================ */
.ac-final{background:var(--ac-encre);color:#fff;padding:clamp(64px,8vw,110px) 0;
  position:relative;overflow:hidden}
/* Halo très large, unique concession au dégradé de toute la page : un aplat sombre nu
   paraît plat au-delà de 1400 px. */
.ac-final::before{content:"";position:absolute;left:50%;top:-70%;width:900px;height:240%;
  transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(16,84,201,.32),transparent 72%);
  pointer-events:none}
.ac-final .ac-in{position:relative;z-index:1}
.ac-final .ac-eyebrow{color:rgba(255,255,255,.62)}
.ac-final h2{font-size:clamp(1.9rem,4.2vw,3.2rem);font-weight:600;letter-spacing:-.04em;
  line-height:1.04;color:#fff;margin:0;max-width:20ch}
.ac-final-p{color:rgba(255,255,255,.72);font-size:1.04rem;margin:20px 0 0;max-width:50ch;
  line-height:1.66}
.ac-final .ac-siret{margin-top:38px;max-width:660px}
.ac-final .ac-siret label{color:rgba(255,255,255,.7)}
.ac-final .ac-siret-bar{border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.06)}
.ac-final .ac-siret-bar:focus-within{border-color:var(--ac-bleu-clair);
  box-shadow:0 0 0 3px rgba(127,176,255,.22)}
/* ---- LE BOUTON PASSE EN BLANC SUR CETTE SECTION — contraste, pas décoration ----------------
   `.ac-btn` est bleu (--ac-bleu #1054c9). Sur le reste de la page il se détache d'un fond clair ;
   ici il est posé dans une barre à `rgba(255,255,255,.06)` sur marine, soit #1a2f45 en effectif.
   MESURÉ : le bouton contre sa barre valait 2,04:1, contre le fond marine 2,41:1 — sous le seuil
   de 3:1 que le critère 1.4.11 de WCAG 2.1 impose à la LIMITE d'un composant. Le texte blanc du
   bouton, lui, était conforme (6,70:1) : ce n'est pas la lisibilité de l'étiquette qui manquait,
   c'est le bouton lui-même qui se fondait dans l'aplat.
   Après : bouton blanc contre la barre 13,67:1, texte bleu sur blanc 6,70:1.

   VALEURS REPRISES DE `.btn-clair` (site.css), qui existait déjà et n'était posée nulle part —
   quelqu'un avait vu le besoin d'un bouton clair sur fond sombre. Elle appartient à la famille
   `.btn` ; ceci est la famille `.ac-btn`. On ne colle donc PAS la classe ici : on reprend ses
   valeurs, et l'unification des deux familles reste un chantier à part.

   LE SURVOL EST REDÉFINI, sinon il reprend `.ac-btn:hover{background:var(--ac-encre)}` et le
   bouton redevient marine sur marine — soit exactement le défaut qu'on corrige, au survol. */
.ac-final .ac-btn{background:#fff;color:var(--ac-bleu);border-color:#fff}
.ac-final .ac-btn:hover{background:#eef3fd;border-color:#eef3fd;color:var(--ac-encre)}

.ac-final .ac-siret input{color:#fff}
.ac-final .ac-siret input::placeholder{color:rgba(255,255,255,.5)}
.ac-final .ac-siret-note{color:rgba(255,255,255,.62)}
.ac-final .ac-siret-note svg{stroke:var(--ac-bleu-clair)}

/* ============================================================
   APPARITION AU DÉFILEMENT.

   La classe n'est posée QUE si le script s'exécute (voir le bas du gabarit) : sans
   JavaScript, ou si IntersectionObserver manque, tout est visible d'emblée. Un contenu
   invisible par défaut qui dépend d'un script pour apparaître est un contenu qui
   disparaît le jour où le script tombe.
   ============================================================ */
.ac-js .ac-anim{opacity:0;transform:translateY(14px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.ac-js .ac-anim.ac-vu{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .ac-js .ac-anim{opacity:1;transform:none;transition:none}
  .ac-etape img,.ac-secteur img{transition:none}
  .ac-etape:hover img,.ac-secteur:hover img{transform:none}
}

/* ============================================================
   ÉCRANS INTERMÉDIAIRES ET MOBILES
   ============================================================ */
@media(max-width:1080px){
  .ac-secteurs{grid-template-columns:repeat(2,1fr)}
  .ac-etapes>.ac-etape:nth-child(2){margin-top:32px}
  .ac-etapes>.ac-etape:nth-child(3){margin-top:64px}
}
@media(max-width:900px){
  /* Le bandeau passe en pile : la photographie AU-DESSUS du texte. Une image reléguée
     sous un pavé de texte n'est jamais vue sur téléphone.
     ⚠️ MAIS ELLE NE DOIT PAS COÛTER LE CHAMP DE SAISIE (2026-08-06). En 5/4 elle mesurait
     312 px sur un écran de 390, et poussait le bas du bloc SIRET à 1 043 px — sous la ligne
     de flottaison d'un écran de 844 px. Or c'est le SEUL appel à l'action de la page, et
     l'essentiel du trafic publicitaire arrive sur téléphone : une image vue au prix du champ
     est un mauvais échange.
     Le format passe donc en bandeau (2,2/1) ET se plafonne en `vh`, pour que la règle tienne
     aussi sur les petits écrans où c'est la hauteur, pas la largeur, qui manque. Les autres
     retraits sont resserrés dans le même geste : c'est leur cumul qui faisait la différence,
     aucun ne suffisait seul. Mesuré après coup, pas estimé. */
  .ac-hero-grid{grid-template-columns:1fr;padding-left:0}
  .ac-hero-img{order:-1;min-height:0}
  .ac-hero-img img{position:static;aspect-ratio:2.2/1;height:auto;max-height:26vh;object-fit:cover}
  .ac-hero-txt{padding:26px 24px 40px}
  .ac-hero .ac-eyebrow{margin-bottom:13px}
  .ac-hero-chapo{margin-top:14px}
  .ac-hero .ac-siret{margin-top:20px}
}

/* ÉCRANS COURTS (iPhone SE, 360×640…) — mesuré : même après le bandeau ci-dessus, le bouton
   tombait encore à 754 px sur un écran de 667. Il manquait ~90 px, et aucun réglage seul ne
   les donnait. Deux coupes, dans cet ordre de sacrifice assumé :
     · le sur-titre « Plan de développement des compétences » disparaît — c'est un cadrage de
       catégorie, le titre dit déjà de quoi il s'agit (52 px avec sa marge, il passait sur DEUX
       lignes à cette largeur) ;
     · la photographie tombe à 16 vh — visible, mais elle cesse d'être le sujet.
   Elle reste intacte sur les téléphones de taille courante (844, 915 px de haut), qui passaient
   déjà : cette règle ne s'applique QU'AUX écrans où le choix se posait vraiment. */
/* SUR TÉLÉPHONE, LA PHOTOGRAPHIE DISPARAÎT (2026-08-06). Règle posée par le donneur d'ordre :
   le bandeau cookies une fois ramené à 162 px, si le champ n'est toujours pas atteignable sur
   les quatre tailles de référence, l'image saute. Elle sautait. Entre une photo d'illustration
   et le seul appel à l'action de la page sur le canal qui porte la publicité, l'arbitrage n'a
   pas d'autre issue.
   Seuil à 620 px, la coupure « téléphone » déjà utilisée dans ce fichier : les tablettes (768 px
   et au-delà) gardent le bandeau illustré, elles n'ont jamais eu le problème.
   ⚠️ `display:none` n'empêche pas le téléchargement du fichier dans tous les navigateurs, et
   l'image porte `fetchpriority="high"`. Si l'on veut aussi l'économiser sur le réseau mobile,
   il faudra la sortir du HTML côté serveur — c'est un autre geste, pas fait ici. */
@media (max-width:620px){
  .ac-hero-img{display:none}
}

@media (max-width:900px) and (max-height:700px){
  .ac-hero .ac-eyebrow{display:none}
  .ac-hero-img img{max-height:16vh}
  .ac-hero-txt{padding-top:10px}
  .ac-hero-chapo{margin-top:10px}
  /* Dernier palier, pour le 360×640 : même image retirée et bandeau à 162 px, le BOUTON restait
     40 px sous le haut du bandeau (le champ, lui, était déjà atteignable). Le titre et le chapo
     descendent d'un cran — c'est le seul endroit où il restait de la hauteur à prendre sans
     retirer de contenu. Mesuré à chaque cran, jamais estimé. */
  .ac-hero h1{font-size:clamp(1.35rem,5.2vw,1.7rem)}
  .ac-hero-chapo{font-size:.9rem;line-height:1.5}
  .ac-hero .ac-siret label{margin-bottom:6px}
  .ac-tete-2{grid-template-columns:1fr;align-items:start;gap:18px}
  .ac-tete{max-width:none}
  .ac-argu{grid-template-columns:1fr;gap:36px}
  .ac-etapes{grid-template-columns:1fr;gap:44px}
  .ac-etapes>.ac-etape:nth-child(2),
  .ac-etapes>.ac-etape:nth-child(3){margin-top:0}
}
@media(max-width:620px){
  .ac-secteurs{grid-template-columns:1fr}
  /* Même raison qu'en haut de fichier : c'est la longueur de l'accroche qui commande.
     À 9vw les deux phrases mangeaient tout le premier écran du mobile et la barre SIRET
     passait sous la ligne de flottaison — or c'est elle, l'objet de la page. */
  .ac-hero h1{font-size:clamp(1.55rem,6.2vw,1.95rem)}
  /* La barre de saisie se scinde : un champ pleine largeur puis un bouton pleine largeur.
     Un bouton de 26 px de large coincé à droite d'un champ est impraticable au pouce. */
  .ac-siret-bar{flex-direction:column;border:0;background:transparent}
  .ac-siret input{border:1px solid var(--ac-filet-fort);border-radius:3px;width:100%}
  .ac-final .ac-siret input{border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.06)}
  .ac-siret .ac-btn{border-radius:3px;margin-top:10px;width:100%;border-width:1px}
  .ac-chiffres div{padding-right:22px;margin-right:22px}
  .ac-chiffres b{font-size:1.75rem}
  .ac-opco-noms span{margin-right:22px;font-size:1rem}
}


/* Lien vers la FAQ complète, sous l'extrait de l'accueil. L'accueil ne porte qu'une sélection :
   le reste des questions, et le balisage structuré, vivent sur /faq. */
.ac-faq-plus{margin:22px 0 0;text-align:center}
.ac-faq-plus a{font-size:.93rem;font-weight:600;color:var(--bleu);text-decoration:none;
               border-bottom:1px solid transparent;padding-bottom:2px}
.ac-faq-plus a:hover{border-bottom-color:var(--bleu)}

/* ===== Préfixe SIRET / Raison sociale : RETIRÉ le 2026-08-05 =====
   Il occupait un tiers de la barre pour un choix que le visiteur n'a pas à faire, et son état
   actif était un aplat d'encre — hors charte marine. Le champ accepte les deux formes tout seul,
   c'est le placeholder qui le dit désormais. Règles supprimées avec le balisage (.ac-pref,
   .ac-pref-b) : les rétablir sans le balisage ne produirait rien. Version d'avant :
   assets/accueil.css.bak_accroche_20260805. */

/* Ligne de crédibilité : discrète, sous les trois mentions d'engagement. */
.ac-siret-source{margin:8px 0 0;font-size:.79rem;color:var(--ac-gris-clair)}

@media (max-width:560px){
  .ac-siret-bar{flex-wrap:wrap}
  .ac-siret input{width:100%}
}

/* MENTION « CE QU'ON N'AFFICHE PAS » — posée le 2026-08-07 sous la bande de confiance.
   Elle vit DANS la bande sombre, à la même largeur que les trois engagements, mais un cran plus
   bas en contraste : c'est une précision de méthode, pas un quatrième argument. rgba .72 sur
   --ac-encre reste au-dessus de 4,5:1 (mesuré sur le même fond que .ac-confiance, à .82). */
.ac-confiance-note{max-width:1140px;margin:0 auto;padding:0 24px 20px;
                   font-size:.86rem;line-height:1.55;color:rgba(255,255,255,.72)}
@media (max-width:700px){.ac-confiance-note{padding-bottom:18px}}