/* ============================================================
   20/20 La Suite — socle commun (en-tête, pied, boutons, jetons)
   Relevé sur la page « 04 - UI Desktop » du Figma, frames 1440 px.
   ============================================================ */

/* Inter et Caveat sont des sous-ensembles latins (pyftsubset, 08/09) : les fichiers
   complets (352 et 404 Ko) restent à côté pour référence. */
@font-face { font-family:'Satoshi'; src:url('../fonts/Satoshi-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('../fonts/Satoshi-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('../fonts/Satoshi-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('../fonts/Satoshi-900.woff2') format('woff2'); font-weight:900; font-display:swap; }
@font-face { font-family:'Inter';   src:url('../fonts/InterVariable-latin.woff2') format('woff2'); font-weight:100 900; font-display:swap; }
@font-face { font-family:'Caveat';  src:url('../fonts/Caveat-latin.woff2') format('woff2'); font-weight:400 700; font-display:swap; }

:root{
  --nuit:#0B172E;
  --ink:#101828;
  --corps:#0B172E;   /* relevé de la frame : le corps n'est pas grisé */
  --sourdine:#667085;

  --rose:#FE2977;
  --rose-vif:#F857A5;
  --rose-clair:#FF83B4;
  --rose-voile:#FFF1F6;

  --teal:#028D9D;
  --teal-clair:#4FA9A6;
  --teal-voile:#EFF7F6;

  --bleu:#0161D8;
  --bleu-clair:#7B96D4;
  --bleu-voile:#F1F5FD;

  /* Marque 20/20 La Suite — « 03 - Design System », relevé du 01/09/2026 */
  --marque:#325EE2;          /* Main color Deep blue */
  --marque-clair:#746DFF;    /* Secondary color light blue */
  --degrade-marque:linear-gradient(114deg,#746DFF 0%,#325DEA 63.5%);
  --degrade-titre:linear-gradient(90deg,#B568CC,#5F74FA);

  --violet:#B24AD6;

  --ligne:#E9EDF3;
  --brume:#F7F9FC;
  --ombre-carte:0 18px 46px -26px rgba(11,23,46,.28), 0 2px 6px rgba(11,23,46,.05);
  --ombre-pilule:0 10px 24px -14px rgba(11,23,46,.32);

  --large:1308px;   /* 1244 px de contenu + 2 x 32 px : marges de 98 px comme la maquette */
  --r:24px;

  /* Teinte active — surchargée par les classes .theme-* */
  --accent:#FE2977;
  --accent-vif:#F857A5;
  --accent-clair:#FF83B4;
  --accent-voile:#FFF1F6;
  /* Surtitres de section : la maquette les dégrade de la couleur d'univers vers le
     bleu, à l'horizontale, la couleur d'origine tenant le premier tiers. */
  --surtitre-degrade:linear-gradient(90deg,#FF0066 0%,#FF0066 38%,#3D65E0 100%);
}

.theme-rose{ --accent:#FE2977; --accent-vif:#F857A5; --accent-clair:#FF83B4; --accent-voile:#FFF1F6;
  --degrade-accent:linear-gradient(108deg,#F857A5 0%,#FE2977 63%);
  --fond-heros:linear-gradient(33deg,#FFBEAE 0%,#FF93AA 22%,#F7A6DA 66%,#F0D6F6 98%); 
  --surtitre-degrade:linear-gradient(90deg,#FF0066 0%,#FF0066 38%,#3D65E0 100%); }
.theme-teal{ --accent:#028D9D; --accent-vif:#27BBC8; --accent-clair:#4FA9A6; --accent-voile:#EFF7F6;
  --degrade-accent:linear-gradient(102deg,#27BBC8 0%,#028D9D 63%);
  --fond-heros:linear-gradient(33deg,#5FB7FF 0%,#61C0E6 22%,#69DDED 66%,#AEEFE5 98%); 
  --surtitre-degrade:linear-gradient(90deg,#028D9D 0%,#028D9D 38%,#3D65E0 100%); }
.theme-bleu{ --accent:#0161D8; --accent-vif:#327EF9; --accent-clair:#7B96D4; --accent-voile:#F1F5FD;
  --degrade-accent:linear-gradient(104deg,#327EF9 0%,#0161D8 63%);
  --fond-heros:linear-gradient(33deg,#CBB6FF 0%,#98AEFB 22%,#8CC3FF 66%,#B9DDFF 98%); 
  --surtitre-degrade:linear-gradient(90deg,#0161D8 0%,#0161D8 38%,#3D65E0 100%); }
.theme-nuit{ --accent:#0B172E; --accent-vif:#16264A; --accent-clair:#5B6884; --accent-voile:#F1F3F8; 
  --surtitre-degrade:linear-gradient(90deg,#FF57A0 0%,#FF57A0 38%,#5F74FA 100%);  --degrade-accent:linear-gradient(106deg,#746DFF 0%,#325DEA 63%); }
/* Couleurs de la marque 20/20 La Suite elle-même (hub « Vos métiers »). */
/* CortexIA : dégradé violet de sa frame, malgré le thème bleu de la page. */
.gabarit-cortexia{ --degrade-accent:linear-gradient(144deg,#CFBCE8 0%,#7300C7 63%); }
.theme-marque{ --accent:#325EE2; --accent-vif:#746DFF; --accent-clair:#8FA0F0; --accent-voile:#EEF1FD;
  --degrade-accent:var(--degrade-marque); 
}
/* Le hub « Vos métiers » garde l'aplat de la marque : la frame ne le dégrade pas. */
.theme-marque .surtitre{ background-image:none; color:#325EE2; }

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:16px; line-height:1.6; color:var(--corps); background:#fff;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{ font-family:'Satoshi','Inter',sans-serif; color:var(--ink); line-height:1.1; letter-spacing:-.02em; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
/* 10/10 (SEO, maillage interne) : lien posé sur un mot du texte, même dessin que « Voir la solution associée ». */
a.lien-texte{ color:var(--accent); font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
ul{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

.boite{ max-width:var(--large); margin:0 auto; padding:0 32px; }
.sr-seul{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.centre{ text-align:center; }
.centre .surtitre{ text-align:center; }

.surtitre{
  font-family:'Satoshi',sans-serif;
  font-size:15px; font-weight:700; letter-spacing:.085em; text-transform:uppercase;
  color:var(--accent); margin-bottom:20px;
}
/* inline-block : sans lui le dégradé s'étale sur toute la largeur du bloc et le
   texte, court, ne voit que sa première couleur. */
@supports (background-clip: text) or (-webkit-background-clip: text){
  .surtitre{
    display:inline-block;
    background-image:var(--surtitre-degrade);
    background-clip:text; -webkit-background-clip:text;
    color:transparent;
  }
}
.h2{ font-size:clamp(26px,2.3vw,32px); font-weight:700; line-height:1.194; }
.accent{ color:var(--accent); }
.accent-clair{ color:var(--accent-clair); }
.degrade{
  background-image:linear-gradient(97deg,var(--accent) 0%,var(--violet) 92%);
  background-clip:text; -webkit-background-clip:text; color:transparent;
}
/* Dégradé de titre de la marque (mauve → bleu), indépendant de l'univers. */
.degrade-titre{
  background-image:var(--degrade-titre);
  background-clip:text; -webkit-background-clip:text; color:transparent;
}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:'Satoshi',sans-serif; font-weight:700; font-size:15px; line-height:1;
  padding:16px 30px; border-radius:999px; border:1.6px solid transparent;
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
  white-space:nowrap; cursor:pointer;
}
.btn:hover{ transform:translateY(-1px); }
.btn-accent{ background:var(--degrade-accent,var(--accent)); color:#fff; box-shadow:var(--ombre-pilule); }
.btn-accent:hover{ background:var(--degrade-accent,var(--accent-vif)); filter:brightness(1.07); }
/* ↑ 28/09 (Feedback 1, « pourquoi ça fait un flash quand je survole ce CTA ? ») : le
   survol remplaçait le dégradé par un aplat ; un dégradé ne s'anime pas, le fond
   repartait du transparent et le bouton blanchissait un instant. Le dégradé reste,
   seul l'éclat change. */
.btn-nuit{ background:var(--nuit); color:#fff; border-color:var(--nuit); }
.btn-nuit:hover{ background:#16264a; }
/* La frame met ce bouton en dégradé violet-bleu sur le héros de l'accueil et sur
   toute la page Candidats ; ailleurs — le formulaire de contact — il reste un
   aplat #1A2232, proche de notre nuit. */
.gabarit-candidats .btn-nuit{
  background:linear-gradient(106deg,#746DFF 0%,#325DEA 63%); border-color:transparent;
}
.gabarit-candidats .btn-nuit:hover{ background:linear-gradient(106deg,#8A84FF 0%,#3D69F0 63%); }
.btn-contour{ background:#fff; color:var(--ink); border-color:#D8DEE8; }
.btn-contour:hover{ border-color:var(--nuit); }
/* Appels à l'action des héros : les frames des pages solutions et métiers
   emploient une pilule asymétrique de 54 px (rayon 27 à gauche, 6 à droite)
   et non une pilule pleine.
   ⛔ L'accueil fait exception : son bouton est à rayon 24 uniforme (relevé du
   22/09, Bouton Type 1 de la frame 728:2469). Le relevé du 02/09 lui avait
   appliqué la forme asymétrique des autres pages. */
.sol-heros .actions .btn,
.met-heros .actions .btn{
  height:54px; padding:0 20px; border-radius:27px 6px 6px 27px;
  font-size:14px; line-height:18.9px;
}

/* Les trois univers gardent leur dégradé propre, quel que soit le thème de la page. */
.btn-rose{ background:linear-gradient(108deg,#F857A5 0%,#FE2977 63%); color:#fff; }
.btn-teal{ background:linear-gradient(102deg,#27BBC8 0%,#028D9D 63%); color:#fff; }
.btn-bleu{ background:linear-gradient(104deg,#327EF9 0%,#0161D8 63%); color:#fff; }

/* ---------- En-tête ----------
   Relevé sur la frame « HEADER » du Figma (630-2947), 1440 x 150 px, marges de
   80 px. Le logo texte sur deux lignes a été remplacé le 01/09/2026 par le logo
   graphique livré par la cliente (Drive « Logos & police »). */
.entete{
  position:sticky; z-index:70; background:#fff;
  /* Collé à -66 px : une fois la page défilée, seule la bande 66 → 150 px de
     l'en-tête (84 px) reste visible. La hauteur ne bouge pas, la page ne saute pas. */
  top:-66px;
  transition:background .25s ease, box-shadow .25s ease;
}
.entete-carte{
  max-width:1440px; margin:0 auto; height:150px;
  padding:0 80px; display:flex; align-items:flex-start;
}
.entete .logo{ flex:none; margin-top:50px; line-height:0; transition:margin-top .25s ease; }
.entete .logo img{ display:block; width:76.86px; height:80px; transition:width .25s ease, height .25s ease; }
.entete .logo .logo-blanc{ display:none; }

/* Variante claire : sur les pages à héros coloré (CortexIA, pages solution),
   l'en-tête de la maquette est transparent, logo et menu en blanc. */
/* L'en-tête reste collant ici aussi : seul le fond est transparent en haut de page. */
.entete-clair .entete{ background:transparent; }
.entete-clair main{ margin-top:-150px; }
.entete-clair .entete .logo .logo-noir{ display:none; }
.entete-clair .entete .logo .logo-blanc{ display:block; }
.entete-clair .entete .nav .lien{ color:#fff; font-weight:900; }
.entete-clair .entete .nav .lien:hover{ background:rgba(255,255,255,.18); color:#fff; }
.entete-clair .entete .btn-contour-degrade{
  color:#fff; background:transparent; background-image:none;
  border-color:rgba(255,255,255,.85);
}
/* Sur les héros solution, le bouton reprend la teinte de l'univers. */
.entete-clair.theme-rose .entete .btn-contour-degrade,
.entete-clair.theme-teal .entete .btn-contour-degrade,
.entete-clair.theme-bleu .entete .btn-contour-degrade{ color:var(--accent); border-color:var(--accent); }
.entete-clair.theme-rose .entete .btn-contour-degrade:hover,
.entete-clair.theme-teal .entete .btn-contour-degrade:hover,
.entete-clair.theme-bleu .entete .btn-contour-degrade:hover{ background:rgba(255,255,255,.55); }
.entete-clair .entete .btn-contour-degrade:hover{ background:rgba(255,255,255,.16); }
.entete-clair .sousmenu a{ color:var(--corps); }
.entete-droite{ margin-left:auto; margin-top:40px; display:flex; align-items:center; gap:36px; transition:margin-top .25s ease; }

.nav{ display:flex; align-items:center; gap:12px; }
.nav .item{ position:relative; }
.nav .lien{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Satoshi',sans-serif; font-weight:700; font-size:16px; line-height:21.6px;
  color:#111111; padding:14px 18px; border-radius:24px;
  transition:background .15s ease, color .15s ease;
}
.nav .lien:hover{ background:var(--brume); color:var(--accent); }
.caret{
  width:7px; height:7px; border-right:1.7px solid currentColor; border-bottom:1.7px solid currentColor;
  transform:rotate(45deg) translateY(-2px); display:inline-block;
}
.sousmenu{
  position:absolute; top:100%; left:0; min-width:300px;
  background:#fff; border:1px solid var(--ligne); border-radius:18px;
  box-shadow:var(--ombre-carte); padding:10px; display:none;
}
.nav .item:hover .sousmenu{ display:block; }
.sousmenu a{ display:flex; align-items:center; gap:12px; padding:11px 15px; border-radius:12px; font-size:14.5px; color:var(--corps); }
.sousmenu a:hover{ background:var(--brume); color:var(--ink); }
/* Pictogramme d'univers devant chaque solution (repris des cartes de l'accueil). */
.sousmenu .picto{
  flex:none; width:26px; height:26px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
}
.sousmenu .picto svg{ width:14px; height:14px; display:block; }
/* Les symboles de marque remplacent les pictogrammes dessinés. Ils portent déjà
   leur couleur et leur ombre : la pastille teintée est retirée sous eux, sinon le
   logo paraît collé sur une vignette.
   ⛔ Il faut trois classes pour l'emporter sur .sousmenu .picto.rose — une règle
   en .sousmenu .picto:has(img) est plus faible et resterait sans effet. */
.sousmenu .picto.rose:has(img),
.sousmenu .picto.teal:has(img),
.sousmenu .picto.bleu:has(img){ background:none; }
.sousmenu .picto img{ width:30px; height:30px; display:block; object-fit:contain; }
.sousmenu .picto.rose{ background:var(--rose-voile); color:#FE2977; }
.sousmenu .picto.teal{ background:var(--teal-voile); color:#028D9D; }
.sousmenu .picto.bleu{ background:var(--bleu-voile); color:#0161D8; }

/* Bouton « Nous contacter » : pilule à contour dégradé (Bouton Type 2).
   Nom distinct de .btn-degrade, déjà utilisé par accueil.css. */
.entete .btn-contour-degrade{
  min-width:152px; height:49px; padding:13px 24px; border-radius:24px;
  border:2px solid transparent;
  font-family:'Satoshi',sans-serif; font-weight:700; font-size:14px; line-height:18.9px;
  color:var(--marque); background:#fff;
  background-image:linear-gradient(#fff,#fff), var(--degrade-marque);
  background-origin:border-box; background-clip:padding-box,border-box;
  box-shadow:none;
}
.entete .btn-contour-degrade:hover{ color:#fff; background-image:var(--degrade-marque), var(--degrade-marque); }
.entete .btn{ flex:none; }

/* Version compacte au défilement : commun.js pose .vv-defile sur <html>
   dès que la page a défilé de 80 px. Le logo (56 px) et le menu se replacent
   dans la bande visible (66 → 150 px), le fond redevient blanc partout. */
.vv-defile .entete{ background:#fff; box-shadow:0 6px 24px -16px rgba(11,23,46,.28); }
.vv-defile .entete .logo{ margin-top:80px; }
.vv-defile .entete .logo img{ width:53.8px; height:56px; }
.vv-defile .entete-droite{ margin-top:84px; }
/* Pages à en-tête clair : on revient au logo noir, aux liens sombres et au
   bouton contour dégradé par défaut. */
.vv-defile .entete-clair .entete .logo .logo-noir{ display:block; }
.vv-defile .entete-clair .entete .logo .logo-blanc{ display:none; }
.vv-defile .entete-clair .entete .nav .lien{ color:#111111; font-weight:700; }
.vv-defile .entete-clair .entete .nav .lien:hover{ background:var(--brume); color:var(--accent); }
.vv-defile .entete-clair .entete .btn-contour-degrade{
  color:var(--marque); background:#fff;
  background-image:linear-gradient(#fff,#fff), var(--degrade-marque);
  /* Le raccourci background: de la variante claire remet le découpage à
     border-box : sans ces deux lignes, le blanc recouvre le contour dégradé. */
  background-origin:border-box; background-clip:padding-box,border-box;
  border-color:transparent;
}
.vv-defile .entete-clair .entete .btn-contour-degrade:hover{
  color:#fff; background-image:var(--degrade-marque), var(--degrade-marque);
}

/* Menu mobile : ergonomie simplifiée, décision du point du 25/08 */
.burger{
  display:none; margin-left:auto; width:44px; height:44px; border-radius:12px;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.burger i{ display:block; width:22px; height:2px; background:var(--nuit); border-radius:2px; }

/* ---------- Pied de page ---------- */
.pied{ padding:38px 0 54px; background:#fff; border-top:1px solid var(--ligne); }
.pied .boite{
  display:grid; grid-template-columns:1.33fr 1.22fr .95fr .95fr; gap:0; align-items:start;
  padding-left:88px; padding-right:72px;
}
.pied .logo{ margin-bottom:26px; }
.pied .logo img{ display:block; width:77px; height:80px; object-fit:contain; }
.pied .sociaux{ display:flex; gap:14px; }
/* La frame pose ces deux icônes cerclées, dessin sombre sur fond clair
   (jam:linkedin-circle et jam:youtube-circle, 37 px), et non en pastille pleine. */
.pied .sociaux a{
  width:37px; height:37px; border-radius:50%; background:transparent;
  /* Dessin noir à 50 % dans la frame (jam:*-circle), pas en nuit plein. */
  border:1.6px solid rgba(0,0,0,.5); color:rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center;
  transition:background-color .15s ease, color .15s ease;
}
.pied .sociaux a:hover{ background:var(--nuit); color:#fff; }
.pied .sociaux svg{ width:19px; height:19px; }
.pied ul li{ padding:7px 0; }
.pied ul a{ font-size:15px; color:var(--corps); }
.pied ul a:hover{ color:var(--accent); }
.pied .droite{ display:flex; flex-direction:column; align-items:flex-end; gap:14px; text-align:right; }
.pied .droite a.discret{ font-size:14px; color:#0B172E; } /* encre, comme la frame (retour du 19/09) */
.pied .droite a.discret:hover{ color:var(--ink); }

/* ---------- Retour en haut de page (Feedback 1 de Sarah, 28/09) ---------- */
.haut-page{
  position:fixed; right:28px; bottom:28px; z-index:60;
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--marque); color:#fff;
  box-shadow:0 10px 24px -10px rgba(50,94,226,.55);
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, background-color .15s ease;
}
.haut-page svg{ width:20px; height:20px; }
.haut-page.visible{ opacity:1; transform:none; pointer-events:auto; }
.haut-page:hover{ background:#2A50C4; }
@media (max-width:640px){ .haut-page{ right:16px; bottom:16px; width:44px; height:44px; } }

/* ---------- Accordéons FAQ ---------- */
.faq-liste{ max-width:880px; margin:0 auto; display:flex; flex-direction:column; gap:24px; }
.faq-item{
  background:linear-gradient(180deg,#FBFCFE 0%,#F1F4F9 100%);
  border-radius:18px; box-shadow:0 12px 28px -22px rgba(11,23,46,.35);
}
.faq-item > button{
  width:100%; display:flex; align-items:center; gap:24px; justify-content:space-between;
  padding:18px 42px 18px 44px; min-height:88px; text-align:left;
}
.faq-item .q{ font-family:'Satoshi',sans-serif; font-weight:700; font-size:21px; color:var(--ink); }
.faq-item .plus{
  flex:none; width:51px; height:51px; border-radius:50%;
  background:color-mix(in srgb, var(--accent) 20%, #fff); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-size:31px; font-weight:700; line-height:1;
  transition:transform .2s ease;
}
.faq-item[data-ouvert="1"] .plus{ transform:rotate(45deg); }
/* Retour de Sarah du 16/09 : « alignement à gauche pour le texte réponse ».
   La section FAQ est centrée, la réponse en héritait. */
.faq-item .r{ display:none; padding:0 44px 28px; font-size:16.5px; color:var(--corps); text-align:left; }
.faq-item .r p + p{ margin-top:14px; }
.faq-item[data-ouvert="1"] .r{ display:block; }

/* ---------- Cartes ressources ---------- */
.ressources-grille{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.carte-ressource{
  border-radius:20px; overflow:hidden; background:#fff;
  box-shadow:var(--ombre-carte); display:flex; flex-direction:column;
}
.carte-ressource .visuel{
  aspect-ratio:344/155; background:var(--accent-voile) center/cover no-repeat;
}
.carte-ressource .corps{ padding:22px 24px 26px; display:flex; flex-direction:column; gap:12px; flex:1; }
.carte-ressource .duree{ font-size:13.5px; color:#667085; } /* #9AA4B2 ne passait pas le contraste AA (2,6:1) */
.carte-ressource b{ font-family:'Satoshi',sans-serif; font-size:16px; font-weight:700; color:var(--ink); line-height:1.3; }
.carte-ressource .extrait{ font-size:14px; color:#667085; }
.carte-ressource .lire{
  margin-top:auto; font-family:'Satoshi',sans-serif; font-weight:700; font-size:14.5px;
  color:var(--accent); display:inline-flex; align-items:center; gap:8px;
}
.carte-ressource .lire::after{ content:"\2192"; }

/* ---------- Lien fléché des cartes « cas client » ----------
   La carte entière est un lien ; ce libellé en est l'indice visuel. */
.lire-cas{
  display:inline-flex; align-items:center; gap:8px; margin-top:22px;
  font-family:'Satoshi',sans-serif; font-weight:700; font-size:15px; color:var(--accent);
}
.lire-cas::after{ content:"\2192"; display:inline-block; transition:transform .2s ease; }

/* ---------- Bande d'appel finale ---------- */
.appel{ padding:20px 0 20px; }
.carte-appel{
  position:relative; overflow:hidden; margin:0 -25px;
  display:grid; grid-template-columns:250px minmax(0,1fr);
  gap:132px; align-items:center;
  background:linear-gradient(103deg,var(--accent-voile) 0%,#FFFFFF 58%,var(--accent-voile) 100%);
  border-radius:26px; padding:38px 60px 38px 120px;
}
.carte-appel .vague{ position:absolute; inset:0 0 0 52%; z-index:0; opacity:.9; }
.carte-appel > *{ position:relative; z-index:1; }
.carte-appel .visuel{
  aspect-ratio:1; border-radius:50%; background:#fff center/72% no-repeat;
  display:flex; align-items:center; justify-content:center;
}
.carte-appel .visuel svg,
.carte-appel .visuel img{ width:100%; height:100%; display:block; }
.carte-appel h2{ font-size:clamp(24px,2.3vw,32px); font-weight:700; line-height:1.194; margin:6px 0 16px; }
/* :not(.surtitre) sans quoi cette règle écrase le dégradé du surtitre. */
.carte-appel p:not(.surtitre){ font-size:20px; color:var(--corps); margin-bottom:26px; max-width:34em; }
.carte-appel .btn{ font-size:17px; padding:20px 40px; }

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .nav{ display:none; }
  .nav.ouvert{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; left:0; right:0; top:100%;
    background:#fff; padding:14px 22px 22px; border-radius:0 0 22px 22px;
    box-shadow:var(--ombre-carte); margin:0;
  }
  .nav.ouvert .sousmenu{ position:static; display:block; box-shadow:none; border:0; padding:0 0 0 14px; min-width:0; }
  .burger{ display:flex; }
  /* Filet de sécurité mobile : un titre en 72 px impose une largeur minimale
     à sa cellule de grille et fait déborder la page. */
  h1,h2,h3{ overflow-wrap:break-word; }
  .entete-clair main{ margin-top:0; }
  .entete-clair .entete{ background:#fff; }
  .entete-clair .entete .logo .logo-noir{ display:block; }
  .entete-clair .entete .logo .logo-blanc{ display:none; }
  .entete-clair .entete .nav .lien{ color:#111111; }
  .entete-carte{ padding:14px 22px; height:auto; min-height:76px; position:relative; align-items:center; }
  /* Sous 1080 px l'en-tête fait 76 px : il se colle en haut, sans bande cachée. */
  .entete{ top:0; }
  .entete .logo,
  .vv-defile .entete .logo{ margin-top:0; }
  .entete .logo img,
  .vv-defile .entete .logo img{ width:48px; height:50px; }
  /* Le bouton reste visible en version compacte, à gauche du menu : c'est le
     seul appel à l'action de l'en-tête mobile. */
  .entete-droite,
  .vv-defile .entete-droite{ margin-left:auto; margin-top:0; gap:0; order:2; }
  .burger{ order:3; margin-left:6px; }
  .entete .btn-contour-degrade{
    min-width:0; height:40px; padding:0 14px; font-size:13px; border-width:1.5px;
  }
  .ressources-grille{ grid-template-columns:1fr; }
  /* Cibles tactiles : les liens texte du pied et des cartes gagnent une zone d'au moins 44 px. */
  .pied ul a, .pied .droite a.discret, .carte-ressource .lire, .offre .plus-services{ display:inline-block; padding:10px 0; }
  .pied .boite{ grid-template-columns:1fr 1fr; gap:32px; padding-left:32px; padding-right:32px; }
  .pied .droite{ align-items:flex-start; text-align:left; }
  .carte-appel{ grid-template-columns:1fr; gap:28px; padding:36px 26px; margin:0; }
  .carte-appel .vague{ display:none; }
  .carte-appel .visuel{ max-width:220px; }
}
@media (max-width:640px){
  .boite{ padding:0 20px; }
  .pied .boite{ grid-template-columns:1fr; }
  .btn{ padding:14px 24px; font-size:14.5px; }
}

/* ---------- Blocs FAQ et « À lire aussi » partagés ---------- */
.sol-faq{ padding:80px 0 84px; }
.sol-faq h2{ font-size:clamp(24px,2.3vw,32px); font-weight:700; line-height:1.225; margin-bottom:44px; }
.sol-lire{ padding:66px 0 40px; text-align:center; }
.sol-lire h2{ font-size:clamp(24px,2.3vw,32px); font-weight:700; line-height:1.225; margin-bottom:44px; }
.sol-lire .ressources-grille{ text-align:left; }

/* Apparition au défilement (posée par commun.js, jamais sans lui).
   Une fois .vv-vu posée, plus aucune transformation : les accordéons FAQ
   s'ouvrent normalement. */
.vv-apparition{ opacity:0; transform:translateY(18px); }
.vv-apparition.vv-vu{
  opacity:1; transform:none;
  transition:opacity .55s ease, transform .55s ease;
}
/* Variante « depuis la gauche » : data-apparition="gauche" dans le gabarit. */
.vv-apparition-gauche{ opacity:0; transform:translateX(-70px); }
.vv-apparition-gauche.vv-vu{
  opacity:1; transform:none;
  transition:opacity .6s ease, transform .6s ease;
}
/* Variante « zoom » : l'image arrive légèrement agrandie et se pose (data-apparition="zoom"). */
.vv-apparition-zoom{ transform:scale(1.10); transform-origin:50% 50%; }
.vv-apparition-zoom.vv-vu{
  transform:scale(1);
  transition:transform 1.6s cubic-bezier(.2,.7,.2,1);
}

/* Cibles tactiles : la maquette mobile de 20/20 pose « bouton 9 mm en taille,
   taux d'erreur 0.5 % », soit ~34 px de haut. Les liens posés dans un
   paragraphe gardent leur hauteur de texte — les élargir casserait
   l'interlignage — mais les liens d'action autonomes doivent l'atteindre. */
@media (max-width:700px){
  .confiance .lien-suite a,
  .cand-lien{
    display:inline-flex; align-items:center; min-height:34px;
  }
}

/* Pied de page, retour du 19/09 (planches 12-13 et 22-23) : le bouton est un
   contour bleu (Bouton Type 2 des frames Contact et Métiers, 152 × 49, rayon 24,
   texte #325EE2) et les liens légaux sont en encre, pas en gris. */
.pied .btn-contour-bleu{ background:#fff; color:#325EE2; border-color:#325EE2; height:49px; padding:0 24px; border-radius:24px; font-size:14px; }
.pied .btn-contour-bleu:hover{ background:#EEF1FD; }
.pied .discret{ color:#0B172E; }

/* ============ Pied de page unifié (23/09, capture Figma de Sylvain) ============
   Le même pied sur toutes les pages : logo à 112, liens à 505 et 867, colonne de
   droite alignée à GAUCHE à 1160 (« Nous contacter » puis les deux mentions),
   au lieu d'une colonne calée à droite qui changeait de place d'une page à l'autre.
   Placé ici, dans la feuille commune, pour valoir sur toutes les pages.
   ⛔ Ciblé sur footer.pied : les cartes de l’accueil portent aussi une classe .pied
   (bandeau du bas), et la première version leur imposait 60 px de padding-bas. */
@media (min-width:1100px){
  html body[class] footer.pied{ padding:38px 0 60px; border-top:0; }
  /* Colonnes bornées, pas fixes : en 393 / 362 / 293 / 180 px le pied faisait 1274 px
     et élargissait la page sous cette largeur (mesuré le 28/09 à 1229 px). Au-delà
     de 1274 px le rendu est identique. */
  html body[class] footer.pied .boite{ max-width:1308px; grid-template-columns:minmax(0,393px) minmax(0,362px) minmax(0,293px) minmax(160px,1fr); padding:0 0 0 46px; gap:0; }
  html body[class] footer.pied .logo{ margin:32px 0 26px; }
  html body[class] footer.pied ul{ padding-top:52px; }
  html body[class] footer.pied .droite{ align-items:flex-start; text-align:left; padding-top:31px; gap:14px; }
  html body[class] footer.pied .btn-contour-bleu{ height:49px; padding:0 24px; }
}

/* Déplacé de pages.css le 23/09 : les pages métiers ne chargent que commun.css et metier.css. */
/* Visuel d'anneaux (frame 753:3102) : l'export porte un disque clair opaque autour des
   anneaux ; en mode « multiplier », le clair disparaît sur le fond de la carte et seuls
   les anneaux restent, posés sur l'ellipse teal de la frame (299:1499). */
.carte-appel .visuel img[src*="rond-anneaux"]{ mix-blend-mode:multiply; }

/* Fond du visuel d'appel, retour de Sylvain (« retirer le fond blanc ») : dans les frames
   l'ellipse derrière le visuel est la couleur de l'univers à 16 % (299:1499 : #07908C à
   0,16 ; relevé rose #FCD0E0, teal #D0E8E8, bleu #DCE4F4), jamais un disque blanc. */
body .appel .carte-appel .visuel{ background:rgba(254,41,119,.16); border-radius:50%; }
body.theme-teal .appel .carte-appel .visuel{ background:rgba(7,144,140,.16); }
body.theme-bleu .appel .carte-appel .visuel{ background:rgba(1,97,216,.16); }
body.gabarit-candidats .appel .carte-appel .visuel{ background:rgba(116,109,255,.2); }
.gabarit-candidats .cd-illu{ background:transparent; }

/* Boutons en dégradé : la bordure transparente de 1,5 px laissait voir, sur le bord
   gauche, la fin sombre du dégradé répété sous la bordure (Sarah, Feedback 1 du
   28/09 : « barre à gauche pourquoi ? »). Le dégradé part désormais du bord
   extérieur. !important : chaque variante réécrit `background` en raccourci, ce
   qui remet l'origine à padding-box. */
.btn{ background-origin:border-box !important; }

/* Bouton « + » des questions fréquentes : croix dessinée au lieu du caractère,
   que la police plaçait un peu bas dans son rond (Sarah, Feedback 1 du 28/09,
   page Candidats : « croix pas centrée »). Même composant sur toutes les pages. */
.faq-item .plus{ position:relative; font-size:0 !important; }
.faq-item .plus::before,
.faq-item .plus::after{
  content:""; position:absolute; left:50%; top:50%; width:18px; height:3.5px;
  border-radius:2px; background:currentColor; transform:translate(-50%,-50%);
}
.faq-item .plus::after{ transform:translate(-50%,-50%) rotate(90deg); }

/* ============================================================
   Boutons en pilule sur tout le site (Sarah, Feedback 1 du 28/09 : « arrondir
   tous les boutons comme c'est le cas sur la page Concours examens », « CTA rond
   partout » ; tickets #44, #51, #61, #70). Référence : « Trouver la solution
   adaptée » de la page Concours, arrondi égal à la demi-hauteur. Les feuilles de
   page posaient 24 px (relevé des maquettes) avec des sélecteurs plus forts, d'où
   le !important. Exception : « S'abonner » de l'infolettre, collé à son champ
   e-mail, garde son côté gauche droit.
   ============================================================ */
.btn:not(.infolettre .btn),
.onglets button,
.ia-credits .btn-plan,
.btn-plan{ border-radius:999px !important; }

/* 28/09 · Bande d'appel sur mobile : le bouton ne se replie pas (white-space:nowrap) et
   imposait sa largeur à la colonne unique — « Échanger avec un expert concours » faisait
   395 px sur un écran de 390, texte et bouton rognés par la carte. */
@media (max-width:1080px){
  .carte-appel{ grid-template-columns:minmax(0,1fr); }
  .carte-appel > *{ min-width:0; }
}
@media (max-width:640px){
  .carte-appel .btn{ white-space:normal; text-align:center; line-height:1.25; max-width:100%; }
}

/* 28/09 · Entre 1 100 et 1 279 px, « Nos solutions », « Générer vos sujets d'examens » et
   « Vos métiers » passaient sur deux lignes. Les liens restent sur une ligne et les
   espacements se resserrent dans cette plage ; au-delà, rien ne change. */
.nav .lien{ white-space:nowrap; }
@media (min-width:1100px) and (max-width:1279px){
  .entete .nav{ gap:2px; }
  .entete .nav .lien{ padding-left:11px; padding-right:11px; font-size:15px; }
  .entete .entete-droite{ gap:18px; }
  body.gabarit-accueil .entete-carte{ padding-left:48px; padding-right:40px; }
}

/* 28/09 · Entre 1 081 et 1 099 px, l'en-tête n'était ni compact (règles jusqu'à 1 080) ni
   resserré (version bureau dès 1 100) : le menu complet élargissait la page à 1 137-1 159 px,
   et l'accueil n'affichait ni menu ni burger. L'en-tête compact avec burger vaut désormais
   jusqu'à 1 099,98 px ; le reste de la page n'est pas concerné. */
@media (min-width:1080.02px) and (max-width:1099.98px){
  .nav{ display:none; }
  .nav.ouvert{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; left:0; right:0; top:100%;
    background:#fff; padding:14px 22px 22px; border-radius:0 0 22px 22px;
    box-shadow:var(--ombre-carte); margin:0;
  }
  .nav.ouvert .sousmenu{ position:static; display:block; box-shadow:none; border:0; padding:0 0 0 14px; min-width:0; }
  .burger{ display:flex; }
  .entete-clair .entete{ background:#fff; }
  .entete-clair .entete .logo .logo-noir{ display:block; }
  .entete-clair .entete .logo .logo-blanc{ display:none; }
  .entete-clair .entete .nav .lien{ color:#111111; }
  .entete-carte{ padding:14px 22px; height:auto; min-height:76px; position:relative; align-items:center; }
  .entete{ top:0; }
  .entete .logo, .vv-defile .entete .logo{ margin-top:0; }
  .entete .logo img, .vv-defile .entete .logo img{ width:48px; height:50px; }
  .entete-droite, .vv-defile .entete-droite{ margin-left:auto; margin-top:0; gap:0; order:2; }
  .burger{ order:3; margin-left:6px; }
  .entete .btn-contour-degrade{ min-width:0; height:40px; padding:0 14px; font-size:13px; border-width:1.5px; }
}

/* ============================================================
   Pied de page v2 (29/09, modèle fourni par Sylvain) — balisage dans inc/pied.php.
   Préfixe html body[class] footer.pied.pied-v2 : il l'emporte sur les ~110 règles
   de pied posées page par page dans les feuilles (accueil, solution, metier, pages).
   ============================================================ */
html body[class] footer.pied.pied-v2{
  position:relative; padding:0 0 64px; margin:0; border:0; background:#fff;
  background-image:
    radial-gradient(420px 220px at 0% 100%, rgba(255,196,72,.14), transparent 70%),
    radial-gradient(420px 220px at 100% 100%, rgba(50,94,226,.08), transparent 70%);
}
html body[class] footer.pied.pied-v2::before{
  content:""; display:block; height:1px; margin:0 16px 84px; background:#DCE6F5;
}
html body[class] footer.pied.pied-v2 .boite{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1.1fr) auto;
  gap:32px; align-items:start; max-width:1308px; margin:0 auto; padding:0 80px 0 100px;
}
html body[class] footer.pied.pied-v2 .pied-marque{ display:flex; flex-direction:column; align-items:flex-start; }
html body[class] footer.pied.pied-v2 .pied-logo{ margin:0 0 26px; line-height:0; }
html body[class] footer.pied.pied-v2 .pied-logo img{ display:block; width:104px; height:auto; }
html body[class] footer.pied.pied-v2 .pied-sociaux{ display:flex; gap:16px; margin:0 0 0 -16px; }
html body[class] footer.pied.pied-v2 .pied-sociaux a{
  width:56px; height:56px; border-radius:50%; background:#EEF0F4; color:#0B172E; border:0;
  display:flex; align-items:center; justify-content:center; transition:background-color .15s ease, color .15s ease;
}
html body[class] footer.pied.pied-v2 .pied-sociaux a:hover{ background:#325EE2; color:#fff; }
html body[class] footer.pied.pied-v2 .pied-sociaux svg{ width:24px; height:24px; }
html body[class] footer.pied.pied-v2 .pied-titre{
  margin:4px 0 0; font-family:'Satoshi',sans-serif; font-weight:700; font-size:16px; line-height:20px;
  letter-spacing:.12em; text-transform:uppercase; color:#0B172E;
}
html body[class] footer.pied.pied-v2 .pied-titre::after{
  content:""; display:block; width:32px; height:3px; border-radius:2px; background:#325EE2; margin-top:14px;
}
html body[class] footer.pied.pied-v2 ul.pied-liens{ margin:26px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:15px; }
html body[class] footer.pied.pied-v2 ul.pied-liens li{ margin:0; padding:0; line-height:28px; }
html body[class] footer.pied.pied-v2 ul.pied-liens a{
  display:inline; padding:0; font-family:'Inter',sans-serif; font-weight:400; font-size:18px; line-height:28px; color:#1B2433;
}
html body[class] footer.pied.pied-v2 ul.pied-liens a:hover{ color:#325EE2; }
html body[class] footer.pied.pied-v2 .pied-droite{ display:flex; flex-direction:column; align-items:flex-start; }
html body[class] footer.pied.pied-v2 .pied-contact{
  display:inline-flex; align-items:center; gap:12px; height:62px; padding:0 28px; border-radius:999px;
  border:2px solid #325EE2; background:#fff; color:#325EE2;
  font-family:'Satoshi',sans-serif; font-weight:700; font-size:19px; white-space:nowrap;
  transition:background-color .15s ease, color .15s ease;
}
html body[class] footer.pied.pied-v2 .pied-contact svg{ width:20px; height:20px; transition:transform .15s ease; }
html body[class] footer.pied.pied-v2 .pied-contact:hover{ background:#325EE2; color:#fff; }
html body[class] footer.pied.pied-v2 .pied-contact:hover svg{ transform:translateX(3px); }
html body[class] footer.pied.pied-v2 ul.pied-mentions{ margin-top:28px; }
@media (max-width:1099.98px){
  html body[class] footer.pied.pied-v2::before{ margin-bottom:56px; }
  html body[class] footer.pied.pied-v2 .boite{ grid-template-columns:1fr 1fr; gap:44px 28px; padding:0 32px; }
}
@media (max-width:640px){
  html body[class] footer.pied.pied-v2{ padding-bottom:96px; }
  html body[class] footer.pied.pied-v2::before{ margin-bottom:44px; }
  html body[class] footer.pied.pied-v2 .boite{ grid-template-columns:1fr; gap:36px; padding:0 20px; }
  html body[class] footer.pied.pied-v2 .pied-sociaux{ margin-left:0; }
  html body[class] footer.pied.pied-v2 ul.pied-liens{ gap:6px; }
  html body[class] footer.pied.pied-v2 ul.pied-liens a{ display:inline-block; padding:8px 0; }
}

/* 29/09 · Textes en dégradé : le dégradé n'est peint que dans la boîte de l'élément ; avec
   un interlignage serré (0,77 sur les noms des solutions des métiers, 0,875 sur CORTEXIA),
   le bas des « g », « p », « q » et de la virgule dépassait et était rogné (retour de
   Sylvain, « Pédagogie »). La zone peinte est agrandie par un rembourrage, compensé par une
   marge négative : la mise en page ne bouge pas. */
.degrade, .degrade-titre, .accent-clair, .cd-degrade, .clair{ padding-bottom:.16em !important; margin-bottom:-.16em !important; }
span.degrade, em.degrade, span.degrade-titre, span.accent-clair, span.cd-degrade, span.clair{ padding:0 .05em .16em !important; margin:0 -.05em !important; }
.carte-univers .nom{ padding-bottom:.34em !important; margin-bottom:-.34em !important; }
@media (min-width:1100px){ .gabarit-accueil .cortex-bas .nom{ padding-bottom:.25em !important; margin-bottom:-.25em !important; } }
.gabarit-accueil .cortex-bas h3{ padding-bottom:.2em !important; }
.offre .marque{ padding-bottom:.3em !important; margin-bottom:-.3em !important; } /* marge haute propre à chaque page : inchangée */

/* 30/09 · Une seule taille de texte pour tous les boutons (Sarah, feedback 2 points 1
   et 7 : « les CTA n'ont pas tous la même taille de texte », ceux des héros « un peu
   trop petits », « essayer une police un peu plus grosse »). On avait 14 px dans les
   héros, 17, 20 et 24 px ailleurs, en graisse 700 ou 900 : tout passe à 18 px / 700.
   Sur téléphone, 16 px et retour à la ligne autorisé, sinon les longs libellés des
   héros métiers (« Télécharger le guide sur la fiabilité des évaluations ») sortaient
   de l'écran. En-tête, pied de page et infolettre gardent leurs réglages. */
html body .btn:not(.infolettre .btn):not(header .btn):not(footer .btn){ font-size:18px !important; font-weight:700 !important; }
@media (max-width:640px){
  html body .btn:not(.infolettre .btn):not(header .btn):not(footer .btn){
    font-size:16px !important; white-space:normal !important; height:auto !important; min-height:51px;
    padding-top:12px !important; padding-bottom:12px !important; line-height:1.25 !important; text-align:center; max-width:100%;
  }
}

/* 30/09 · Audit responsive complet (demande de Sylvain). Entre 1 100 et la largeur de leur
   maquette, les gabarits calés sur le cadre de 1 440 coupaient leurs bords sans le montrer
   (main en overflow-x:clip) : frise des métiers, cartes « Notre réponse », sommaire des
   articles, colonne gauche du Contact. Même remède que l'accueil, CortexIA et Candidats :
   la page est réduite par paliers de 40 px, juste assez pour tout contenir. Largeurs
   minimales sans coupure mesurées : métiers 1 440, solutions 1 380, Contact 1 320,
   articles 1 300. L'en-tête et le pied ne sont pas réduits. */
/* pages métiers (frise à 6 étapes) : 1440 px */
@media (min-width:1100px) and (max-width:1139px){ body.gabarit-metier main{ zoom:0.76; } }
@media (min-width:1140px) and (max-width:1179px){ body.gabarit-metier main{ zoom:0.79; } }
@media (min-width:1180px) and (max-width:1219px){ body.gabarit-metier main{ zoom:0.81; } }
@media (min-width:1220px) and (max-width:1259px){ body.gabarit-metier main{ zoom:0.84; } }
@media (min-width:1260px) and (max-width:1299px){ body.gabarit-metier main{ zoom:0.87; } }
@media (min-width:1300px) and (max-width:1339px){ body.gabarit-metier main{ zoom:0.9; } }
@media (min-width:1340px) and (max-width:1379px){ body.gabarit-metier main{ zoom:0.93; } }
@media (min-width:1380px) and (max-width:1419px){ body.gabarit-metier main{ zoom:0.95; } }
@media (min-width:1420px) and (max-width:1439px){ body.gabarit-metier main{ zoom:0.98; } }
/* pages solutions : 1380 px */
@media (min-width:1100px) and (max-width:1139px){ body.gabarit-solution main{ zoom:0.79; } }
@media (min-width:1140px) and (max-width:1179px){ body.gabarit-solution main{ zoom:0.82; } }
@media (min-width:1180px) and (max-width:1219px){ body.gabarit-solution main{ zoom:0.85; } }
@media (min-width:1220px) and (max-width:1259px){ body.gabarit-solution main{ zoom:0.88; } }
@media (min-width:1260px) and (max-width:1299px){ body.gabarit-solution main{ zoom:0.91; } }
@media (min-width:1300px) and (max-width:1339px){ body.gabarit-solution main{ zoom:0.94; } }
@media (min-width:1340px) and (max-width:1379px){ body.gabarit-solution main{ zoom:0.97; } }
/* Contact : 1320 px */
@media (min-width:1100px) and (max-width:1139px){ body.gabarit-contact main{ zoom:0.83; } }
@media (min-width:1140px) and (max-width:1179px){ body.gabarit-contact main{ zoom:0.86; } }
@media (min-width:1180px) and (max-width:1219px){ body.gabarit-contact main{ zoom:0.89; } }
@media (min-width:1220px) and (max-width:1259px){ body.gabarit-contact main{ zoom:0.92; } }
@media (min-width:1260px) and (max-width:1299px){ body.gabarit-contact main{ zoom:0.95; } }
@media (min-width:1300px) and (max-width:1319px){ body.gabarit-contact main{ zoom:0.98; } }
/* articles : 1300 px */
@media (min-width:1100px) and (max-width:1139px){ body.gabarit-article main{ zoom:0.84; } }
@media (min-width:1140px) and (max-width:1179px){ body.gabarit-article main{ zoom:0.87; } }
@media (min-width:1180px) and (max-width:1219px){ body.gabarit-article main{ zoom:0.9; } }
@media (min-width:1220px) and (max-width:1259px){ body.gabarit-article main{ zoom:0.93; } }
@media (min-width:1260px) and (max-width:1299px){ body.gabarit-article main{ zoom:0.96; } }

/* 30/09 · Audit responsive : menu mobile sur écran peu haut. L'en-tête est collant et le
   menu ouvert mesure ~720 px : sur un écran de 600-667 px (iPhone SE…), « Ressources » et
   « Candidats » restaient hors d'atteinte, même en faisant défiler la page. Le menu défile
   désormais dans sa propre hauteur (sous l'en-tête de 78 px). */
@media (max-width:1099.98px){
  .nav.ouvert{ max-height:calc(100vh - 78px); max-height:calc(100dvh - 78px); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
}

/* 30/09 · Audit visuel mobile : questions de FAQ serrées dans une colonne de 190 px (marges
   de 42/44 px de l'ordinateur + titres en 21 px) → 3 mots par ligne. Sous 640 px : marges
   de 20 px, titres en 17 px, réponses alignées sur le titre. */
@media (max-width:640px){
  .faq-item > button{ padding:16px 14px 16px 20px !important; gap:12px; }
  .faq-item .q{ font-size:17px !important; line-height:1.35; }
  .faq-item .plus{ flex:none; width:40px !important; height:40px !important; }
  .faq-item .r{ padding:0 20px 22px !important; font-size:15.5px; }
}

/* 01/10 · Fonctionnalité, feedback 1 n° 7 (Sarah) : « toute la case cliquable, pas que le titre »,
   à appliquer à tous les espaces ressources. Fait sur la page Ressources le 30/09 ; ici les cartes
   « À lire aussi » des pages solutions et métiers, et « Les plus consultés » de la page Ressources.
   Le lien de la carte s'étend à toute la carte, avec le même effet au survol. */
.carte-ressource, .res-aside .item{ position:relative; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease; }
.carte-ressource .lire::before, .res-aside .item h3 a::after{ content:""; position:absolute; inset:0; z-index:1; }
.carte-ressource:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -18px rgba(11,23,46,.35); }
.carte-ressource:hover .lire, .res-aside .item:hover h3 a{ text-decoration:underline; text-underline-offset:3px; }

/* 01/10 · Fenêtre vidéo des témoignages (fonctionnalités 30/09 n° 1). */
.temoin[data-video]{ cursor:pointer; }
.temoin[data-video]:hover .lecture, .temoin[data-video]:focus-visible .lecture{ transform:scale(1.08); }
.temoin[data-video] .lecture{ transition:transform .2s ease; }
.temoin[data-video]:focus-visible{ outline:2px solid #325EE2; outline-offset:4px; }
.video-fenetre{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(11,23,46,.72); }
.video-fenetre[hidden]{ display:none; }
.video-cadre{ position:relative; width:min(960px,100%); }
.video-cadre video{ display:block; width:100%; aspect-ratio:16/9; border-radius:18px; background:#000; box-shadow:0 30px 80px -30px rgba(0,0,0,.6); }
.video-fermer{ position:absolute; top:-46px; right:0; width:38px; height:38px; border-radius:50%; border:0; background:#fff; color:#0B172E; font-size:26px; line-height:38px; cursor:pointer; }
html.video-ouverte{ overflow:hidden; }

/* 06/10 · Pied de page mobile (Sylvain : « pas fou ») : rangées resserrées, logo
   plus petit, mentions collées au bouton. */
@media (max-width:640px){
  html body[class] footer.pied.pied-v2{ padding-bottom:64px; }
  html body[class] footer.pied.pied-v2::before{ margin-bottom:32px; }
  html body[class] footer.pied.pied-v2 .boite{ gap:26px; }
  html body[class] footer.pied.pied-v2 .pied-logo{ margin-bottom:18px; }
  html body[class] footer.pied.pied-v2 .pied-logo img{ width:84px; }
  html body[class] footer.pied.pied-v2 .pied-sociaux a{ width:44px; height:44px; }
  html body[class] footer.pied.pied-v2 ul.pied-liens{ margin-top:14px; gap:0; }
  html body[class] footer.pied.pied-v2 ul.pied-liens li{ line-height:24px; }
  html body[class] footer.pied.pied-v2 ul.pied-liens a{ padding:5px 0; }
  html body[class] footer.pied.pied-v2 ul.pied-mentions{ margin-top:14px; }
}

/* 06/10 · Pied de page mobile v2 (Sylvain : « je suis pas fan » de la pile) : logo et
   réseaux sur une ligne, les deux colonnes de liens côte à côte, bouton pleine
   largeur, mentions sur une ligne. La version ordinateur ne change pas. */
@media (max-width:640px){
  html body[class] footer.pied.pied-v2{ padding-bottom:56px; }
  html body[class] footer.pied.pied-v2::before{ margin:0 20px 28px; }
  html body[class] footer.pied.pied-v2 .boite{
    grid-template-columns:1fr 1fr; grid-template-areas:"marque marque" "col1 col2" "droite droite";
    gap:28px 16px; padding:0 20px;
  }
  html body[class] footer.pied.pied-v2 .pied-marque{ grid-area:marque; flex-direction:row; align-items:center; justify-content:space-between; }
  html body[class] footer.pied.pied-v2 .pied-logo{ margin:0; }
  html body[class] footer.pied.pied-v2 .pied-logo img{ width:72px; }
  html body[class] footer.pied.pied-v2 .pied-sociaux{ margin:0; gap:10px; }
  html body[class] footer.pied.pied-v2 .pied-sociaux a{ width:40px; height:40px; }
  html body[class] footer.pied.pied-v2 .pied-sociaux svg{ width:18px; height:18px; }
  html body[class] footer.pied.pied-v2 .pied-col:nth-of-type(1){ grid-area:col1; }
  html body[class] footer.pied.pied-v2 .pied-col:nth-of-type(2){ grid-area:col2; }
  html body[class] footer.pied.pied-v2 .pied-titre{ font-size:13px; line-height:18px; letter-spacing:.08em; margin:0; }
  html body[class] footer.pied.pied-v2 .pied-titre::after{ width:24px; margin-top:8px; }
  html body[class] footer.pied.pied-v2 ul.pied-liens{ margin-top:12px; gap:0; }
  html body[class] footer.pied.pied-v2 ul.pied-liens li{ line-height:22px; }
  html body[class] footer.pied.pied-v2 ul.pied-liens a{ display:inline-block; padding:4px 0; font-size:15px; line-height:22px; }
  html body[class] footer.pied.pied-v2 .pied-droite{ grid-area:droite; align-items:stretch; }
  html body[class] footer.pied.pied-v2 .pied-contact{ justify-content:center; height:52px; font-size:16px; }
  /* Mentions à gauche et marge basse : le bouton « haut de page » flottant recouvrait la fin de la ligne. */
  html body[class] footer.pied.pied-v2 ul.pied-mentions{ margin-top:18px; flex-direction:row; flex-wrap:wrap; gap:4px 18px; justify-content:flex-start; padding-right:70px; }
  html body[class] footer.pied.pied-v2 ul.pied-mentions a{ font-size:13px; color:#4B5565; padding:2px 0; }
}

/* 06/10 · Bande d'appel sur mobile (Sylvain : « le dessin doit être centré ») : le visuel
   et le texte se centrent quand la carte passe en une colonne ; corps 17 px. */
@media (max-width:1080px){
  html body[class] .appel .carte-appel{ text-align:center; justify-items:center; }
  html body[class] .appel .carte-appel .visuel{ margin:0 auto; }
  html body[class] .appel .carte-appel > div{ display:flex; flex-direction:column; align-items:center; }
  html body[class] .appel .carte-appel .surtitre{ text-align:center; }
  html body[class] .appel .carte-appel p:not(.surtitre){ font-size:17px; line-height:1.45; margin-left:auto; margin-right:auto; }
  html body[class] .appel .carte-appel .btn{ max-width:100%; white-space:normal; text-align:center; }
}

/* ============================================================
   06/10 · Retour mobile de l'équipe (portail, tickets #88 à #97) : sur téléphone,
   tout ce qui est en colonne unique se centre : héros (titre, chapô, boutons),
   section « Au quotidien » des métiers, bloc CortexIA de l'accueil, pied de page.
   Feuille chargée en premier : sélecteurs renforcés pour passer devant les
   règles des pages.
   ============================================================ */
@media (max-width:640px){
  /* Héros : accueil, solutions, métiers, candidats, CortexIA */
  html body[class] .heros .boite > div, html body[class] .heros .boite,
  html body[class] .sol-heros .boite,
  html body[class] .met-heros .texte,
  html body[class] .cand-heros .boite, html body[class] .heros-simple .boite,
  html body[class] .ia-heros .boite{ text-align:center; }
  html body[class] .heros h1, html body[class] .heros .recit, html body[class] .heros .chapo,
  html body[class] .sol-heros h1, html body[class] .sol-heros .chapo,
  html body[class] .met-heros h1, html body[class] .met-heros p,
  html body[class] .cand-heros h1, html body[class] .cand-heros .chapo, html body[class] .heros-simple h1, html body[class] .heros-simple p,
  html body[class] .ia-heros h1, html body[class] .ia-heros .chapo{ text-align:center; margin-left:auto; margin-right:auto; }
  html body[class] .heros-actions, html body[class] .sol-heros .actions, html body[class] .met-heros .actions,
  html body[class] .cand-heros .actions, html body[class] .heros-simple .actions, html body[class] .ia-heros .actions{
    justify-content:center; width:100%;
  }
  html body[class] .heros-actions .btn, html body[class] .sol-heros .actions .btn, html body[class] .met-heros .actions .btn,
  html body[class] .cand-heros .actions .btn, html body[class] .heros-simple .actions .btn, html body[class] .ia-heros .actions .btn{
    margin-left:auto; margin-right:auto;
  }

  /* Métiers : « Au quotidien » (surtitre, citation, frise) */
  html body[class] .quotidien .boite, html body[class] .quotidien .surtitre, html body[class] .quotidien .citation{ text-align:center; }
  html body[class] .quotidien .citation{ margin-left:auto; margin-right:auto; }
  html body[class] .frise-etapes{ justify-items:center; }

  /* Accueil : bloc CortexIA */
  html body[class] .cortex .boite, html body[class] .cortex-haut, html body[class] .cortex-bas,
  html body[class] .cortex .surtitre, html body[class] .cortex h2, html body[class] .cortex h3, html body[class] .cortex p{ text-align:center; }
  html body[class] .cortex-bas ul{ display:inline-flex; flex-direction:column; align-items:flex-start; margin-left:auto; margin-right:auto; text-align:left; }
  html body[class] .cortex .btn, html body[class] .cortex-bas .btn{ margin-left:auto; margin-right:auto; display:inline-flex; }
  html body[class] .cortex-bas > div, html body[class] .cortex-bas > p{ display:flex; flex-direction:column; align-items:center; }

  /* Pied de page : une colonne centrée */
  html body[class] footer.pied.pied-v2 .boite{ grid-template-columns:1fr; grid-template-areas:"marque" "col1" "col2" "droite"; gap:24px; justify-items:center; text-align:center; }
  html body[class] footer.pied.pied-v2 .pied-marque{ flex-direction:column; align-items:center; gap:16px; }
  html body[class] footer.pied.pied-v2 .pied-col{ display:flex; flex-direction:column; align-items:center; }
  html body[class] footer.pied.pied-v2 .pied-titre::after{ margin-left:auto; margin-right:auto; }
  html body[class] footer.pied.pied-v2 ul.pied-liens{ align-items:center; }
  html body[class] footer.pied.pied-v2 .pied-droite{ align-items:center; width:100%; }
  html body[class] footer.pied.pied-v2 .pied-contact{ width:auto; min-width:220px; }
  html body[class] footer.pied.pied-v2 ul.pied-mentions{ justify-content:center; padding-right:0; }
  html body[class] footer.pied.pied-v2{ padding-bottom:88px; } /* le bouton « haut de page » ne recouvre plus les mentions */
}
@media (max-width:640px){
  /* Étiquette d'univers en tête des héros solutions : centrée comme le reste. */
  html body[class] .sol-heros .sol-marque, html body[class] .sol-heros .marque, html body[class] .sol-heros .univers-badge,
  html body[class] .sol-heros .boite > p:first-child, html body[class] .sol-heros .boite > .badge{ justify-content:center; text-align:center; margin-left:auto; margin-right:auto; display:flex; }
}
@media (max-width:640px){
  /* Le logo 3D du héros solutions passait sur le texte à 390 px (relevé le 06/10) : masqué sur téléphone. */
  html body[class] .sol-heros .sol-logo3d{ display:none !important; }
}

/* 07/10 · M4 (maquette de Sarah) : le pied mobile revient aux deux colonnes de liens,
   logo à gauche et réseaux à droite ; remplace la version centrée du 06/10 (tickets #90). */
@media (max-width:640px){
  html body[class] footer.pied.pied-v2 .boite{ grid-template-columns:1fr 1fr; grid-template-areas:"marque marque" "col1 col2" "droite droite"; gap:28px 16px; justify-items:stretch; text-align:left; }
  html body[class] footer.pied.pied-v2 .pied-marque{ flex-direction:row; align-items:center; justify-content:space-between; }
  html body[class] footer.pied.pied-v2 .pied-col{ align-items:flex-start; }
  html body[class] footer.pied.pied-v2 .pied-titre::after{ margin-left:0; }
  html body[class] footer.pied.pied-v2 ul.pied-liens{ align-items:flex-start; }
  html body[class] footer.pied.pied-v2 .pied-droite{ align-items:stretch; }
  html body[class] footer.pied.pied-v2 .pied-contact{ justify-content:center; }
  html body[class] footer.pied.pied-v2 ul.pied-mentions{ justify-content:flex-start; }
}
/* M10 : sur téléphone les boutons gardent l'essentiel ; les mots en trop (span.long)
   restent dans la page pour les moteurs et les lecteurs d'écran. */
@media (max-width:640px){ .btn .long{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } }

/* ============================================================
   07/10 · M5, retour mobile de Sarah : menu burger plein écran (ses maquettes 06-08).
   Les éléments .nav-mobile n'existent que sous 1 100 px.
   ============================================================ */
.nav-mobile{ display:none; }
@media (max-width:1099.98px){
  html.menu-ouvert, html.menu-ouvert body{ overflow:hidden; }
  html body[class] .entete .nav.ouvert{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:fixed; inset:0; top:0; max-height:none; height:100dvh; z-index:1000;
    background:#fff; border-radius:0; box-shadow:none; margin:0; padding:0 20px 28px;
    overflow-y:auto; overscroll-behavior:contain;
  }
  .nav.ouvert .nav-mobile{ display:block; }
  .nav.ouvert .nav-tete{ display:flex; align-items:center; justify-content:space-between; padding:14px 0 12px; border-bottom:1px solid #E6EAF2; margin:0 -20px 6px; padding-left:20px; padding-right:20px; }
  .nav.ouvert .nav-logo img{ width:52px; height:auto; display:block; }
  .nav.ouvert .nav-fermer{ width:48px; height:48px; border-radius:50%; background:#EEF0F4; color:#0B172E; font-size:30px; line-height:1; display:flex; align-items:center; justify-content:center; border:0; }
  .nav.ouvert .item{ position:relative; display:flex; flex-wrap:wrap; align-items:center; border-bottom:1px solid #E6EAF2; }
  .nav.ouvert .item .lien{ flex:1; display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2px 12px; padding:22px 0; border-radius:0; background:none; font-size:24px; line-height:1.15; color:#0B172E !important; }
  .nav.ouvert .nav-fleche{ margin-left:auto; }
  .nav.ouvert .item .lien:hover{ background:none; color:#0B172E; }
  .nav.ouvert .nav-surtitre{ width:100%; font-size:14px; font-weight:700; letter-spacing:.08em; color:#A787D0; }
  .nav.ouvert .item-cortex .nav-texte{ flex:1 1 0; min-width:0; font-size:22px; }
  .nav.ouvert .nav-fleche, .nav.ouvert .nav-bascule{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none; color:#0B172E; font-size:22px; background:none; border:0; }
  .nav.ouvert .nav-bascule .caret{ width:10px; height:10px; border-width:2px; transform:rotate(45deg) translateY(-3px); transition:transform .2s ease; }
  .nav.ouvert .item.deplie .nav-bascule .caret{ transform:rotate(225deg) translateY(-3px); }
  html body[class] .nav.ouvert .sousmenu{ display:none; width:100%; position:static; box-shadow:none; border:0; padding:0 0 18px; min-width:0; }
  .nav.ouvert .item.deplie .sousmenu{ display:block; }
  .nav.ouvert .sousmenu a{ padding:10px 0; gap:16px; font-size:18px; color:#4B5565; border-radius:0; }
  .nav.ouvert .sousmenu a:hover{ background:none; }
  /* Nos solutions : icône sur tuile pastel, titre 20 px, sous-titre gris */
  html body[class] .nav.ouvert .sousmenu .picto{ width:52px; height:52px; border-radius:14px; }
  html body[class] .nav.ouvert .sousmenu .picto.rose{ background:var(--rose-voile); }
  html body[class] .nav.ouvert .sousmenu .picto.teal{ background:var(--teal-voile); }
  html body[class] .nav.ouvert .sousmenu .picto.bleu{ background:var(--bleu-voile); }
  .nav.ouvert .sousmenu .picto img{ width:30px; height:30px; }
  .nav.ouvert .sousmenu .libelle{ display:flex; flex-direction:column; gap:2px; }
  .nav.ouvert .sousmenu .libelle b{ display:block; font-family:'Satoshi',sans-serif; font-weight:700; font-size:20px; line-height:1.2; color:#0B172E; }
  .nav.ouvert .sousmenu .libelle span{ font-size:16px; color:#5B6578; }
  /* Vos métiers : liste avec filet gauche */
  .nav.ouvert .sousmenu:not(:has(.picto)){ border-left:2px solid #E6EAF2; padding-left:18px; margin-bottom:18px; }
  .nav.ouvert .nav-pied{ padding:26px 0 0; text-align:center; }
  .nav.ouvert .nav-cta{ display:flex; width:100%; justify-content:center; gap:10px; height:62px; border-radius:999px; background:#325EE2; color:#fff; font-size:18px; font-weight:700; }
  .nav.ouvert .nav-pied p{ margin-top:14px; font-size:16px; color:#6B7488; }
}
/* Sur ordinateur le libellé du sous-menu reste sur une ligne, comme avant l'enveloppe .libelle. */
@media (min-width:1100px){ .sousmenu .libelle{ white-space:nowrap; } }

/* 07/10 · Point 9 du retour mobile de Sarah : « À lire aussi » en liste (vignette, titre, lien),
   sans l'extrait gris. Vaut pour les pages solutions et métiers. */
@media (max-width:640px){
  html body[class] .sol-lire .ressources-grille{ display:flex; flex-direction:column; gap:0; }
  html body[class] .sol-lire .carte-ressource{
    display:grid; grid-template-columns:96px minmax(0,1fr); column-gap:14px; align-items:start;
    background:none; box-shadow:none; border-radius:0; border:0; border-bottom:1px solid #E6EAF2; padding:16px 0;
  }
  html body[class] .sol-lire .carte-ressource:hover{ transform:none; box-shadow:none; }
  html body[class] .sol-lire .carte-ressource .visuel{ aspect-ratio:1; border-radius:14px; }
  html body[class] .sol-lire .carte-ressource .corps{ padding:0; gap:6px; }
  html body[class] .sol-lire .carte-ressource .extrait{ display:none; }
  html body[class] .sol-lire .carte-ressource b{ font-size:18px; line-height:1.3; }
  html body[class] .sol-lire .carte-ressource .lire{ margin-top:4px; padding:6px 0; display:inline-flex; }
  html body[class] .sol-lire h2{ font-size:26px; }
}

/* ============================================================
   08/10 · Retours mobile de Sarah (réunion du 8 octobre), points 2, 3 et 4.
   ============================================================ */
@media (max-width:640px){
  /* 2 · Pied : logo et réseaux centrés, les deux colonnes de liens ramenées vers le centre. */
  html body[class] footer.pied.pied-v2 .boite{ grid-template-columns:auto auto; justify-content:center; gap:30px 44px; }
  html body[class] footer.pied.pied-v2 .pied-marque{ flex-direction:column; align-items:center; justify-content:center; gap:18px; }
  html body[class] footer.pied.pied-v2 .pied-droite{ align-items:center; }
  html body[class] footer.pied.pied-v2 .pied-contact{ width:100%; }
  html body[class] footer.pied.pied-v2 ul.pied-mentions{ justify-content:center; }
}
@media (max-width:1099.98px){
  /* 3 · Menu : police plus petite, même disposition. */
  html body[class] .nav.ouvert .item .lien{ font-size:20px; padding:18px 0; }
  html body[class] .nav.ouvert .item-cortex .nav-texte{ font-size:18px; }
  html body[class] .nav.ouvert .nav-surtitre{ font-size:12px; }
  html body[class] .nav.ouvert .sousmenu .libelle b{ font-size:17px; }
  html body[class] .nav.ouvert .sousmenu .libelle span{ font-size:14px; }
  html body[class] .nav.ouvert .sousmenu a{ font-size:16px; }
  html body[class] .nav.ouvert .nav-cta{ height:56px; font-size:16px; }
  /* 4 · Filet à gauche de la liste « Vos métiers », comme sur le modèle de Sarah. */
  html body[class] .nav.ouvert .sousmenu:not(:has(.picto)){ border-left:2px solid #D9DDE6; border-radius:0; padding-left:22px; margin:4px 0 16px 4px; }
  html body[class] .nav.ouvert .sousmenu:not(:has(.picto)) a{ padding:12px 0; color:#4B5565; }
}

/* 08/10 · Retours mobile de Sarah : FAQ repliée à deux questions (n° 12, 20, 28, 41, 54)
   et deux ressources au lieu de trois dans « À lire aussi » (n° 13, 22, 28, 41). */
.faq-plus{ display:none; }
@media (max-width:640px){
  .faq-liste[data-replie="1"] .faq-item:nth-child(n+3){ display:none; }
  .faq-plus{ display:block; margin:18px auto 0; padding:10px 0; border:0; background:none; font-family:'Satoshi',sans-serif; font-weight:700; font-size:16px; color:var(--accent); cursor:pointer; }
  .faq-plus[hidden]{ display:none; }
  .faq-plus::after{ content:" \2193"; }
  html body[class] .sol-lire .carte-ressource:nth-child(n+3){ display:none; }
}

/* 08/10 · Retour mobile n° 34 : libellé court d'un bouton (.court) affiché sur téléphone à la place du long. */
.btn .court{ display:none; }
@media (max-width:640px){ .btn .court{ display:inline; } }

/* 08/10 · Retour mobile n° 50 : bout de phrase masqué sur téléphone. */
@media (max-width:640px){ .mobile-masque{ display:none; } }

/* ============================================================
   10/10 · Doc de suivi, annotation en rouge : pied de page.
   Logo et réseaux à gauche, les deux colonnes sur toute la largeur.
   ============================================================ */
@media (max-width:640px){
  html body[class] footer.pied.pied-v2 .boite{ grid-template-columns:1fr 1fr; justify-content:stretch; gap:28px 20px; }
  html body[class] footer.pied.pied-v2 .pied-marque{ align-items:flex-start; }
  html body[class] footer.pied.pied-v2 .pied-droite{ align-items:stretch; }
}