/* ============================================================
   20/20 La Suite — gabarits Ressources, Article, Métiers,
   CortexIA, Contact, Candidats et pages de texte.
   ============================================================ */

/* ============ Héros simple, commun à plusieurs gabarits ============ */
.heros-simple{
  position:relative; overflow:hidden;
  padding:123px 0 84px;
  background:linear-gradient(180deg,#FFFFFF 0%,#FAFBFC 100%);
}
.heros-simple .boite{ position:relative; z-index:2; }
/* Frame 77-1465 (Candidats) : titre à 273 en 72 px, chapô à 499, boutons à
   640. Les pages « texte » et l'index métiers n'ont pas de frame, elles
   suivent la même échelle de titre que le reste du site. */
.heros-simple h1{
  font-size:clamp(34px,5vw,72px); font-weight:700; line-height:1.081; color:var(--nuit); max-width:786px;
}
.heros-simple .chapo{ margin-top:70px; font-size:20px; line-height:1.21; color:#0B172E; max-width:556px; }
.heros-simple .actions{ display:flex; gap:16px; flex-wrap:wrap; margin-top:44px; }
.heros-simple .actions .btn{ height:54px; padding:0 20px; border-radius:27px 6px 6px 27px; font-size:14px; }
.heros-simple .maillage{ position:absolute; inset:0; z-index:0; opacity:.85; }

/* Candidats : la maquette pose la photo sur la moitié droite du héros, le texte
   restant à gauche. Le fond pastel de la photo donne au bloc sa couleur. */
.cand-heros{ background:linear-gradient(120deg,#F7F4FA 0%,#F2F5FB 55%,#EDF3FA 100%); }
.cand-heros .cand-photo{
  position:absolute; right:0; top:0; bottom:0; width:58%;
  z-index:1; pointer-events:none;
}
.cand-heros .cand-photo img{
  width:100%; height:100%; object-fit:cover; object-position:center right;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 26%);
}
.cand-heros .boite{ z-index:2; }
.cand-heros h1,
.cand-heros .chapo{ max-width:540px; }
@media (max-width:900px){
  /* Sous cette largeur le texte passerait sur la photo : elle s'efface. */
  .cand-heros .cand-photo{ display:none; }
}

/* Pages légales : la maquette centre le titre (72 px) et son sous-texte (24 px,
   780 de large), puis la date de mise à jour, avant un corps aligné à gauche. */
.gabarit-legal .heros-simple{ text-align:center; }
.gabarit-legal .heros-simple h1{ max-width:1166px; margin:0 auto; }
.gabarit-legal .heros-simple .chapo{
  margin:34px auto 0; max-width:780px; font-size:22px; line-height:1.4; color:var(--corps);
}
/* La date est centrée sur la page dans la maquette, pas dans la colonne de
   texte, qui est plafonnée à 820 px et collée à gauche. */
.gabarit-legal .texte-corps{ max-width:none; }
.gabarit-legal .texte-corps > *:not(.maj){ max-width:820px; }
.gabarit-legal .texte-corps .maj{
  text-align:center; margin:0 0 46px; font-size:20px; color:var(--sourdine);
}

/* ============ Ressources ============ */
/* La page Ressources respire jusqu'à 51 px du bord, comme la maquette. */
.gabarit-ressources .boite{ max-width:1440px; padding:0 51px; }
.res-heros{ display:grid; grid-template-columns:minmax(0,.665fr) minmax(0,1.335fr); align-items:stretch; }
.res-heros .texte{ position:relative; z-index:2; }
/* Relevé frame 132-542 : titre à 186, chapô à 406, colonne de texte à 102. */
.res-heros .texte{ display:flex; align-items:flex-start; padding:36px 40px 40px max(32px, calc((100vw - 1440px) / 2 + 102px)); }
.res-heros .texte > div{ width:100%; }
/* Le titre déborde légèrement sur le visuel, comme la maquette. */
.res-heros h1{ font-size:clamp(36px,5vw,72px); font-weight:700; line-height:1.081; color:var(--nuit); white-space:nowrap; }
.res-heros h1 em{ font-style:normal; color:#FE2977; }
.res-heros p{ margin-top:65px; font-size:20px; line-height:1.21; color:var(--corps); max-width:506px; }
.res-vague{
  position:relative; min-height:413px; overflow:hidden;
  /* Fond blanc comme la maquette : le dégradé rosé teintait toute la nappe. */
  background:#fff;
}
.res-vague canvas{ position:absolute; inset:0; width:100%; height:100%; }
.res-vague img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
/* La nappe animée (canvas dessiné par commun.js) remplace l'image quand le
   script tourne ; l'image reste le repli. */
.res-vague canvas[hidden]{ display:none; }
/* img{display:block} du socle annulerait l'attribut hidden posé par le script. */
.res-vague img[hidden]{ display:none; }

.res-filtres{
  border-bottom:1px solid var(--ligne); background:#fff;
  position:sticky; top:84px; z-index:40; /* sous la bande compacte de l'en-tête (84 px) */
}
/* Une seule ligne à 1440, comme la frame : on resserre plutôt que de replier. */
.res-filtres .boite{ display:flex; align-items:center; gap:0; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:14px 42px 14px 68px; }
.res-filtres .boite::-webkit-scrollbar{ display:none; }
.res-filtres button svg{ width:17px; height:17px; flex:none; }
.res-filtres button{
  display:inline-flex; align-items:center; gap:7px; flex:none;
  font-family:'Satoshi',sans-serif; font-weight:700; font-size:16px; line-height:1.35;
  padding:9px 8px; border-radius:999px; color:#0B172E; white-space:nowrap;
}
.res-filtres button[aria-pressed="true"]{ background:var(--nuit); color:#fff; }
.res-filtres .sep{ flex:none; width:1px; height:22px; background:var(--ligne); margin:0 6px; }
.res-filtres .pastille{ width:11px; height:11px; border-radius:50%; flex:none; }
.res-filtres .pastille.rose{ background:#FE2977; }
.res-filtres .pastille.teal{ background:#028D9D; }
.res-filtres .pastille.bleu{ background:#0161D8; }

.res-barre{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:8px 0; flex-wrap:wrap; }
.res-barre + .res-barre{ padding-top:24px; }
.res-recherche{
  width:min(554px,100%); border:1px solid var(--ligne); border-radius:999px;
  padding:15px 24px; font:inherit; color:var(--ink); background:#fff;
}
.res-compte{ font-size:16px; line-height:1.21; color:#4A5568; }
.res-tri{ font-size:16px; line-height:1.21; color:#4A5568; }
.res-tri b{ font-family:'Satoshi',sans-serif; color:var(--ink); }

.res-corps{ display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:23px; padding:26px 0 70px; align-items:start; }
.res-grille{ display:grid; grid-template-columns:repeat(3,1fr); gap:19px; }
.res-carte[hidden]{ display:none; }
.res-carte{
  background:#fff; border-radius:18px; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:var(--ombre-carte);
}
.res-carte .visuel{ aspect-ratio:16/9; background:#EEF1F6 center/cover no-repeat; }
.res-carte .corps{ padding:20px 22px 24px; display:flex; flex-direction:column; gap:9px; flex:1; }
.res-carte .type{
  font-family:'Satoshi',sans-serif; font-weight:700; font-size:13px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink); display:inline-flex; align-items:center; gap:8px;
}
.res-carte .type i{ width:11px; height:11px; border-radius:50%; display:inline-block; }
.res-carte h3{ font-size:16.5px; font-weight:700; line-height:1.32; }
.res-carte p{ font-size:14.5px; color:var(--corps); } /* gris relevé pour le contraste AA (les #98A2B3 / #B0B8C4 étaient sous 2,6:1) */
.res-carte .duree{ margin-top:auto; font-size:13.5px; color:#667085; display:flex; align-items:center; gap:7px; }
.res-carte .duree svg, .res-aside .item .duree svg{ width:15px; height:15px; flex:none; }
.res-aside .item .duree{ display:flex; align-items:center; gap:6px; }

.res-aside{
  background:linear-gradient(180deg,#FCFDFE 0%,#F4F6FA 100%);
  border-radius:20px; padding:26px 24px; box-shadow:var(--ombre-carte);
  position:sticky; top:180px;
}
.res-aside h2{ font-size:21px; font-weight:700; margin-bottom:18px; }
.res-aside .item{ display:grid; grid-template-columns:96px 1fr auto; gap:14px; align-items:start; padding:14px 0; }
.res-aside .item .vign{ aspect-ratio:4/3; border-radius:10px; background:#E7EBF1 center/cover no-repeat; }
.res-aside .item .type{ font-family:'Satoshi',sans-serif; font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; }
.res-aside .item h3{ font-size:14.5px; font-weight:600; line-height:1.35; margin-top:4px; }
.res-aside .item .duree{ font-size:13px; color:#667085; margin-top:6px; }
.res-aside .item .rang{ font-family:'Satoshi',sans-serif; font-weight:500; font-size:23px; color:var(--ink); }

/* Bandeau infolettre */
.infolettre{ padding:20px 0 84px; }
.infolettre .carte{
  position:relative; overflow:hidden; border-radius:26px; padding:52px 56px;
  background:linear-gradient(100deg,#FCE7F1 0%,#F1F0FB 44%,#E6F4FB 74%,#E6F7F5 100%);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:36px; align-items:center;
}
.infolettre canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.75; }
.infolettre .carte > div{ position:relative; z-index:1; }
.infolettre h2{ font-size:clamp(26px,3vw,34px); font-weight:700; }
.infolettre h2 span{ color:#8B7BD8; }
.infolettre h2 em{ font-style:normal; color:#FE2977; }
.infolettre p{ margin-top:12px; font-size:16.5px; color:var(--corps); }
.infolettre form{ display:flex; gap:0; background:#fff; border-radius:999px; padding:6px; box-shadow:var(--ombre-carte); }
.infolettre input[type=email]{ flex:1; border:0; padding:14px 22px; font:inherit; border-radius:999px; }
.infolettre input[type=email]:focus{ outline:2px solid var(--accent); }
.infolettre .mentions{ margin-top:14px; font-size:13.5px; color:var(--sourdine); }
.info-retour{ margin:0 0 12px; padding:12px 16px; border-radius:12px; font-size:15px; }
.info-retour.ok{ background:#E4F4F0; color:#0E7C63; }
.info-retour.erreur{ background:#FDECE8; color:#B0321E; }
.infolettre .mentions label{ display:flex; gap:9px; align-items:flex-start; }

/* ============ Article ============ */
/* ⛔ .art-entete est posé sur un élément .boite : un padding en raccourci
   efface le retrait horizontal du conteneur. Toujours le réécrire.
   Frame 127-49 : retour à 161, titre à 203, méta à 391. */
.art-entete{ padding:11px 32px 8px; }
.retour{ display:inline-flex; align-items:center; gap:14px; font-family:'Satoshi',sans-serif; font-weight:700; font-size:20px; line-height:1.35; color:#0B172E; }
.retour::before{ content:"\2190"; font-size:23px; }
.art-entete h1{ margin-top:15px; font-size:clamp(32px,5vw,72px); font-weight:700; line-height:1.081; color:#0B172E; max-width:1179px; }
.art-meta{ margin-top:32px; display:flex; align-items:center; gap:20px; font-family:'Satoshi',sans-serif; font-weight:400; font-size:20px; line-height:1.35; color:#0B172E; }
.art-meta b{ font-family:'Satoshi',sans-serif; font-weight:700; color:#0B172E; }
.art-meta .sep{ width:1px; height:24px; background:var(--ligne); }
.art-image{ margin-top:30px; aspect-ratio:1280/560; border-radius:18px; overflow:hidden; background:var(--accent-voile) center/cover no-repeat; }
.art-chapo{ margin-top:34px; font-size:17.5px; color:var(--corps); }

.art-corps{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:52px; padding:44px 32px 60px; align-items:start; }
.art-texte h2{ font-size:26px; font-weight:700; margin:38px 0 16px; }
.art-texte h2 .num{ color:var(--accent); }
.art-texte h3{ font-size:20px; font-weight:700; margin:26px 0 12px; }
.art-texte p{ margin:0 0 18px; font-size:17px; }
.art-texte ul{ margin:0 0 20px; padding-left:0; }
.art-texte ul li{ position:relative; padding-left:26px; margin-bottom:9px; font-size:17px; }
.art-texte ul li::before{ content:""; position:absolute; left:0; top:10px; width:9px; height:9px; border-radius:50%; background:var(--accent); }
.art-aide{
  display:inline-flex; align-items:center; gap:12px; margin-top:16px;
  font-size:16.5px; color:var(--ink);
}
.art-aide a{ color:var(--accent); font-weight:600; }

.art-aside{ position:sticky; top:130px; display:flex; flex-direction:column; gap:26px; }
.sommaire{ background:linear-gradient(180deg,#FCFDFE 0%,#F4F6FA 100%); border-radius:18px; padding:24px 22px; box-shadow:var(--ombre-carte); }
.sommaire h2{ font-size:19px; font-weight:700; margin-bottom:14px; }
.sommaire a{ display:flex; gap:11px; padding:9px 0 9px 12px; font-size:15px; color:var(--corps); border-left:3px solid transparent; }
.sommaire a b{ color:var(--accent); font-family:'Satoshi',sans-serif; }
.sommaire a.actif{ border-left-color:var(--accent); color:var(--ink); font-weight:600; }
.lies{ border-top:2px solid var(--accent); padding-top:18px; }
.lies h2{ font-size:15px; font-weight:700; margin-bottom:12px; border-left:3px solid var(--accent); padding-left:10px; }
.lies .item{ display:grid; grid-template-columns:56px 1fr; gap:12px; padding:9px 0; }
.lies .item .vign{ aspect-ratio:1; border-radius:8px; background:#E7EBF1 center/cover no-repeat; }
.lies .item p{ font-size:13px; line-height:1.35; }
.lies .item small{ font-size:12.5px; color:#667085; }

/* ============ Vos métiers (index) ============ */
.metiers-grille{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; padding:10px 0 80px; }
.carte-metier{
  display:flex; flex-direction:column; border-radius:22px; overflow:hidden; background:#fff;
  box-shadow:var(--ombre-carte); transition:transform .18s ease, box-shadow .18s ease;
}
.carte-metier:hover{ transform:translateY(-4px); box-shadow:0 30px 60px -34px rgba(11,23,46,.4); }
.carte-metier .photo{ aspect-ratio:16/10; background:center/cover no-repeat; display:block; }
.carte-metier.rose .photo{ background-color:#FFF1F6; background-image:linear-gradient(150deg,#FFD9E8 0%,#F7F9FC 70%); }
.carte-metier.teal .photo{ background-color:#EFF7F6; background-image:linear-gradient(150deg,#CFEAE8 0%,#F7F9FC 70%); }
.carte-metier.bleu .photo{ background-color:#F1F5FD; background-image:linear-gradient(150deg,#D5E1F7 0%,#F7F9FC 70%); }
.carte-metier .corps{ padding:24px 26px 28px; display:flex; flex-direction:column; gap:10px; flex:1; }
.carte-metier h2{ font-size:21px; font-weight:700; }
.carte-metier p{ font-size:15.5px; color:var(--corps); }
.carte-metier .aller{ margin-top:auto; font-family:'Satoshi',sans-serif; font-weight:700; font-size:14.5px; }
.carte-metier .aller::after{ content:" \2192"; }
.carte-metier.rose .aller, .carte-metier.rose h2 span{ color:#FE2977; }
.carte-metier.teal .aller, .carte-metier.teal h2 span{ color:#028D9D; }
.carte-metier.bleu .aller, .carte-metier.bleu h2 span{ color:#0161D8; }

/* ============ Contact ============ */
/* ============================================================
   Contact — d'après la frame 410-1101 (relevée le 29/08/2026)
   Le formulaire est rédigé en phrases à trous, pas en champs empilés.
   ============================================================ */
/* Frame 410-1101 : titre à 238 (72 px), chapô à 450, « Vous avez un projet »
   à 930 (72 px lui aussi), texte de gauche à 1149. */
.ct-heros{ position:relative; overflow:hidden; padding:88px 0 392px; text-align:center; }
.ct-heros .vague-fond{
  position:absolute; left:0; right:0; bottom:-30%; width:100%; height:auto;
  z-index:0; pointer-events:none; opacity:.9;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 42%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 42%);
}
.ct-heros .boite{ position:relative; z-index:1; }
.ct-heros h1{ font-size:clamp(32px,5vw,72px); font-weight:700; line-height:1.081; color:#0B172E; max-width:1166px; margin:0 auto; }
.ct-heros h1 .degrade,
.ct-cote h2 .degrade{ background-image:linear-gradient(180deg,#D11883 0%,#674FC5 100%); }
.ct-heros .chapo{ margin:57px auto 0; max-width:780px; font-size:20px; font-weight:600; line-height:1.21; color:#101828; }

.ct-grille{ display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1fr); gap:56px; align-items:start; padding-bottom:70px; }
.ct-cote h2{ font-size:clamp(26px,5vw,72px); font-weight:700; line-height:1.081; color:#0B172E; }
.ct-cote .intro{ margin-top:24px; font-size:20px; line-height:1.21; color:#0B172E; max-width:352px; }
.ct-promesses{ margin-top:44px; display:flex; flex-direction:column; gap:30px; }
.ct-promesses li{ display:flex; align-items:center; gap:22px; }
.ct-promesses .ico{
  flex:none; width:74px; height:74px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 16px 34px -22px rgba(11,23,46,.34);
}
.ct-promesses .ico svg{ width:34px; height:34px; }
.ct-promesses .ico img{ display:block; width:42px; height:42px; object-fit:contain; }
/* Teintes de la charte (frame Figma 625:1887) : ces trois pastilles portaient
   #EE3D7F, #2E9C8E et #5B76B8, proches mais fausses. */
.ct-promesses .ico.rose{ color:var(--rose); }
.ct-promesses .ico.teal{ color:var(--teal); }
.ct-promesses .ico.bleu{ color:var(--bleu); }
.ct-promesses b{ font-family:'Satoshi',sans-serif; font-weight:700; font-size:18px; color:var(--ink); line-height:1.3; }
/* Sarah a recoloré ces trois libellés dans la maquette : chacun prend la
   couleur de son univers. */
.ct-promesses b.rose{ color:var(--rose); }
.ct-promesses b.teal{ color:var(--teal); }
.ct-promesses b.bleu{ color:var(--bleu); }
.ct-direct{ margin-top:44px; padding-top:34px; border-top:1px solid var(--ligne); }
/* Retour de Sarah du 16/09 : « l'email n'a pas le bon dégradé ». Dans la
   maquette, téléphone et e-mail ne forment qu'un seul bloc de texte, traversé
   par un même dégradé #FF0066 → #3D65E0 : l'e-mail en reçoit la fin. */
.ct-direct{
  /* Axe vertical, comme les poignées de la maquette : le téléphone prend le
     rose, l'e-mail la fin bleue. À 150° le texte n'occupait que le début du
     dégradé, la boîte étant bien plus large que les deux lignes. */
  background-image:linear-gradient(180deg,#FF0066 26%,#3D65E0 100%);
  -webkit-background-clip:text; background-clip:text;
}
.ct-direct .tel a,
.ct-direct .mail a{ color:transparent; }
.ct-direct .tel a{ font-family:'Satoshi',sans-serif; font-weight:700; font-size:clamp(26px,2.7vw,34px); }
.ct-direct .mail{ margin-top:12px; }
.ct-direct .mail a{ font-family:'Satoshi',sans-serif; font-weight:700; font-size:19px; }

.ct-carte{
  background:#fff; border-radius:26px; padding:40px 38px 44px;
  box-shadow:0 34px 78px -44px rgba(11,23,46,.34);
}
.ct-titre{ font-family:'Satoshi',sans-serif; font-weight:700; font-size:clamp(22px,2.2vw,29px); color:var(--nuit); margin-bottom:30px; }
/* Retour d'envoi (page rechargée par wy-forms) */
.ct-retour{ margin:-10px 0 24px; padding:14px 18px; border-radius:12px; font-size:15.5px; line-height:1.45; }
.ct-retour.ok{ background:#E4F4F0; color:#0E7C63; }
.ct-retour.erreur{ background:#FDECE8; color:#B0321E; }
/* ---------- Formulaire de contact ----------
   Refait le 16/09 d'après la frame Figma 900:1135 : la cliente a remplacé son
   formulaire « à trous » (une phrase où l'on remplit les blancs) par des cases
   classiques, en deux temps — l'identité d'abord, la qualification ensuite et
   facultative. Les `name` n'ont pas bougé : wy-leads et la remontée Sellsy
   lisent les mêmes champs qu'avant. */
.ct-form-intro{ margin:-14px 0 26px; font-size:15.5px; line-height:1.5; color:var(--corps); }
.ct-bloc{ border:0; padding:0; margin:0 0 30px; }
.ct-bloc legend{
  display:flex; align-items:center; gap:12px; width:100%; padding:0; margin-bottom:16px;
  font-family:'Satoshi',sans-serif; font-weight:700; font-size:20px; color:var(--nuit);
}
/* La pastille « Facultatif » de la maquette, posée au bout de la ligne. */
.ct-facultatif{
  margin-left:auto; padding:7px 15px; border-radius:999px;
  background:#F1F4F9; color:var(--sourdine);
  font-family:'Inter',sans-serif; font-weight:600; font-size:12px;
  letter-spacing:.06em; text-transform:uppercase;
}
.ct-bloc-intro{ margin:-6px 0 18px; font-size:14.5px; line-height:1.5; color:var(--corps); }
.ct-duo{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
/* Les champs se suivent ; le duo prénom/nom pose sa propre grille. */
.ct-bloc > input,
.ct-bloc > select,
.ct-duo > input{
  display:block; width:100%; margin-bottom:14px;
  border:1px solid var(--ligne); border-radius:12px; padding:15px 18px;
  font:inherit; font-size:15.5px; color:var(--ink); background:#FBFCFE;
}
.ct-duo > input{ margin-bottom:0; }
.ct-duo{ margin-bottom:14px; }
.ct-bloc select{
  appearance:none; cursor:pointer; padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235B76B8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 18px center; background-size:12px 8px;
}
/* Le libellé vit dans la case : il doit rester lisible, pas gris pâle. */
.ct-form ::placeholder{ color:#7A879C; opacity:1; }
.ct-form select:invalid,
.ct-form select:has(option[value=""]:checked){ color:#7A879C; }
.ct-form input:focus,
.ct-form select:focus,
.ct-form textarea:focus{ outline:2px solid var(--accent); border-color:transparent; }
.ct-form textarea{
  width:100%; min-height:132px; resize:vertical;
  border:1px solid var(--ligne); border-radius:12px; padding:15px 18px;
  font:inherit; font-size:15.5px; color:var(--ink); background:#FBFCFE; line-height:1.5;
}
.ct-form .btn{ margin-top:4px; padding:18px 34px; font-size:17px; }
.ct-consent{ display:flex; align-items:flex-start; gap:12px; margin-top:24px; font-size:14px; line-height:1.45; color:var(--corps); }
.ct-consent input{ margin-top:3px; width:17px; height:17px; flex:none; }
.ct-rgpd{ margin-top:16px; font-size:14px; line-height:1.45; color:var(--corps); }
.ct-rgpd a{ color:var(--accent); text-decoration:underline; }

.ct-mains{ padding:0 0 90px; }
.ct-mains .carte{
  background:linear-gradient(180deg,#FDFDFE 0%,#F5F7FB 100%);
  border-radius:26px; padding:48px 40px 54px; text-align:center;
  box-shadow:0 26px 60px -44px rgba(11,23,46,.3);
}
.ct-mains h2{ font-size:clamp(24px,2.7vw,36px); font-weight:700; color:var(--nuit); margin-bottom:40px; }
.ct-univers{ display:grid; grid-template-columns:repeat(3,1fr); }
.ct-univers > div{
  padding:0 16px; border-left:1px solid var(--ligne);
  display:flex; align-items:center; gap:14px; text-align:left;
}
.ct-univers > div:first-child{ border-left:0; }
.ct-univers .logo{ flex:none; margin:0; }
.ct-univers .logo img{ display:block; width:52px; height:52px; object-fit:contain; }
.ct-univers .nom{ font-family:'Satoshi',sans-serif; font-weight:700; font-size:clamp(14px,1.42vw,19px); text-transform:uppercase; letter-spacing:.01em; white-space:nowrap; }
.ct-univers .nom.rose{ color:var(--rose); }
.ct-univers .nom.teal{ color:var(--teal); }
.ct-univers .nom.bleu{ color:var(--bleu); }
.ct-univers > div > p + p{ margin-top:16px; font-size:16.5px; line-height:1.4; color:var(--ink); }

.bloc-info{
  background:linear-gradient(180deg,#FCFDFE 0%,#F4F6FA 100%);
  border-radius:20px; padding:26px 26px 28px; box-shadow:var(--ombre-carte);
}
.bloc-info h2{ font-size:19px; font-weight:700; margin-bottom:12px; }
.bloc-info p, .bloc-info a{ font-size:15.5px; color:var(--corps); }
.bloc-info .gros{ font-family:'Satoshi',sans-serif; font-weight:700; font-size:21px; color:var(--ink); }

/* Prise de rendez-vous : agenda Calendly dans un cadre, affiché seulement
   quand l'URL est renseignée dans page-contact.php. */
.ct-rdv{ padding:0 0 70px; scroll-margin-top:100px; }
.ct-rdv .carte{
  background:#fff; border-radius:26px; padding:44px 40px 40px; text-align:center;
  box-shadow:0 26px 60px -44px rgba(11,23,46,.3);
}
.ct-rdv .h2{ margin-bottom:14px; }
.ct-rdv .intro{ max-width:620px; margin:0 auto 30px; font-size:17px; line-height:1.5; color:var(--corps); }
.ct-rdv iframe{ display:block; width:100%; height:700px; border:0; border-radius:18px; background:#fff; }

/* ============ Pages de texte ============ */
.texte-corps{ max-width:820px; padding-bottom:80px; }
.texte-corps h2{ font-size:26px; font-weight:700; margin:36px 0 14px; }
.texte-corps h3{ font-size:20px; font-weight:700; margin:26px 0 10px; }
.texte-corps p{ margin:0 0 16px; font-size:17px; }
.texte-corps ul{ margin:0 0 18px; }
.texte-corps ul li{ position:relative; padding-left:26px; margin-bottom:8px; font-size:17px; }
.texte-corps ul li::before{ content:""; position:absolute; left:0; top:10px; width:8px; height:8px; border-radius:50%; background:var(--accent); }
.texte-corps table{ width:100%; border-collapse:collapse; margin:0 0 22px; font-size:16px; }
.texte-corps th, .texte-corps td{ border:1px solid var(--ligne); padding:12px 14px; text-align:left; }
.texte-corps th{ background:var(--brume); font-family:'Satoshi',sans-serif; }

/* ============ CortexIA ============ */
/* ============================================================
   CortexIA — d'après la frame 410-1282 (relevée le 29/08/2026)
   ============================================================ */
/* Refonte relevée le 02/09/2026 sur la frame 578-3336 : la page passe au
   violet de la marque CortexIA et le héros prend le dégradé pleine largeur. */
.gabarit-cortexia{ --accent:#A787D0; --accent-vif:#B2A1DF; --accent-voile:#F3EDFA; }

.ia-heros{ position:relative; overflow:hidden; padding:52px 0 74px;
  background:linear-gradient(31deg,#DCCBF2 0%,#C9AAF2 22%,#D4C7E5 66%,#EEE4FB 98%); }
/* Calé sur la frame 578:3336 : titre et visuel commencent tous deux à y=210,
   d'où `start` et non `center`. Le visuel occupe x=707 -> 1417 sur 1440. */
.ia-heros-grille{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:38px; align-items:start; }
.ia-heros{ padding-top:210px; }
@media (max-width:1080px){ .ia-heros{ padding-top:34px; } }
.ia-heros h1{ font-size:clamp(34px,4.2vw,58px); font-weight:700; line-height:1.06; color:#fff;
  font-family:'Satoshi',sans-serif; }
.ia-heros .chapo{ margin-top:26px; font-size:20px; line-height:1.2; color:#A787D0; font-weight:600; max-width:32em; }
.ia-heros .actions{ display:flex; gap:16px; margin-top:32px; flex-wrap:wrap; }
/* CortexIA garde la pilule ronde : Bouton Type 1 (280 x 51) et Type 5 (151 x 49). */
.ia-heros .actions .btn{ height:51px; padding:0 26px; border-radius:24px; font-size:16px; }
.ia-heros .actions .btn-contour{ height:49px; }

/* La capture déborde vers la droite, comme sur la frame. */
/* La maquette pose le visuel de 707 à 1417 (710 de large) dans 1440. La colonne
   de grille va de 733 à 1342 : on la déborde de 26 à gauche et 75 à droite pour
   retomber exactement dessus. Avant, un `margin-right:-140px` seul l'envoyait
   jusqu'à 1482, soit 65 px hors de la maquette et hors de la fenêtre. */
.ia-heros .visuel{ margin-left:-26px; margin-right:-75px; }
.ia-heros .visuel img{ width:100%; height:auto; display:block;
  border-radius:14px; box-shadow:0 30px 70px -34px rgba(11,23,46,.34); }

.ia-etapes{ padding:70px 0 78px; }
.ia-etapes .h2{ text-align:center; margin-bottom:48px; }
.ia-etapes-grille{ display:grid; grid-template-columns:repeat(3,1fr); gap:56px; align-items:start; }
.ia-etape .rang{
  display:flex; align-items:center; gap:14px;
  font-family:'Satoshi',sans-serif; font-weight:700; font-size:19px; color:var(--nuit);
  margin-bottom:26px;
}
.ia-etape .rang span{
  flex:none; width:52px; height:52px; border-radius:50%;
  border:1.6px solid var(--accent); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:700;
}
.ia-etape .carte{
  position:relative; background:#fff; border-radius:20px; padding:26px 24px; min-height:300px;
  box-shadow:0 24px 54px -34px rgba(11,23,46,.3);
}
/* Le trait qui relie le numéro à sa carte, puis les cartes entre elles. */
.ia-etape .rang span::after{
  content:""; position:absolute; margin-top:78px; width:1.6px; height:44px; background:var(--accent);
}
.ia-etapes-grille > .ia-etape + .ia-etape .carte::before{
  content:""; position:absolute; left:-40px; top:50%; width:24px; height:1.6px; background:var(--accent);
}
.ia-etapes-grille > .ia-etape + .ia-etape .carte::after{
  content:""; position:absolute; left:-20px; top:50%; width:8px; height:8px; margin-top:-3.2px;
  border-radius:50%; background:var(--accent);
}
.ia-etape:first-child .carte{ display:flex; align-items:center; justify-content:center; }
.ia-etape .formats{ display:flex; gap:14px; justify-content:center; width:100%; }
/* La frame pose ici trois pictogrammes de format, sans carton ni libellé. */
.ia-etape .fichier{ flex:none; display:flex; align-items:center; justify-content:center; }
.ia-etape .fichier img{ display:block; width:76px; height:76px; object-fit:contain; }
.ia-etape .ia-libelle{ font-family:'Satoshi',sans-serif; font-weight:700; font-size:17px; color:var(--ink); margin-top:14px; }
.ia-etape .ia-valeur{
  margin-top:10px; padding:14px 16px; border-radius:10px; background:#F5F7FB;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:15px; color:var(--corps);
}
.ia-etape .chevron{
  width:9px; height:9px; border-right:1.8px solid #9AA6BC; border-bottom:1.8px solid #9AA6BC;
  transform:rotate(45deg) translateY(-3px);
}
.ia-etape .jauge{ display:flex; gap:5px; }
.ia-etape .jauge i{ width:22px; height:11px; border-radius:2px; background:#DDE3ED; display:block; }
.ia-etape .jauge i.on{ background:#0161D8; }
.ia-etape .question{ font-family:'Satoshi',sans-serif; font-weight:700; font-size:16.5px; line-height:1.35; color:var(--ink); }
.ia-etape .reponses{ margin-top:18px; display:flex; flex-direction:column; gap:8px; }
.ia-etape .reponses li{
  display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:9px;
  font-size:15px; color:var(--corps);
}
.ia-etape .reponses li b{
  flex:none; width:26px; height:26px; border-radius:50%; background:#F0F3F8; color:var(--corps);
  display:flex; align-items:center; justify-content:center; font-weight:600; font-size:13.5px;
}
.ia-etape .reponses li.juste{ background:#E4F4F0; color:#0E7C63; }
.ia-etape .reponses li.juste b{ background:#CDEBE2; color:#0E7C63; }

.ia-exigences{ padding:16px 0 78px; }
.ia-exigences-grille{ display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1fr); gap:40px; align-items:center; }
.ia-exigences h2{ font-size:clamp(24px,2.3vw,32px); font-weight:700; color:var(--nuit); line-height:1.194; }
.ia-exigences .mentions{ display:flex; flex-direction:column; gap:26px; }
/* Les quatre mentions sont décalées les unes par rapport aux autres. */
.ia-exigences .mentions li{ font-family:'Satoshi',sans-serif; font-weight:700; font-size:clamp(19px,2vw,26px); }
.ia-exigences .mentions li:nth-child(1){ margin-left:2%; }
.ia-exigences .mentions li:nth-child(2){ margin-left:8%; }
.ia-exigences .mentions li:nth-child(3){ margin-left:0; }
.ia-exigences .mentions li:nth-child(4){ margin-left:4%; }
.ia-exigences .mentions .bleu{ color:#0161D8; }
.ia-exigences .mentions .teal{ color:#028D9D; }
.ia-exigences .mentions .violet{ color:#B2A1DF; }
.ia-exigences .mentions .rose{ color:#FE2977; }

.ia-partage{ background:var(--brume); padding:70px 0; }
.ia-partage-grille{ display:grid; grid-template-columns:minmax(0,1.28fr) minmax(0,1fr); gap:52px; align-items:center; }
.carte-biblio{ background:#fff; border-radius:18px; padding:26px 28px 30px; box-shadow:0 26px 60px -38px rgba(11,23,46,.32); }
.carte-biblio .entete{ display:flex; align-items:center; gap:12px; padding-bottom:18px; border-bottom:1px solid var(--ligne); }
.carte-biblio .titre{ font-family:'Satoshi',sans-serif; font-weight:700; font-size:19px; margin-right:auto; }
.carte-biblio .btn-mini{ background:var(--accent); color:#fff; border-radius:9px; padding:9px 16px; font-size:14px; font-weight:600; }
.carte-biblio .btn-mini.rond{ padding:9px 12px; }
.carte-biblio table{ width:100%; border-collapse:collapse; margin-top:8px; }
.carte-biblio th{ text-align:left; font-family:'Satoshi',sans-serif; font-weight:700; font-size:15px; color:var(--ink); padding:14px 8px; }
.carte-biblio td{ padding:14px 8px; font-family:'Satoshi',sans-serif; font-weight:700; font-size:15px; color:var(--ink); }
.carte-biblio .barre{ display:block; width:140px; height:14px; border-radius:7px; background:#EDEFF3; }
.carte-biblio .etat{ display:inline-block; padding:8px 18px; border-radius:8px; font-size:14.5px; font-weight:700; }
.carte-biblio .etat.relire{ background:#FDECE8; color:#D2563F; border:1px solid #F3C3B6; }
.carte-biblio .etat.validee{ background:#E4F4F0; color:#0E7C63; border:1px solid #BEE3D8; }
.carte-biblio .etat.partagee{ background:#E8EEFA; color:#0161D8; border:1px solid #C3D2EE; }
.ia-partage .texte{ text-align:right; }
.ia-partage .texte h2{ font-size:clamp(24px,2.3vw,32px); font-weight:700; line-height:1.194; color:var(--nuit); }
.ia-partage .texte p{ margin-top:20px; font-size:16.5px; line-height:1.5; color:var(--corps); }

/* Les trois atouts sous la bibliothèque (Group 131 : 964 x 82, picto 82 px,
   libellé Satoshi 700 / 24 px). */
.ia-atouts{
  display:flex; justify-content:center; gap:32px; flex-wrap:wrap;
  padding:46px 0 0;
}
.ia-atouts li{ display:flex; align-items:center; gap:0; }
.ia-atouts .ico{
  flex:none; width:82px; height:82px; display:flex; align-items:center; justify-content:center;
  color:var(--accent);
}
.ia-atouts .ico svg{ width:52px; height:52px; }
.ia-atouts b{
  font-family:'Satoshi',sans-serif; font-weight:700; font-size:24px; line-height:1.35;
  color:#101828;
}

/* Bande crédits — carte 1284 x 265, rayon 8, même dégradé que le héros. */
.ia-credits{ padding:76px 0 82px; }
.ia-credits .carte{
  margin:0 -20px; border-radius:8px; padding:34px 44px;
  background:linear-gradient(61deg,#DCCBF2 0%,#C9AAF2 22%,#D4C7E5 66%,#EEE4FB 98%);
  display:grid; grid-template-columns:minmax(0,266px) 2px 171px minmax(0,1fr);
  gap:38px; align-items:center; min-height:265px;
}
.ia-credits .titre{
  font-family:'Satoshi',sans-serif; font-weight:700; font-size:32px; line-height:1.35; color:#fff;
}
.ia-credits .titre em{ font-style:normal; color:#FE2977; }
.ia-credits .mention{ margin-top:24px; font-size:20px; line-height:1.2; font-weight:600; color:#fff; }
/* Le compteur est posé dans un anneau de 171 px, filet de 11 px : moitié
   blanche, moitié #FE2977 à bout rond (Ellipse 78 / Ellipse 88 de la frame). */
.ia-credits .sep{ width:2px; height:188px; background:#D9D9D9; border-radius:2px; justify-self:center; }
.ia-credits .anneau{ position:relative; width:171px; height:171px; justify-self:center; }
.ia-credits .anneau svg{ position:absolute; inset:0; width:100%; height:100%; }
.ia-credits .compteur{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  font-family:'Satoshi',sans-serif; font-weight:700; font-size:32px; line-height:1.15; color:#fff;
}
.ia-credits .droite{ display:flex; flex-direction:column; align-items:flex-end; gap:26px; }
.ia-credits .paliers{ display:flex; align-items:flex-end; gap:58px; }
.ia-credits .paliers li{ display:flex; flex-direction:column; align-items:center; gap:10px; color:#fff; }
.ia-credits .paliers .ico{ width:77px; height:77px; display:flex; align-items:flex-end; justify-content:center; }
.ia-credits .paliers .ico svg{ width:100%; height:auto; }
.ia-credits .paliers span{ font-size:16px; font-weight:600; line-height:1.2; text-align:center; max-width:131px; }
/* Bouton « Trouvez le plan adapté » : 263 x 59, contour 3 px. */
.ia-credits .btn-plan{
  min-width:263px; height:59px; border-radius:24px; border:3px solid #A787D0; background:#fff;
  color:#A787D0; font-family:'Satoshi',sans-serif; font-weight:700; font-size:20px; line-height:1.35;
  display:inline-flex; align-items:center; justify-content:center;
}
.ia-credits .btn-plan:hover{ background:#A787D0; color:#fff; }

.cortex-atouts{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:12px 0 78px; }
.atout{
  background:#fff; border-radius:20px; padding:28px 26px 30px; box-shadow:var(--ombre-carte);
  display:flex; flex-direction:column; gap:12px;
}
.atout .ico{
  width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg,#FFE3EF,#DEE8FB); color:#B24AD6;
}
.atout .ico svg{ width:28px; height:28px; }
.atout h2{ font-size:19px; font-weight:700; }
.atout p{ font-size:15.5px; color:var(--corps); }
.cortex-ecran-bloc{ display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:44px; align-items:center; padding:0 0 84px; }
.cortex-ecran-bloc .visuel{ aspect-ratio:1100/716; border-radius:20px; background:#F3F5FA center/cover no-repeat; box-shadow:var(--ombre-carte); }

/* ============ Candidats ============ */
/* Les six cartes du haut sont des liens vers les sections de la page
   (réponse de la cliente du 05/09). */
.cand-blocs{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; padding:6px 0 40px; }
.cand-bloc{
  background:linear-gradient(180deg,#FDFDFE 0%,#F4F6FA 100%); border-radius:20px;
  padding:28px 28px 30px; box-shadow:var(--ombre-carte); display:flex; flex-direction:column; gap:12px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.cand-bloc:hover{ transform:translateY(-2px); box-shadow:0 22px 50px -26px rgba(11,23,46,.36), 0 2px 6px rgba(11,23,46,.05); }
.cand-bloc .ico{ width:50px; height:50px; color:var(--accent); }
.cand-bloc h2{ font-size:19px; font-weight:700; }
.cand-bloc p{ font-size:15.5px; color:var(--corps); }
.cand-bloc .lien{
  margin-top:auto; padding-top:8px; display:inline-flex; align-items:center; gap:8px;
  font-family:'Satoshi',sans-serif; font-weight:700; font-size:14.5px; color:var(--accent);
}
.cand-bloc .lien::after{ content:"\2192"; display:inline-block; transition:transform .2s ease; }
.cand-bloc:hover .lien::after{ transform:translateX(3px); }

/* Sections ancrées : marge de défilement pour passer sous l'en-tête collant. */
.cand-section{ padding:44px 0; scroll-margin-top:100px; }
/* La frame centre les en-têtes de toutes les sections de cette page ; seul le
   héros reste aligné à gauche. Le contenu, lui, garde son alignement propre. */
.cand-section > .boite > .surtitre,
.cand-section > .boite > .h2,
.cand-section > .boite > .cand-intro,
.cand-titre-blocs{ text-align:center; }
.cand-section > .boite > .surtitre{ display:block; }
.cand-section > .boite > .cand-intro{ margin-left:auto; margin-right:auto; }
.cand-section + .cand-section{ border-top:1px solid var(--ligne); }
.cand-section .h2{ margin-bottom:22px; }
.cand-intro{ max-width:640px; font-size:17px; color:var(--corps); margin-bottom:28px; }
.sol-faq{ scroll-margin-top:100px; }

/* Le jour J : cases cochées en CSS seul, sur le modèle des puces-check du thème. */
.cand-checks{ display:grid; grid-template-columns:1fr 1fr; gap:14px 40px; max-width:1000px; }
.cand-checks li{ display:flex; align-items:flex-start; gap:14px; font-size:16.5px; color:var(--ink); }
/* La frame Candidats ne colore pas ces cases : pas de dégradé ici. */
.cand-checks .case{
  flex:none; width:22px; height:22px; margin-top:3px; border-radius:6px;
  border:1.6px solid var(--accent);
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat;
}

/* Le jour J : trois moments numérotés, comme la frame 77:1465. */
.cand-titre-blocs{ margin:34px 0 22px; }
.cand-etapes{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px; }
.cand-etape .num{
  width:34px; height:34px; margin-bottom:12px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Satoshi',sans-serif; font-weight:700; font-size:17px;
  color:#fff; background:var(--accent);
}
.cand-etape h3{ font-size:18px; font-weight:700; margin-bottom:14px; }
.cand-etape .cand-checks{ grid-template-columns:minmax(0,1fr); gap:16px; }
.cand-etape .cand-checks li{ font-size:15.5px; }
.cand-etape .cand-checks b{ display:block; font-weight:700; color:var(--ink); margin-bottom:3px; }
.cand-etape .cand-checks span span{ color:var(--corps); }
.cand-checklist-action{ margin-top:34px; }
.cand-avertissement{
  max-width:820px; margin:30px auto 0; font-size:14.5px; color:var(--corps);
}

/* Se préparer : trois colonnes courtes. */
.cand-colonnes{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px; }
.cand-colonnes h3{ font-size:18px; font-weight:700; margin-bottom:10px; }
.cand-colonnes p{ font-size:16px; color:var(--corps); }

/* Aménagements : deux paragraphes et un lien fléché. */
.cand-texte{ max-width:760px; display:flex; flex-direction:column; gap:16px; }
.cand-texte p{ font-size:16.5px; color:var(--corps); }
.cand-lien{
  align-self:flex-start; margin-top:6px; display:inline-flex; align-items:center; gap:8px;
  font-family:'Satoshi',sans-serif; font-weight:700; font-size:15px; color:var(--accent);
}
.cand-lien::after{ content:"\2192"; display:inline-block; transition:transform .2s ease; }
.cand-lien:hover::after{ transform:translateX(3px); }

/* Accès : un sélecteur de ville, un seul centre affiché à la fois (commun.js). */
.cand-choix{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:26px; font-size:17px; color:var(--ink); }
.cand-choix select{
  font:inherit; font-family:'Satoshi',sans-serif; font-weight:700; font-size:16px; color:var(--ink);
  min-width:220px; height:48px; padding:0 44px 0 18px; border-radius:24px;
  border:1.6px solid #D8DEE8; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B172E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") right 16px center/16px no-repeat;
  appearance:none; cursor:pointer;
}
.cand-choix select:focus{ outline:2px solid var(--accent); outline-offset:2px; }
.cand-centre{
  background:linear-gradient(180deg,#FDFDFE 0%,#F4F6FA 100%); border-radius:20px;
  padding:30px 32px 32px; box-shadow:var(--ombre-carte);
  /* Plan à gauche, fiche à droite : la répartition de la frame (818 / 1440). */
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:26px 30px; align-items:start;
}
.cand-centre:not(:has(.cand-plan)){ display:block; }
/* display:grid l'emporte sur la feuille par défaut du navigateur : sans cette
   ligne, l'attribut hidden ne masque plus les autres centres. */
.cand-centre[hidden]{ display:none; }
.cand-plan{
  grid-row:1 / span 2; border-radius:16px; overflow:hidden;
  background:var(--accent-voile); aspect-ratio:818 / 460; min-height:260px;
  /* min-width:0 sans quoi l'iframe impose sa largeur propre et déborde. */
  min-width:0; max-width:100%;
}
.cand-plan iframe{ display:block; width:100%; max-width:100%; height:100%; border:0; }
.cand-centre + .cand-centre{ margin-top:22px; }
.cand-centre-tete{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.cand-centre h3{ font-size:20px; font-weight:700; margin-bottom:6px; }
.cand-centre .adresse{ font-size:16px; color:var(--corps); }
.cand-centre .a-completer{ font-size:13.5px; color:var(--sourdine); font-style:italic; }
.cand-centre .btn{ padding:14px 22px; font-size:14.5px; }
/* Deux services de cartes à côté du lien transports : Alexis (15/09) ne
   veut pas que le candidat venu en voiture soit renvoyé vers un
   calculateur de transports en commun. */
.cand-itineraires{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.cand-itineraires .lien-plan{
  font-size:14.5px; font-weight:600; color:var(--accent);
  border-bottom:1px solid currentColor; padding-bottom:1px;
}
.cand-itineraires .lien-plan:hover{ color:var(--ink); }
/* Les accès de la maquette sont listés ligne par ligne, pas en paragraphe. */
.cand-acces{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.cand-acces li{ position:relative; padding-left:18px; font-size:15.5px; line-height:1.45; color:var(--corps); }
.cand-acces li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:7px; height:7px; border-radius:50%; background:var(--rose);
}
/* Consigne propre à un site (bagages interdits à Vaulx-en-Velin) : elle doit
   se voir, sans prendre le ton d'une alerte. */
.cand-avis{
  margin-top:20px; padding:14px 18px; border-radius:12px;
  background:var(--accent-voile); color:var(--ink);
  font-size:15px; line-height:1.45;
}
.cand-marge{ margin-top:22px; font-size:14.5px; line-height:1.45; color:var(--sourdine); }

.cand-centre-infos{
  display:grid; grid-template-columns:1fr 1fr; gap:32px;
  margin-top:26px; padding-top:24px; border-top:1px solid var(--ligne);
}
.cand-centre h4{ font-size:15.5px; font-weight:700; margin-bottom:8px; }
.cand-centre-infos p{ font-size:15.5px; color:var(--corps); }

/* Autour du centre : carrousel à défilement horizontal, une carte par flèche. */
/* Autour du centre : deux colonnes, Hébergements et Restaurants, chacune
   montrant une adresse à la fois — les flèches font passer à la suivante.
   Retour de Sarah du 16/09 ; son message du 07/09 disait déjà « un carrousel
   suffit pour faire défiler quand on clique sur la flèche ». */
.cand-alentours{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px; }
/* `min-width:0` : sans lui, la piste et ses trois fiches imposent leur largeur
   à la colonne de grille, et la page déborde sur petit écran. */
.cand-groupe{ position:relative; text-align:center; min-width:0; }
.cand-groupe .ic{ margin:0 auto 8px; }
/* Visuel large en tête de colonne, au rapport de la frame (555 x 274). */
.cand-visuel{ margin:0 0 18px; border-radius:18px; overflow:hidden; }
.cand-visuel img{ display:block; width:100%; height:auto; aspect-ratio:555 / 274; object-fit:cover; }
.cand-groupe-action{ margin-top:16px; }
/* Barre de recherche de la frame : champ large et bouton accolé. */
.cand-recherche{
  display:flex; gap:12px; max-width:700px; margin:0 auto 38px; flex-wrap:wrap;
}
.cand-recherche .cand-lieu{
  flex:1 1 320px; min-width:0; padding:15px 20px; font:inherit; font-size:16px;
  color:var(--ink); background:#fff; border:1.4px solid var(--ligne); border-radius:999px;
}
.cand-recherche .cand-lieu::placeholder{ color:var(--sourdine); }
.cand-recherche .cand-lieu:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.cand-recherche .btn{ flex:none; }
.cand-groupe .ic img{ display:block; width:88px; height:88px; object-fit:contain; margin:0 auto; }
.cand-groupe h3{ font-family:'Satoshi',sans-serif; font-weight:700; font-size:26px; color:var(--nuit); }
.cand-groupe .accroche{ margin:10px auto 22px; max-width:340px; font-size:16px; line-height:1.4; color:var(--corps); }
.cand-groupe .piste{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding:8px 0 20px; margin-top:-8px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.cand-groupe .piste::-webkit-scrollbar{ display:none; }
.cand-groupe .piste:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:18px; }
/* Une fiche occupe toute la largeur du groupe : on n'en voit qu'une. */
.cand-carte{
  flex:none; width:100%; scroll-snap-align:start; text-align:left;
  background:#fff; border-radius:18px; box-shadow:var(--ombre-carte);
  padding:24px 24px 26px; display:flex; flex-direction:column; gap:10px; min-height:168px;
}
.cand-carte h4{ font-family:'Satoshi',sans-serif; font-size:17px; font-weight:700; color:var(--ink); }
.cand-carte p{ font-size:15px; color:var(--corps); }
.cand-carte .detail{ margin-top:auto; padding-top:6px; font-size:13.5px; color:var(--sourdine); }
.cand-groupe .fleches{ display:flex; gap:12px; justify-content:center; margin-top:4px; }
.cand-groupe .fleches button{
  width:44px; height:44px; border-radius:50%; background:#fff; border:1.6px solid var(--ligne);
  display:flex; align-items:center; justify-content:center; font-size:20px; line-height:1; color:var(--ink);
  box-shadow:0 2px 6px rgba(11,23,46,.05);
  transition:border-color .15s ease, transform .15s ease, opacity .15s ease;
}
.cand-groupe .fleches button:hover{ border-color:var(--nuit); transform:translateY(-1px); }
.cand-groupe .fleches button:disabled{ opacity:.35; cursor:default; transform:none; border-color:var(--ligne); }
.cand-groupe .fleches button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.cand-partenaires{ margin-top:34px; text-align:center; font-size:14.5px; color:var(--sourdine); }

/* ============ Responsive ============ */
@media (max-width:1080px){
  .res-heros{ grid-template-columns:1fr; }
  .res-heros .texte{ padding:56px 0 36px; }
  .res-heros h1{ white-space:normal; }
  .res-vague{ min-height:240px; }
  .res-filtres{ position:static; }
  .res-corps{ grid-template-columns:1fr; }
  .res-grille{ grid-template-columns:1fr 1fr; }
  .res-aside{ position:static; }
  .art-corps{ grid-template-columns:1fr; }
  .art-aside{ position:static; }
  .metiers-grille{ grid-template-columns:1fr 1fr; }
  /* ⛔ la règle visait « .contact-grille » qui n'existe pas : le gabarit
     contact utilise .ct-grille, la page ne se repliait donc jamais. */
  .ct-grille{ grid-template-columns:1fr; gap:32px; }
  .ct-cote,
  .ct-carte{ min-width:0; }
  /* Les champs « à trous » gardaient une largeur minimale de 360 px et
     poussaient la colonne à 448 px sur un écran de 390 : pleine largeur. */
  .ct-carte{ padding:26px 20px 30px; }
  .ct-duo{ grid-template-columns:1fr; }
  .ct-bloc legend{ flex-wrap:wrap; font-size:18px; }
  .ct-facultatif{ margin-left:0; }
  .ct-heros h1,
  .ct-cote h2{ font-size:clamp(30px,8vw,44px); }
  .ct-univers{ grid-template-columns:1fr; }
  .ct-heros{ padding:34px 0 60px; }
  .ct-mains .carte{ padding:32px 22px 36px; }
  .infolettre .carte{ grid-template-columns:1fr; padding:34px 26px; }
  /* Le titre en trois lignes forcées était coupé par la carte à 390 px. */
  .infolettre h2{ font-size:24px; }
  .infolettre h2 br{ display:none; }
  /* Le bouton « S'abonner » sortait de la carte : champ et bouton s'empilent. */
  .infolettre form{ flex-direction:column; gap:8px; border-radius:22px; padding:8px; }
  .infolettre input[type=email], .infolettre form .btn{ width:100%; }
  /* CortexIA : tous les blocs à deux ou trois colonnes se replient. */
  .ia-heros-grille{ grid-template-columns:1fr; }
  .ia-heros .visuel{ margin-right:0; }
  .ia-etapes-grille{ grid-template-columns:1fr; gap:34px; }
  .ia-exigences-grille{ grid-template-columns:1fr; }
  .ia-partage-grille{ grid-template-columns:1fr; }
  .ia-partage .texte{ text-align:left; }
  .carte-biblio{ overflow-x:auto; }
  .ia-atouts{ gap:18px; }
  .ia-credits{ padding:44px 0; }
  .ia-credits .carte{ grid-template-columns:1fr; margin:0; padding:28px 22px; min-height:0; gap:24px; }
  .ia-credits .sep{ display:none; }
  .ia-credits .anneau{ justify-self:start; }
  .ia-credits .droite{ align-items:flex-start; }
  .ia-credits .paliers{ gap:26px; flex-wrap:wrap; }
  .cortex-atouts{ grid-template-columns:1fr 1fr; }
  .cortex-ecran-bloc{ grid-template-columns:1fr; }
  .cand-blocs{ grid-template-columns:1fr; }
  .cand-section{ padding:36px 0; }
  .cand-checks{ grid-template-columns:1fr; }
  .cand-etapes{ grid-template-columns:minmax(0,1fr); gap:30px; }
  .cand-colonnes{ grid-template-columns:1fr; gap:24px; }
  .cand-choix{ align-items:stretch; flex-direction:column; gap:10px; }
  .cand-choix select{ width:100%; }
  .cand-centre{ padding:24px 22px 26px; grid-template-columns:minmax(0,1fr); }
  .cand-plan{ grid-row:auto; min-height:220px; }
  .cand-centre-infos{ grid-template-columns:1fr; gap:20px; }
  .cand-alentours{ grid-template-columns:minmax(0,1fr); gap:40px; }
  .cand-recherche{ margin-bottom:30px; }
  .cand-recherche .btn{ flex:1 1 100%; }
  .ct-rdv .carte{ padding:32px 22px 36px; }
  .ct-rdv iframe{ height:640px; }
}
@media (max-width:640px){
  .res-grille{ grid-template-columns:1fr; }
  .metiers-grille{ grid-template-columns:1fr; }
  .cortex-atouts{ grid-template-columns:1fr; }
  .formulaire{ padding:26px 22px; }
  .formulaire .duo{ grid-template-columns:1fr; }
}

/* Lecture continue : séparateur entre deux articles enchaînés. Il sert
   aussi de lien cliquable quand le script ne prend pas la main. */
.art-suite{ max-width:1180px; margin:0 auto; padding:0 24px 60px; }
.art-suite-lien{
  display:flex; flex-direction:column; gap:6px; padding:26px 30px;
  border-top:2px solid var(--accent); border-radius:0 0 18px 18px;
  background:linear-gradient(180deg,#FFFFFF 0%,#F4F6FA 100%);
}
.art-suite-lien span{ font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.art-suite-lien b{ font-family:'Satoshi',sans-serif; font-size:22px; line-height:1.3; color:var(--ink); }
.art-suite-lien:hover b{ color:var(--accent); }
@media (max-width:760px){
  .art-suite{ padding:0 16px 40px; }
  .art-suite-lien{ padding:20px 18px; }
  .art-suite-lien b{ font-size:19px; }
}

/* ============================================================
   Relevé MCP Figma du 23/09/2026 — CortexIA (687:2098) et Contact (900:1135),
   lues sur la copie TCUUcIEr7qjMYKqPL6JkaK. Positions prises dans les
   métadonnées (haut des nœuds), contrôlées sur l'export 1:1 et une capture
   Playwright à 1440 px. Au-dessous de 1100 px, les règles d'origine restent.
   ============================================================ */
@media (min-width:1100px){
  /* ---------- CortexIA ---------- */
  /* Héros 868 px, fond 33° aux arrêts du MCP ; titre 72 / 1,08 sur cinq lignes
     (largeur 600), chapô Inter 600 / 20 sur 24 à 42 px, boutons à 50 px ;
     capture de l'appli à x=707, 710 × 524. */
  .ia-heros{ min-height:868px; padding:210px 0 0; background:linear-gradient(33deg,#DCCBF2 11.4%,#C9AAF2 28.7%,#D4C7E5 63.1%,#EEE4FB 88.4%); }
  .ia-heros-grille{ grid-template-columns:600px 710px; gap:9px; }
  .ia-heros h1{ font-size:72px; line-height:1.08; max-width:600px; }
  .ia-heros .chapo{ margin-top:42px; font-size:20px; line-height:24px; max-width:607px; }
  .ia-heros .actions{ margin-top:50px; gap:12px; }
  .ia-heros .actions .btn{ font-size:14px; padding:0 25px; }
  .ia-heros .visuel{ margin:0; }
  /* Étapes : titre à 945, rangs à 1030 (cercle 59), cartes 374 × 305 à x = 84 /
     527 / 970 (écart 69), bord 0,5 px bleu 34 %, rayon 28. */
  .ia-etapes{ padding:77px 0 0; }
  .ia-etapes .h2{ font-size:32px; line-height:43px; margin-bottom:42px; }
  .ia-etapes-grille{ grid-template-columns:repeat(3,374px); gap:69px; margin-left:-14px; }
  .ia-etape .rang{ height:59px; margin-bottom:48px; }
  .ia-etape .carte{ width:374px; min-height:305px; border-radius:28px; border:.5px solid rgba(184,202,233,.34); }
  /* Exigences : titre 269 px à x=97 et y=1596, liste 24 px alignée à droite sur
     797 (interlignes 32 / 78 / 43), flux 614 × 345 à x=834, bulle en fond à gauche. */
  .ia-exigences{ padding:154px 0 0; position:relative; }
  .ia-exigences::before{ content:""; position:absolute; left:-597px; top:-222px; width:1059px; height:706px; background:url('../img/cortexia/bulle.webp') center/contain no-repeat; z-index:0; pointer-events:none; }
  .ia-exigences-grille{ position:relative; z-index:1; grid-template-columns:269px 431px 614px; gap:0 36px; margin-left:-1px; align-items:start; }
  .ia-exigences h2{ font-size:32px; line-height:43px; margin:0; }
  .ia-exigences .mentions{ gap:0; margin-top:11px; text-align:right; }
  .ia-exigences .mentions li{ font-size:24px; line-height:32px; margin-left:0 !important; }
  .ia-exigences .mentions li:nth-child(2){ margin-top:32px; }
  .ia-exigences .mentions li:nth-child(3){ margin-top:78px; }
  .ia-exigences .mentions li:nth-child(4){ margin-top:43px; }
  .ia-exigences .mentions .bleu{ color:rgba(55,105,193,.77); }
  .ia-exigences .mentions .teal{ color:rgba(7,144,140,.77); }
  .ia-exigences .mentions .violet{ color:#B2A1DF; }
  .ia-exigences .mentions .rose{ color:rgba(255,0,102,.77); }
  .ia-exigences .flux{ margin-top:-26px; }
  .ia-exigences .flux img{ display:block; width:614px; height:345px; }
  /* Bibliothèque : bande bleu 2 % de 1877 à 2558, carte 938 × 445 à x=56, texte
     aligné à droite sur 1344 (titre à +27, paragraphe 20 / 24 à +133). */
  .ia-partage{ background:rgba(55,105,193,.02); margin-top:-11px; padding:157px 0 79px; }
  .ia-partage-grille{ grid-template-columns:938px 350px; gap:0; margin-left:-42px; align-items:start; }
  .carte-biblio{ min-height:445px; border-radius:21px; padding:43px 24px 45px 43px; box-shadow:none; }
  .carte-biblio .entete{ padding-bottom:22px; }
  .carte-biblio .titre{ font-size:22px; line-height:29px; }
  .carte-biblio .btn-mini{ height:46px; display:inline-flex; align-items:center; font-size:18px; padding:0 24px; border-radius:9px; }
  .carte-biblio .btn-mini.rond{ padding:0 14px; }
  .carte-biblio table{ margin-top:16px; }
  .carte-biblio th{ font-size:18px; line-height:24px; padding:0 8px 35px 0; }
  .carte-biblio td{ font-size:20px; line-height:24px; padding:19px 8px 19px 0; height:84px; box-sizing:border-box; }
  .carte-biblio th:first-child, .carte-biblio td:first-child{ width:319px; }
  .carte-biblio th:nth-child(2), .carte-biblio td:nth-child(2){ width:217px; }
  .carte-biblio th:nth-child(3), .carte-biblio td:nth-child(3){ width:183px; }
  .carte-biblio .barre{ width:282px; height:30px; border-radius:15px; }
  .carte-biblio .etat{ height:46px; width:159px; display:inline-flex; align-items:center; justify-content:center; padding:0; font-size:20px; }
  .ia-partage .texte{ padding-top:27px; }
  .ia-partage .texte h2{ font-size:32px; line-height:43px; }
  .ia-partage .texte p{ font-size:20px; line-height:24px; margin-top:47px; width:302px; margin-left:auto; }
  .ia-partage .texte p + p{ margin-top:24px; }
  /* Atouts : rangée à 2493 (chevauche la fin de la bande de 65 px), pictos 82 px de
     la frame, libellés 24 px, départs à x = 240 / 623 / 909. */
  .ia-atouts-bande{ margin-top:-65px; padding:0; position:relative; z-index:1; }
  .ia-atouts{ justify-content:flex-start; gap:31px; padding:0; margin-left:142px; }
  .ia-atouts .ico img{ display:block; width:82px; height:82px; }
  /* Crédits : carte 1284 × 265 à x=56 et y=2610 ; titre à +69, mention à +182,
     anneau 185 × 171 à x=549, paliers à droite sur 1300, bouton 263 × 59 à x=934. */
  .ia-credits{ padding:35px 0 85px; }
  .ia-credits .carte{ margin:0 -22px 0 -42px; min-height:265px; padding:43px 40px 0 88px; grid-template-columns:266px 2px 185px minmax(0,1fr); column-gap:70px; align-items:start; }
  .ia-credits .titre{ margin-top:26px; line-height:43px; text-align:center; }
  .ia-credits .mention{ margin-top:27px; text-align:center; }
  .ia-credits .sep{ height:188px; }
  .ia-credits .anneau{ width:185px; height:171px; }
  .ia-credits .droite{ gap:0; margin-top:-9px; }
  .ia-credits .btn-plan{ margin-right:103px; }
  /* Appel : carte 1293 × 326, texte à x=549 (titre à +39, paragraphe 20 / 24 à
     +23, bouton 334 × 51 à +23), bulle 1013 × 525 posée à (−289, −16). */
  .gabarit-cortexia .appel{ padding:20px 0 10px; }
  .gabarit-cortexia .carte-appel{ grid-template-columns:minmax(0,1fr); gap:0; min-height:326px; padding:39px 52px 32px 502px; overflow:visible; }
  .gabarit-cortexia .carte-appel .visuel.bulle{ position:absolute; left:-289px; top:-16px; width:1013px; height:525px; border-radius:0; background:none; aspect-ratio:auto; z-index:0; pointer-events:none; }
  .gabarit-cortexia .carte-appel .visuel.bulle img{ width:100%; height:100%; display:block; }
  .gabarit-cortexia .carte-appel > div:not(.visuel){ position:relative; z-index:1; }
  .gabarit-cortexia .carte-appel h2{ font-size:32px; line-height:43px; margin:0; max-width:692px; }
  .gabarit-cortexia .carte-appel p:not(.surtitre){ font-size:20px; line-height:24px; margin:23px 0 0; max-width:610px; }
  .gabarit-cortexia .carte-appel .btn{ margin-top:23px; height:51px; padding:0 25px; font-size:14px; }
  .gabarit-cortexia .pied{ padding:15px 0 51px; border-top:0; }
  .gabarit-cortexia .pied .boite{ grid-template-columns:376px 347px 283px minmax(180px,1fr); padding:0 0 0 84px; }

  /* ---------- Contact ---------- */
  /* Héros : titre à 233, chapô Inter 600 / 20 centré à 438 (780 px), vague de la
     frame 1881 × 709 à (−274, −4) à 80 %, fond gris 30 % à partir de 771. */
  .ct-heros{ padding:83px 0 261px; }
  .ct-heros .vague-fond{ left:-274px; right:auto; bottom:auto; top:-4px; width:1881px; height:709px; object-fit:cover; object-position:0 -127px; opacity:.8; -webkit-mask-image:none; mask-image:none; }
  .ct-heros .chapo{ margin-top:49px; line-height:24px; }
  .ct-grille{ position:relative; grid-template-columns:573px 937px; gap:0; margin-left:12px; padding:0 0 55px; }
  .ct-grille::before{ content:""; position:absolute; left:50%; transform:translateX(-50%); width:100vw; top:0; height:1368px; background:rgba(245,245,245,.3); z-index:-1; }
  .ct-grille::after{ content:""; position:absolute; left:-15px; top:700px; width:1283px; height:330px; background:url('../img/pages/ligne-contact.svg') 0 0/100% 100% no-repeat; z-index:0; pointer-events:none; }
  .ct-cote{ position:relative; z-index:1; padding-top:116px; }
  .ct-cote h2{ font-size:72px; line-height:1.081; }
  .ct-cote .intro{ margin-top:44px; line-height:24px; }
  .ct-promesses{ margin-top:76px; gap:21px; }
  .ct-promesses .ico{ width:109px; height:109px; background:transparent; box-shadow:none; border:.5px solid rgba(184,202,233,.34); }
  .ct-promesses .ico img{ width:69px; height:69px; }
  .ct-promesses b{ line-height:22px; }
  .ct-direct{ margin-top:182px; padding-top:0; border-top:0; margin-left:30px; }
  .ct-direct .tel a{ font-size:36px; line-height:45px; }
  .ct-direct .mail{ margin-top:0; }
  .ct-direct .mail a{ font-size:24px; line-height:45px; }
  /* Carte du formulaire 937 × 1307 à (683, 861) : rayons 26 en haut et 157 en bas,
     bord rose 34 %, ombre 0/4/4 ; contenu de 645 px à 57 px du bord. */
  .ct-carte{ position:relative; z-index:1; margin-top:90px; width:937px; min-height:1307px; padding:47px 235px 25px 57px; border-radius:26px 26px 157px 157px; border:.5px solid rgba(255,165,201,.34); box-shadow:0 4px 4px rgba(0,0,0,.25); }
  .ct-titre{ font-size:36px; line-height:49px; margin-bottom:17px; }
  .ct-form-intro{ margin:0 0 45px; font-size:20px; font-weight:500; line-height:24px; }
  .ct-bloc{ margin:0; }
  .ct-bloc legend{ font-size:24px; line-height:32px; margin-bottom:32px; }
  .ct-bloc + .ct-bloc{ margin-top:80px; }
  .ct-bloc + .ct-bloc legend{ margin-bottom:11px; }
  .ct-bloc-intro{ margin:0 0 23px; font-size:20px; font-weight:500; line-height:24px; }
  .ct-facultatif{ width:131px; height:40px; display:inline-flex; align-items:center; justify-content:center; font-size:14px; border-radius:27px; background:#f2f2f2; color:#444; margin-left:12px; vertical-align:middle; }
  .ct-duo{ gap:17px; margin-bottom:9px; }
  .ct-bloc > input, .ct-bloc > select, .ct-duo > input{ height:53px; border:1px solid #d9d9d9; border-radius:11px; font-size:20px; font-family:'Satoshi',sans-serif; font-weight:500; padding-left:17px; }
  .ct-bloc > input, .ct-bloc > select{ margin-bottom:9px; }
  /* Hauteur fixe de 53 px + padding vertical de 15 px herite : le libelle etait coupe. */
  .ct-bloc > input, .ct-bloc > select, .ct-duo > input{ padding-top:0; padding-bottom:0; line-height:51px; }
  .ct-bloc + .ct-bloc > select{ margin-bottom:10px; }
  .ct-form ::placeholder, .ct-form select:invalid, .ct-form select:has(option[value=""]:checked){ color:#bcbcbc; }
  .ct-form textarea{ height:91px; border:1px solid #d9d9d9; border-radius:11px; font-size:20px; font-family:'Satoshi',sans-serif; font-weight:500; padding:12px 17px; }
  .ct-form .btn{ margin-top:15px; width:356px; height:54px; padding:0; border-radius:27px; background:#1a2232; font-size:24px; }
  .ct-consent{ margin-top:16px; gap:9px; font-size:16px; font-weight:500; line-height:15px; }
  .ct-consent input{ width:19px; height:19px; margin-top:0; border-radius:3px; }
  .ct-rgpd{ margin-top:15px; font-size:16px; font-weight:500; line-height:15px; padding-left:28px; }
  .ct-rgpd a{ color:#2d73ff; text-decoration:underline dotted; }
  /* « Votre demande… » : carte 1255 × 370 à x=100, titre 36 à +43, logos 281 × 211,
     libellés 24 à +190, textes Inter 500 / 20 sur 24 ; 16 px avant le pied. */
  .ct-mains{ padding:0 0 16px; }
  .ct-mains .carte{ margin-left:2px; width:1255px; min-height:370px; padding:43px 0 0; border-radius:28px; background:#fff; border:.5px solid rgba(255,165,201,.34); box-shadow:0 4px 4px rgba(0,0,0,.25); }
  .ct-mains h2{ font-size:36px; line-height:49px; margin-bottom:98px; }
  .ct-univers{ grid-template-columns:429px 362px minmax(0,1fr); margin-left:-12px; position:relative; }
  .ct-univers > div{ position:relative; padding:0 0 0 204px; border:0; display:block; text-align:left; min-height:140px; }
  .ct-univers > div:nth-child(2){ padding-left:200px; }
  .ct-univers > div:nth-child(3){ padding-left:200px; }
  .ct-univers .logo{ position:absolute; left:0; top:-75px; width:281px; height:211px; }
  .ct-univers > div:nth-child(2) .logo{ top:-67px; }
  .ct-univers > div:nth-child(3) .logo{ top:-68px; }
  .ct-univers .logo img{ width:281px; height:211px; }
  .ct-univers .nom{ font-size:24px; line-height:32px; letter-spacing:0; }
  .ct-univers .nom.rose{ color:#f06; } .ct-univers .nom.teal{ color:#07908c; } .ct-univers .nom.bleu{ color:#3769c1; }
  .ct-univers > div > p + p{ margin-top:5px; font-size:20px; font-weight:500; line-height:24px; max-width:229px; }
  .ct-univers > div:first-child > p + p{ margin-top:17px; }
  .ct-univers::before, .ct-univers::after{ content:""; position:absolute; top:-31px; width:1px; height:136px; background:#e5e7eb; }
  .ct-univers::before{ left:501px; } .ct-univers::after{ left:869px; }
  .gabarit-contact .pied{ padding:15px 0 51px; border-top:0; }
  .gabarit-contact .pied .boite{ grid-template-columns:376px 347px 283px minmax(180px,1fr); padding:0 0 0 73px; }
}
@media (min-width:1100px){
  /* Contrôle du 23/09 après capture. CortexIA : chapô à 25 px du titre sur cinq
     lignes, bouton téléphone « Type 5 » (contour 2 px #A787D0), fichiers de la
     frame (carton 97 × 130, picto 92, libellé 20 px), exigences à 1596, bande de
     la bibliothèque à 1877, tableau au pas de 88 px, carte crédits à 1284. */
  .ia-heros .chapo{ margin-top:25px; }
  .ia-heros .actions .btn-contour{ background:transparent; border:2px solid #A787D0; color:#A787D0; height:49px; padding:0 24px; }
  .ia-heros .actions .btn-contour:hover{ background:#A787D0; border-color:#A787D0; color:#fff; }
  .ia-etape .formats{ gap:29px; justify-content:flex-start; padding-left:16px; }
  .ia-etape .fichier{ position:relative; width:97px; height:130px; flex-direction:column; justify-content:flex-start; padding-top:10px; background:url('../img/cortexia/fichier-fond.svg') center/100% 100% no-repeat; }
  .ia-etape .fichier img{ width:92px; height:92px; }
  .ia-etape .fichier::after{ content:attr(data-libelle); position:absolute; left:0; right:0; top:83px; text-align:center; font-family:'Inter',sans-serif; font-weight:700; font-size:20px; line-height:24px; }
  .ia-etape .fichier.pdf::after{ color:#ff1105; }
  .ia-etape .fichier.docx::after{ color:#0b3898; }
  .ia-etape .fichier.pptx::after{ color:#d64f13; }
  .ia-etape:first-child .carte{ align-items:flex-start; padding-top:69px; }
  .ia-exigences{ padding-top:142px; }
  .ia-partage{ margin-top:-38px; }
  .carte-biblio{ padding-bottom:27px; }
  .carte-biblio th{ padding-bottom:19px; }
  .carte-biblio td{ height:88px; padding:21px 8px 21px 0; }
  .ia-credits .carte{ margin:0 2px 0 -42px; }
  .gabarit-cortexia .carte-appel .btn{ min-width:334px; }
  /* Contact : la vague garde ses 1881 px (img{max-width:100%} la rognait), zone
     de texte de 91 px, logos de la carte finale à leur taille visible (108 px). */
  .ct-heros .vague-fond{ max-width:none; }
  .ct-form textarea{ height:91px; min-height:0; }
  .ct-univers .logo{ width:108px; height:108px; left:83px; top:-23px; }
  .ct-univers > div:nth-child(2) .logo{ top:-15px; }
  .ct-univers > div:nth-child(3) .logo{ top:-16px; }
  .ct-univers .logo img{ width:108px; height:108px; object-fit:contain; }
}
@media (min-width:1100px){
  .ia-etape .formats{ padding-left:0; margin-left:-9px; }
  .carte-biblio table{ margin-top:0; }
}

/* ============================================================
   Relevé MCP Figma du 23/09/2026 — Ressources (132:542), Article (127:49),
   Candidats (77:1465). Même méthode que les autres pages.
   ============================================================ */
@media (min-width:1100px){
  /* ---------- Ressources ---------- */
  /* Héros : colonne de texte de 560 px (chapô 506 px sur deux lignes), vague à
     droite ; filtres à y=577, recherche 556 × 46 à 635, compteur à 729. */
  .res-heros{ grid-template-columns:560px minmax(0,1fr); }
  .res-heros p{ margin-top:41px; max-width:506px; line-height:24px; }
  .res-filtres .boite{ padding-top:14px; padding-bottom:9px; }
  .res-recherche{ width:556px; height:46px; margin-left:-1px; }
  .res-barre + .res-barre{ padding-top:24px; }
  /* Corps : cartes 334 × 318 (visuel 140, écarts 19 et 22) de x=42 à 1082,
     encart « Les plus consultés » 313 px à 80 px du haut ; 54 px avant l'infolettre. */
  .res-corps{ grid-template-columns:1040px 313px; gap:19px; margin-left:-9px; padding:26px 0 54px; }
  .res-grille{ grid-template-columns:repeat(3,334px); gap:22px 19px; }
  .res-carte{ min-height:318px; border-radius:18px; }
  .res-carte .visuel{ aspect-ratio:334/140; }
  .res-carte .corps{ padding:28px 18px 16px; gap:0; }
  .res-carte .type{ margin-bottom:7px; font-size:13px; line-height:20px; }
  .res-carte h3{ font-size:16px; line-height:20px; margin-bottom:3px; }
  .res-carte p{ font-size:14px; line-height:18px; }
  /* Le temps de lecture se cale en bas de carte, à la même hauteur d'une carte à
     l'autre (Sylvain, 25/09) : les cartes d'une rangée ont la même hauteur (grille),
     le corps est en colonne, la durée prend l'espace restant au-dessus d'elle. */
  .res-carte .duree{ margin-top:auto; padding-top:10px; font-size:13px; line-height:18px; }
  .res-aside{ margin-top:80px; padding:38px 12px 30px 16px; border-radius:18px; }
  .res-aside h2{ font-size:20px; line-height:27px; margin-bottom:12px; }
  .res-aside .item{ grid-template-columns:97px 1fr auto; gap:8px; padding:0 0 24px; }
  .res-aside .item .vign{ aspect-ratio:97/90; border-radius:10px; }
  .res-aside .item .type{ font-size:13px; line-height:20px; }
  .res-aside .item h3{ font-size:15px; line-height:20px; margin-top:2px; }
  .res-aside .item .duree{ font-size:13px; margin-top:8px; }
  .res-aside .item .rang{ font-size:22px; line-height:27px; }
  /* Infolettre : carte 1370 × 219 à x=42, titre 32 / 43 à 42 px, texte 20 / 24,
     champ 461 × 46 et bouton 129 × 46 à x=706 de la carte ; 16 px avant le pied. */
  .gabarit-ressources .infolettre, .gabarit-article .infolettre{ padding:0 0 16px; }
  .infolettre .carte{ min-height:219px; margin:0 -9px; padding:42px 48px 24px; border-radius:26px; grid-template-columns:minmax(0,1fr) 590px; gap:0; align-items:start; }
  .gabarit-article .infolettre .carte{ margin:0 -32px 0 -57px; }
  .infolettre h2{ font-size:32px; line-height:43px; }
  .infolettre p{ margin-top:8px; font-size:20px; line-height:24px; max-width:506px; }
  .infolettre form{ padding:0; box-shadow:none; background:transparent; gap:0; max-width:590px; }
  .infolettre input[type=email]{ height:46px; padding:0 28px; border:1px solid #D9D9D9; border-radius:23px 0 0 23px; font-size:16px; }
  .infolettre .btn{ height:46px; padding:0 34px; border-radius:0 23px 23px 0; font-size:16px; }
  .infolettre .mentions{ margin-top:10px; font-size:16px; line-height:18px; padding-left:28px; }
  .res-aside{ position:static; }

  /* ---------- Article ---------- */
  /* Titre 72 / 1,08 (1179 px) à 203, méta 20 px à 391, image 1227 × 488 à 447,
     chapô Inter 20 / 24 (1129 px) à 963, corps 948 px indenté de 38 avec les
     titres 32 / 43 indentés de 24, sommaire 249 px à x=1114. */
  .art-entete{ padding:9px 32px 0; }
  .art-entete h1{ font-size:72px; line-height:1.08; }
  .art-meta{ margin-top:32px; }
  .art-image{ width:1227px; aspect-ratio:1227/488; margin-top:28px; border-radius:20px; }
  .art-chapo{ margin-top:28px; max-width:1129px; font-family:'Inter',sans-serif; font-size:20px; line-height:24px; color:#0B172E; }
  .art-corps{ grid-template-columns:986px 249px; gap:30px; padding:81px 32px 14px; }
  .art-texte h2{ font-size:32px; line-height:43px; margin:38px 0 16px 24px; }
  .art-texte h2:first-child{ margin-top:0; }
  .art-texte h3{ margin-left:38px; }
  .art-texte p, .art-texte ul{ margin-left:38px; font-family:'Inter',sans-serif; font-size:20px; line-height:24px; color:#0B172E; }
  .art-texte ul li{ font-size:20px; line-height:24px; }
  .art-aide{ margin-left:38px; font-size:20px; line-height:24px; }
  .art-aside{ margin-top:-14px; position:static; }
  .sommaire{ width:249px; padding:25px 10px 24px 51px; border-radius:22px; }
  .sommaire h2{ font-size:20px; line-height:25px; margin-bottom:13px; margin-left:-12px; }
  .sommaire a{ padding:6px 0 6px 12px; font-size:16px; line-height:20px; }

  /* ---------- Candidats ---------- */
  /* Héros : titre 72 / 1,08 à y=234, chapô 20 / 24 (556 px) à 43 px, boutons
     51 px (plein + contour) à 67 px, photo 1140 × 641 à x=303 / y=25, bas à 822. */
  .cand-heros{ padding:84px 0 121px; }
  .cand-heros h1{ font-size:72px; line-height:1.08; max-width:566px; }
  .cand-heros .chapo{ margin-top:43px; max-width:556px; line-height:24px; }
  .cand-heros .actions{ margin-top:67px; gap:12px; }
  .cand-heros .actions .btn{ height:51px; padding:0 24px; border-radius:24px; font-size:14px; }
  .cand-heros .actions .btn-nuit{ background:var(--degrade-accent,linear-gradient(144deg,#746DFF 0%,#325DEA 63%)); border-color:transparent; }
  .cand-heros .actions .btn-contour{ height:49px; background:transparent; border:2px solid #325EE2; color:#325EE2; }
  .cand-heros .actions .btn-contour:hover{ background:#325EE2; border-color:#325EE2; color:#fff; }
  .cand-heros .cand-photo{ left:303px; right:auto; top:25px; bottom:auto; width:1140px; height:641px; }
  .cand-heros .cand-photo img{ height:641px; }
  /* Titres de section 48 / 59 comme la frame (« De quoi avez-vous besoin ? »,
     « Le Jour J, pensez à… », « Anticiper mon trajet », « Un déplacement… »). */
  .cand-titre-blocs{ font-size:48px; line-height:59px; margin:36px 0 40px; }
  .cand-section > .boite > .h2{ font-size:48px; line-height:59px; }
  .cand-section .h2{ margin-bottom:22px; }
  .cand-section > .boite > .cand-intro{ font-family:'Inter',sans-serif; font-size:20px; line-height:24px; max-width:577px; }
  /* Le jour J : trois colonnes numérotées (pastille 49 px, libellé Satoshi 20 / 27),
     items 20 px espacés de 49 px, filets verticaux entre les colonnes, bouton
     contour 205 × 49 centré. */
  .cand-etapes{ gap:0; }
  .cand-etape{ padding:0 30px; }
  .cand-etape + .cand-etape{ border-left:1px solid var(--ligne); }
  .cand-etape .num{ width:49px; height:49px; font-size:26px; }
  .cand-etape h3{ font-size:20px; line-height:27px; }
  .cand-etape .cand-checks li{ font-size:18px; }
  .cand-checklist-action{ text-align:center; }
  .cand-checklist-action .btn{ height:49px; padding:0 24px; border-radius:24px; font-size:14px; }
  /* Accès et Autour du centre : les deux blocs sont des cartes grises de 1302 px
     (x=80) au rayon 28 dans la frame, avec le titre et le texte centrés dedans. */
  /* (23/09) les anciens blocs gris #acces / #autour sont remplacés par .cd-panneau. */
  .cand-centre{ grid-template-columns:554px 554px; gap:20px 30px; background:transparent; box-shadow:none; padding:0; justify-content:center; }
  .cand-plan{ aspect-ratio:554/458; border-radius:24px; }
  .cand-centre-tete, .cand-centre-infos{ background:#fff; border-radius:24px 24px 0 0; padding:29px 38px 0; margin:0; }
  .cand-centre-infos{ border-radius:0 0 24px 24px; padding:20px 38px 40px; border-top:0; grid-template-columns:1fr; gap:24px; }
  .cand-centre-tete{ display:block; }
  .cand-centre h3{ font-size:32px; line-height:41px; margin-bottom:8px; }
  .cand-centre .adresse{ font-size:20px; line-height:22px; }
  .cand-itineraires{ margin-top:22px; }
  .cand-centre .btn{ height:51px; padding:0 24px; border-radius:24px; font-size:14px; }
  .cand-centre h4{ font-size:18px; line-height:22px; }
  .cand-acces li{ font-size:18px; line-height:22px; }
  .cand-marge{ grid-column:1; font-size:20px; line-height:24px; color:var(--ink); margin-top:0; }
  .cand-avis{ grid-column:1 / -1; }
  .cand-recherche{ max-width:700px; gap:0; margin-bottom:32px; }
  .cand-recherche .cand-lieu{ height:51px; border-radius:26px 0 0 26px; padding:0 34px; }
  .cand-recherche .btn{ height:51px; border-radius:0 26px 26px 0; padding:0 28px; }
  .cand-alentours{ grid-template-columns:554px 554px; gap:84px; justify-content:center; }
  .cand-groupe{ background:#fff; border-radius:24px; overflow:hidden; padding-bottom:26px; }
  .cand-visuel{ border-radius:0; margin:0 0 18px; }
  .cand-visuel img{ aspect-ratio:554/274; }
  .cand-groupe h3{ font-size:32px; line-height:41px; }
  .cand-groupe .accroche{ font-size:20px; line-height:22px; max-width:223px; }
  .cand-groupe .piste, .cand-groupe .fleches{ padding-left:24px; padding-right:24px; }
  .cand-partenaires{ margin-top:36px; font-size:20px; line-height:24px; text-align:center; }
  /* Questions fréquentes après « Autour du centre », avertissement 20 / 24,
     appel 1293 × 293 (visuel 266 px, titre 32 / 43, texte 20 / 24, bouton 51 px). */
  .gabarit-candidats .sol-faq{ padding:74px 0 40px; }
  .gabarit-candidats .sol-faq .surtitre{ margin-bottom:21px; }
  .gabarit-candidats .sol-faq h2{ font-size:32px; line-height:43px; margin-bottom:59px; }
  .gabarit-candidats .faq-liste{ gap:14.4px; }
  .gabarit-candidats .faq-item > button{ min-height:93.6px; }
  .cand-avertissement{ max-width:987px; margin-top:40px; font-size:20px; line-height:24px; text-align:center; }
  .gabarit-candidats .appel{ padding:76px 0 16px; }
  .gabarit-candidats .appel .carte-appel{ min-height:293px; padding-top:20px; padding-bottom:20px; }
  .gabarit-candidats .appel .carte-appel .visuel{ width:266px; height:266px; }
  .gabarit-candidats .appel .carte-appel .surtitre{ display:none; }
  .gabarit-candidats .appel .carte-appel h2{ font-size:32px; line-height:43px; margin:0; }
  .gabarit-candidats .appel .carte-appel p:not(.surtitre){ font-size:20px; line-height:24px; margin:23px 0 0; }
  .gabarit-candidats .appel .carte-appel .btn{ margin-top:35px; height:51px; padding:0 24px; border-radius:24px; font-size:14px; }
  .gabarit-ressources .pied, .gabarit-article .pied, .gabarit-candidats .pied{ padding:15px 0 51px; border-top:0; }
  .gabarit-ressources .pied .boite, .gabarit-article .pied .boite, .gabarit-candidats .pied .boite{ grid-template-columns:376px 347px 283px minmax(180px,1fr); padding:0 0 0 28px; }
  .gabarit-candidats .pied .boite{ padding-left:101px; }
  /* Ressources : .gabarit-ressources .boite étire toute boîte à 1440 px, pied compris,
     qui partait donc collé à gauche (retour « mal centré » du 23/09). */
  .gabarit-ressources .pied .boite, .gabarit-article .pied .boite{ max-width:1308px; padding-right:0; }
}
@media (min-width:1100px){
  /* Contrôle du 23/09 après capture. */
  .res-heros p{ margin-top:65px; }
  .res-barre + .res-barre{ padding-top:40px; }
  .res-corps{ padding-top:20px; }
  .art-corps{ padding-top:32px; }
  .art-aside{ margin-top:72px; }
  .cand-centre{ gap:20px 84px; }
}
@media (min-width:1100px){
  /* Contrôle du 23/09 : hébergements et restaurants dans des cartes blanches à
     coins arrondis, séparées de 84 px (frame), texte 20 px sous le titre. */
  .cand-groupe{ border-radius:24px; }
  .gabarit-candidats .cand-groupe .accroche{ margin-bottom:16px; }
  /* Ressources : mentions de l'infolettre sur deux lignes de 18 px. */
  .infolettre .mentions{ max-width:500px; font-size:16px; }
}

/* ---------- Pages légales (frames 951:1179 Mentions, 911:1326 Politique), relevé du 23/09 ----------
   Bande grise du héros de 0 à 628 (même dégradé que les solutions), titre 72 px
   centré à 276, chapô Inter 600 / 20 (780 px) à 395 sur Politique, date à 552,
   corps de 1139 px à x=76 (Mentions) ou 95 / 99 (Politique) : titres Satoshi 700 /
   36 sur 44, texte Inter 20 sur 24, blancs de 24 px, listes à puces. Aucune bande
   d'appel avant le pied dans ces deux frames. */
@media (min-width:1100px){
  .gabarit-legal .heros-simple{ padding:126px 0 0; min-height:478px; background:linear-gradient(185deg,rgba(255,255,255,0) 52%,rgba(246,246,246,.78) 61%,#F4F3F4 70%); }
  .gabarit-legal .heros-simple h1{ font-size:72px; line-height:78px; }
  .gabarit-legal .heros-simple .chapo{ margin-top:41px; font-family:'Inter',sans-serif; font-weight:600; font-size:20px; line-height:24px; color:#101828; }
  .gabarit-legal .texte-corps{ max-width:none; padding:0; }
  .gabarit-legal .texte-corps > *:not(.maj){ max-width:1139px; margin-left:-22px; }
  .gabarit-legal .texte-corps .maj{ margin:-78px 0 101px; font-family:'Inter',sans-serif; font-weight:600; font-size:20px; line-height:24px; color:#101828; }
  .gabarit-politique .texte-corps .maj{ margin-bottom:89px; }
  .gabarit-legal .texte-corps h2{ font-family:'Satoshi',sans-serif; font-size:36px; line-height:44px; margin:24px 0 24px -22px; }
  .gabarit-legal .texte-corps h2:first-of-type{ margin-top:0; }
  .gabarit-legal .texte-corps p, .gabarit-legal .texte-corps li{ font-family:'Inter',sans-serif; font-size:20px; line-height:24px; color:#0B172E; }
  .gabarit-legal .texte-corps p{ margin:0 0 24px -22px; }
  .gabarit-legal .texte-corps ul{ margin:0 0 24px 8px; padding-left:30px; list-style:disc; }
  .gabarit-legal .texte-corps li{ margin:0; padding:0; }
  .gabarit-legal .texte-corps li::before{ content:none; }
  .gabarit-legal .appel{ display:none; }
  .gabarit-legal main{ padding-bottom:49px; }
  .gabarit-legal .pied{ padding:15px 0 51px; border-top:0; }
  .gabarit-legal .pied .boite{ grid-template-columns:376px 347px 283px minmax(180px,1fr); padding:0 0 0 28px; }
}
@media (min-width:1100px){
  /* Politique de confidentialité (911:1326) : les deux paragraphes d'introduction
     restent sur le fond, le reste du corps est posé dans une carte grise
     (#EDEEEF, 1347 px à x=48, rayon 28) qui commence 38 px au-dessus du
     premier titre, comme la frame. */
  .gabarit-politique .texte-corps{ position:relative; }
  .gabarit-politique .texte-corps h2:first-of-type{ margin-top:97px; }
  .gabarit-politique .texte-corps h2:first-of-type::before{ content:""; position:absolute; left:-50px; right:-45px; top:0; bottom:0; margin-top:calc(var(--carte-haut,0px)); background:#EDEEEF; border-radius:28px; z-index:-1; }
}
@media (min-width:1100px){
  /* La carte grise passait derrière le fond de page (z-index négatif hors
     contexte d'empilement) : isolation sur le corps. */
  .gabarit-politique .texte-corps{ isolation:isolate; }
  .gabarit-politique .texte-corps h2:first-of-type::before{ top:-38px; bottom:-40px; }
}

/* Adresses candidats saisies dans WordPress (23/09) : photo en tête de carte,
   carte masquée quand elle n'est pas du centre choisi. */
.cand-carte .photo{ margin:-2px 0 10px; border-radius:12px; overflow:hidden; }
.cand-carte .photo img{ display:block; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover; }
.cand-carte[hidden]{ display:none; }

/* ============ Candidats — refonte sur la frame 77:1465 (23/09/2026) ============
   Retour de Sylvain (« il y a beaucoup de différences ») et documents « A traiter »
   du dossier de retours : quatre cartes à pictos (292 × 241 à y = 1013), « Le Jour J »
   en trois colonnes courtes (pastilles 49, filets, bouton contour), panneau blanc
   « Anticiper mon trajet » (1302 × 846, plan 554 × 458 à gauche, fiche 554 à droite
   avec volets), panneau lilas « Un déplacement à organiser ? » (cartes 554 × 458,
   rond 97, bouton fléché), appel 1293 × 306 avec la checklist. Les boutons pleins
   sont en dégradé 172,9° #746DFF → #325DEA, les contours en #746DFF / #325EE2. */
.cd-degrade{ background-image:linear-gradient(162deg,#FF57A0 36.5%,#5F74FA 93.9%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cd-titre{ font-family:'Satoshi',sans-serif; font-weight:700; font-size:clamp(30px,4vw,48px); line-height:1.23; color:#0B172E; text-align:center; margin:0; }
.cd-intro{ font-family:'Inter',sans-serif; font-size:20px; line-height:24px; color:#0B172E; text-align:center; max-width:577px; margin:22px auto 0; }
.cd .cd-btn-plein{ height:51px; padding:0 24px; border-radius:24px; font-family:'Satoshi',sans-serif; font-size:14px; font-weight:700; color:#FEFEFE; background:linear-gradient(172.9deg,#746DFF 9.88%,#325DEA 63.2%); border:1px solid #746DFF; box-shadow:none; }
.cd .cd-btn-plein:hover{ background:linear-gradient(172.9deg,#8A84FF 9.88%,#3D69F0 63.2%); color:#fff; }
.cd .cd-btn-contour{ height:49px; padding:0 24px; border-radius:24px; font-family:'Satoshi',sans-serif; font-size:14px; font-weight:700; color:#325EE2; background:transparent; border:2px solid #746DFF; box-shadow:none; }
.cd .cd-btn-contour:hover{ background:#746DFF; border-color:#746DFF; color:#fff; }
.cd .cd-btn-contour.fleche::after{
  content:""; flex:none; width:25px; height:25px; margin-left:10px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25' fill='none' stroke='%23325EE2' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5h16M13.8 6.2l6.7 6.3-6.7 6.3'/%3E%3C/svg%3E") center/contain no-repeat;
}
.cd .cd-btn-contour.fleche:hover::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5h16M13.8 6.2l6.7 6.3-6.7 6.3'/%3E%3C/svg%3E"); }

/* --- De quoi avez-vous besoin ? --- */
.cd-besoin{ padding:36px 0 0; }
.cd-cartes{ list-style:none; margin:40px auto 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; justify-content:center; }
.cd-cartes a{
  position:relative; display:block; height:241px; background:#fff; color:#0B172E; text-decoration:none;
  border:.5px solid rgba(255,165,201,.34); border-radius:28px; box-shadow:0 4px 4px rgba(0,0,0,.25);
  transition:transform .15s ease, box-shadow .15s ease;
}
.cd-cartes a:hover{ transform:translateY(-3px); box-shadow:0 8px 12px rgba(0,0,0,.18); }
.cd-cartes .picto{ position:absolute; left:50%; top:-24px; width:229px; height:229px; transform:translateX(-50%); object-fit:contain; }
.cd-cartes .picto.petit{ width:205px; height:205px; top:2px; }
/* Carte « dormir et manger » : lit et assiette côte à côte, positions de la frame 77:1465 (25/09). */
.cd-cartes .picto.lit{ width:187px; height:187px; top:11px; left:calc(50% - 47px); }
.cd-cartes .picto.lit + .picto.petit{ left:calc(50% + 46px); }
.cd-cartes span{ position:absolute; left:0; right:0; top:157px; padding:0 18px; text-align:center; font-family:'Satoshi',sans-serif; font-weight:700; font-size:20px; line-height:27px; }

/* --- Le Jour J --- */
.cd-jour{ padding:59px 0 56px; scroll-margin-top:100px; }
.cd-moments{ display:grid; grid-template-columns:minmax(0,1fr); gap:36px; margin:60px 0 0; }
.cd-moment .tete{ display:flex; align-items:center; gap:9px; margin:0; }
.cd-moment .num{
  flex:none; width:49px; height:49px; border-radius:50%; background:rgba(116,109,255,.2); box-shadow:0 4px 4px rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:center; font-family:'Inter',sans-serif; font-weight:900; font-size:32px; line-height:1; color:#fff;
}
.cd-moment .nom{ font-family:'Satoshi',sans-serif; font-weight:700; font-size:20px; line-height:27px; color:#0B172E; }
.cd-moment ul{ list-style:none; margin:23px 0 0; padding:0; display:flex; flex-direction:column; gap:24px; }
.cd-moment li{ display:flex; align-items:center; gap:9px; font-family:'Inter',sans-serif; font-size:20px; line-height:24px; color:#0B172E; }
.cd-moment .coche{
  flex:none; width:20px; height:19px; border:1px solid #101828; border-radius:28px; box-shadow:0 12px 40px -12px rgba(0,0,0,.08);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23101828' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.2 6.4l3.2 3.2L10.8 2.6'/%3E%3C/svg%3E") center/12px no-repeat;
}
.cd-action{ margin:47px 0 0; text-align:center; }

/* --- Panneaux « Anticiper mon trajet » (blanc) et « Un déplacement à organiser ? » (lilas) --- */
.cd-acces, .cd-autour{ scroll-margin-top:100px; }
.cd-panneau{ border-radius:28px; box-shadow:0 4px 4px rgba(0,0,0,.25); padding:36px 20px 32px; }
.cd-panneau.blanc{ background:#fff; border:1px solid rgba(116,109,255,.2); }
.cd-panneau.lilas{ background:rgba(116,109,255,.2); margin-top:40px; }
.cd-choix{ position:relative; max-width:376px; height:51px; margin:25px auto 0; }
.cd-choix label{
  position:absolute; left:36px; top:-11px; padding:0 4px; background:#fff;
  font-family:'Satoshi',sans-serif; font-weight:700; font-size:16px; line-height:22px; color:#325EE2;
}
.cd-choix select{
  width:100%; height:100%; appearance:none; cursor:pointer; border:1px solid #D9D9D9; border-radius:33px;
  padding:6px 60px 0 36px; font-family:'Satoshi',sans-serif; font-weight:500; font-size:16px; color:#101828;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23325EE2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 24px center/24px no-repeat;
}
.cd-choix select:focus-visible{ outline:2px solid #325EE2; outline-offset:2px; }
.cd-centre{ display:grid; grid-template-columns:minmax(0,1fr); gap:24px; margin-top:30px; align-items:start; }
.cd-centre[hidden]{ display:none; }
.cd-plan{ width:100%; aspect-ratio:554/458; border-radius:28px; overflow:hidden; background:#EEF1FD; }
.cd-plan iframe{ display:block; width:100%; height:100%; border:0; }
.cd-fiche{
  background:#fff; border:.5px solid rgba(255,165,201,.34); border-radius:28px; box-shadow:0 4px 4px rgba(0,0,0,.25);
  padding:29px 28px 41px;
}
.cd-fiche h3{ font-family:'Satoshi',sans-serif; font-weight:700; font-size:30px; line-height:41px; color:#0B172E; text-shadow:0 4px 4px rgba(0,0,0,.25); margin:0; }
.cd-fiche .adresse{ margin:22px 0 0; font-family:'Inter',sans-serif; font-size:18px; line-height:22px; color:#101828; }
.cd-fiche-action{ margin:23px 0 0; }
.cd-pli{ border-top:1px solid #E4E7EE; margin-top:26px; padding:0 0 0 45px; }
.cd-pli + .cd-pli{ margin-top:20px; }
.cd-pli summary{
  list-style:none; cursor:pointer; position:relative; padding:20px 40px 0 0;
  font-family:'Inter',sans-serif; font-weight:600; font-size:18px; line-height:22px; color:#101828;
}
.cd-pli summary::-webkit-details-marker{ display:none; }
.cd-pli[open] summary{ color:#325EE2; }
.cd-pli summary::after{
  content:""; position:absolute; right:0; top:19px; width:24px; height:24px; transition:transform .2s ease;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101828' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.cd-pli[open] summary::after{ transform:rotate(180deg); }
.cd-pli ul{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
.cd-pli li{ font-family:'Inter',sans-serif; font-size:18px; line-height:22px; color:#101828; }
.cd-pli li b{ font-weight:600; }
.cd-fiche-action2{ margin:24px 0 0; }
.cd-avis{ margin:20px 0 0; padding:14px 18px; border-radius:12px; background:#EEF1FD; color:#0B172E; font-size:15px; line-height:1.45; }
.cd-marge{ margin:0; font-family:'Inter',sans-serif; font-weight:600; font-size:20px; line-height:24px; color:#0B172E; }

.cd-recherche{ position:relative; max-width:556px; height:51px; margin:25px auto 0; }
.cd-recherche .cand-lieu{
  width:100%; height:100%; border:1px solid #D9D9D9; border-radius:33px; background:#fff;
  padding:0 140px 0 34px; font-family:'Satoshi',sans-serif; font-weight:500; font-size:13px; color:#101828;
}
.cd-recherche .cand-lieu::placeholder{ color:#D9D9D9; }
.cd-recherche .cand-lieu:focus-visible{ outline:2px solid #325EE2; outline-offset:2px; }
.cd-recherche .btn{ position:absolute; right:0; top:0; }
.cd-groupes{ display:grid; grid-template-columns:minmax(0,1fr); gap:40px; margin-top:32px; align-items:start; }
.cd-groupe{ min-width:0; }
.cd-carte{
  background:#fff; border:.5px solid rgba(255,165,201,.34); border-radius:28px; box-shadow:0 4px 4px rgba(0,0,0,.25);
  overflow:hidden; min-height:458px; padding-bottom:7px; min-width:0;
}
/* Le carrousel : une carte par adresse, toutes à la largeur du groupe. */
.cd-groupe .piste{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding:0 0 6px; margin-bottom:-6px; }
.cd-groupe .piste::-webkit-scrollbar{ display:none; }
.cd-groupe .piste:focus-visible{ outline:2px solid #325EE2; outline-offset:4px; border-radius:28px; }
.cd-groupe .piste .cd-carte{ flex:none; width:100%; scroll-snap-align:start; }
.cd-groupe .fleches{ display:flex; gap:12px; justify-content:center; margin-top:14px; }
.cd-groupe .fleches button{
  width:44px; height:44px; border-radius:50%; background:#fff; border:1.6px solid #D8DEE8; color:#0B172E;
  display:flex; align-items:center; justify-content:center; font-size:20px; line-height:1;
  transition:border-color .15s ease, transform .15s ease, opacity .15s ease;
}
.cd-groupe .fleches button:hover{ border-color:#325EE2; transform:translateY(-1px); }
.cd-groupe .fleches button:disabled{ opacity:.35; cursor:default; transform:none; }
.cd-tous{ margin:14px 0 0; text-align:center; }
.cd-tous a{ font-family:'Satoshi',sans-serif; font-weight:700; font-size:14px; color:#325EE2; }
.cd-tous a::after{ content:"\2192"; margin-left:6px; }
.cd-detail{ margin:10px 0 0; font-size:14px; color:var(--sourdine); }
.cd-photo{ display:block; }
.cd-photo img{ display:block; width:100%; height:274px; object-fit:cover; }
.cd-groupe-corps{ display:grid; grid-template-columns:97px minmax(0,1fr); gap:0 40px; padding:17px 24px 0 24px; align-items:start; }
.cd-rond{ position:relative; display:block; width:97px; height:97px; border-radius:50%; background:rgba(116,109,255,.2); box-shadow:0 4px 4px rgba(0,0,0,.25); }
.cd-rond img{ position:absolute; left:50%; top:50%; width:160px; height:160px; transform:translate(-50%,-50%); }
.cd-groupe-texte h3{ font-family:'Satoshi',sans-serif; font-weight:700; font-size:30px; line-height:41px; color:#0B172E; text-shadow:0 4px 4px rgba(0,0,0,.25); margin:-6px 0 0; text-align:left; }
.cd-groupe-texte .accroche{ margin:22px 0 0; max-width:250px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font-family:'Inter',sans-serif; font-weight:500; font-size:18px; line-height:22px; color:#101828; }
.cd-groupe-texte .cand-groupe-action{ margin:10px 0 0; }
.cd-adresses{ padding:20px 24px 14px; }
.cd-adresses .piste{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.cd-adresses .piste::-webkit-scrollbar{ display:none; }
.cd-adresses .piste:focus-visible{ outline:2px solid #325EE2; outline-offset:4px; border-radius:18px; }
.cd-adresses .cand-carte{
  flex:none; width:100%; scroll-snap-align:start; text-align:left; background:#F3F4F8; border-radius:18px; box-shadow:none;
  padding:20px 22px; display:flex; flex-direction:column; gap:8px; min-height:0;
}
.cd-adresses .cand-carte h4{ font-family:'Satoshi',sans-serif; font-size:18px; font-weight:700; color:#0B172E; }
.cd-adresses .cand-carte p{ font-size:15.5px; color:var(--corps); }
.cd-adresses .fleches{ display:flex; gap:12px; justify-content:center; margin-top:12px; }
.cd-adresses .fleches button{
  width:44px; height:44px; border-radius:50%; background:#fff; border:1.6px solid #D8DEE8; color:#0B172E;
  display:flex; align-items:center; justify-content:center; font-size:20px; line-height:1;
  transition:border-color .15s ease, transform .15s ease, opacity .15s ease;
}
.cd-adresses .fleches button:hover{ border-color:#325EE2; transform:translateY(-1px); }
.cd-adresses .fleches button:disabled{ opacity:.35; cursor:default; transform:none; }
.cd-autour .cand-partenaires{ margin:54px 0 0; text-align:center; font-family:'Inter',sans-serif; font-size:20px; line-height:24px; color:#0B172E; }

/* --- Questions fréquentes et appel --- */
.gabarit-candidats .sol-faq h2 .accent{ color:transparent; }
.gabarit-candidats .cd-appel .carte-appel .vague{ display:none; }
.cd-illu{ position:relative; width:266px; height:266px; margin:0 auto; }
.cd-illu::before{ content:""; position:absolute; left:-17px; top:24px; width:255px; height:242px; border-radius:50%; background:rgba(116,109,255,.2); box-shadow:0 4px 4px rgba(0,0,0,.25); }
/* Le fond est porté par ::before (ellipse décalée de la frame), pas par la boîte. */
body.gabarit-candidats .appel .carte-appel .cd-illu{ background:transparent; }
.cd-illu picture, .cd-illu img{ position:relative; display:block; width:266px; height:266px; }

@media (min-width:1100px){
  .cd-besoin .cd-cartes{ grid-template-columns:repeat(4,292px); margin-top:96px; }
  .cd-moments{ grid-template-columns:360px 314px 429px; gap:0; margin:109px 0 0 112px; }
  .cd-moment + .cd-moment{ border-left:1px solid #D6DAE3; }
  .cd-moment:nth-child(2){ padding-left:50px; }
  .cd-moment:nth-child(3){ padding-left:86px; }
  .cd-acces .boite, .cd-autour .boite{ max-width:1302px; padding:0; }
  .cd-panneau{ padding:45px 60px 40px 50px; }
  .cd-panneau.lilas{ margin-top:56px; padding-bottom:28px; }
  .cd-centre{ grid-template-columns:554px 554px; gap:24px 84px; }
  .cd-centre .cd-fiche{ grid-row:1 / span 2; grid-column:2; }
  .cd-centre .cd-marge{ grid-column:1; }
  .cd-plan{ width:554px; height:458px; aspect-ratio:auto; }
  .cd-fiche{ padding:29px 38px 41px; }
  .cd-fiche .cd-btn-plein{ min-width:197px; }
  .cd-groupes{ grid-template-columns:554px 554px; gap:84px; }
  .cd-groupe-corps{ gap:0 79px; padding:17px 30px 0 40px; }
  .cd-adresses{ padding:20px 40px 14px; }
  .cd-autour .cd-recherche .btn{ min-width:125px; }
  .gabarit-candidats .sol-faq{ padding:119px 0 0; }
  .gabarit-candidats .cd-appel{ padding:68px 0 0; }
  .gabarit-candidats .cd-appel .boite{ max-width:1293px; padding:0; }
  .gabarit-candidats .cd-appel .carte-appel{
    min-height:306px; margin:0; padding:21px 40px 19px 40px; background:rgba(55,105,193,.02); border-radius:17px; box-shadow:none;
    display:grid; grid-template-columns:266px minmax(0,1fr); gap:0 140px; align-items:start;
  }
  .cd-illu{ margin:0; }
  .gabarit-candidats .cd-appel .carte-appel h2{ margin:50px 0 0; font-size:32px; line-height:43px; }
  .gabarit-candidats .cd-appel .carte-appel p:not(.surtitre){ margin:23px 0 0; font-size:20px; line-height:24px; color:#0B172E; }
  .gabarit-candidats .cd-appel .carte-appel .btn{ margin-top:35px; }
}
@media (max-width:1099px){
  .cd-moment .tete{ justify-content:flex-start; }
  .cd-fiche h3, .cd-groupe-texte h3{ font-size:24px; line-height:32px; }
  .cd-groupe-corps{ grid-template-columns:97px minmax(0,1fr); gap:0 20px; }
  .cd-groupe-texte .accroche{ max-width:none; }
  .cd-recherche .cand-lieu{ padding-right:130px; }
  .gabarit-candidats .cd-appel .carte-appel{ background:rgba(55,105,193,.02); border-radius:17px; box-shadow:none; }
}
@media (max-width:640px){
  .cd-cartes{ grid-template-columns:minmax(0,1fr); }
  .cd-cartes a{ height:220px; }
  .cd-cartes .picto{ width:190px; height:190px; top:-14px; }
  .cd-cartes .picto.petit{ width:170px; height:170px; top:8px; }
  .cd-cartes span{ top:150px; }
  .cd-groupe-corps{ grid-template-columns:minmax(0,1fr); }
  .cd-rond{ margin-bottom:8px; }
  .cd-recherche{ height:auto; }
  .cd-recherche .cand-lieu{ height:51px; padding-right:34px; }
  .cd-recherche .btn{ position:static; width:100%; margin-top:10px; }
}

/* Compléments du 23/09 après comparaison à la frame : héros blanc avec le voile de
   la maquette (91,5°, blanc → transparent) et sans maillage, libellés des cartes
   sur deux lignes (114 / 171 px), « + » de la FAQ bleu sur rond lilas, pied à 67 px. */
.cand-heros{ background:#FEFEFE; }
.cand-heros .maillage{ display:none; }
.cand-heros .cand-photo img{ -webkit-mask-image:none; mask-image:none; }
.cand-heros .cand-photo::after{
  content:""; position:absolute; inset:0 auto 0 -364px; width:1434px;
  background:linear-gradient(91.5deg,#fff 53.6%,rgba(255,255,255,.61) 63.7%,rgba(115,115,115,0) 82.3%);
}
.cd-cartes span{ left:50%; right:auto; width:114px; padding:0; transform:translateX(-50%); }
.cd-cartes li:nth-child(3) span{ width:171px; }
.cd-cartes li:nth-child(4) span{ width:100px; }
.gabarit-candidats .faq-item .plus{ width:50px; height:50px; border-radius:50%; background:rgba(116,109,255,.2); color:#325EE2; font-family:'Inter',sans-serif; font-weight:700; font-size:40px; line-height:1; display:flex; align-items:center; justify-content:center; }
@media (min-width:1100px){
  .gabarit-candidats .pied{ padding-top:67px; }
}

/* Retour de Sylvain (23/09, « revérifie la taille ») : une fiche d'adresse garde la
   hauteur de la carte de la frame (458) — nom sur deux lignes au plus en 24 px,
   description sur deux lignes, marges resserrées. */
.cd-carte.cand-carte .cd-groupe-corps{ padding-top:14px; gap:0 40px; }
.cd-carte.cand-carte .cd-groupe-texte h3{ font-size:22px; line-height:28px; margin-top:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cd-carte.cand-carte .cd-groupe-texte .accroche{ margin-top:10px; -webkit-line-clamp:2; }
.cd-carte.cand-carte .cd-groupe-texte .cand-groupe-action{ margin-top:8px; }
.cd-carte{ min-height:458px; }
.cd-tous{ display:none; }

/* Les fiches d'adresse portent aussi la classe cand-carte (filtre de ville et mesure) :
   on neutralise ici l'ancien habillage de cette classe pour garder la carte de la frame. */
.cd-carte.cand-carte{ display:block; padding:0 0 7px; gap:0; background:#fff; border-radius:28px; box-shadow:0 4px 4px rgba(0,0,0,.25); text-align:left; }
.cd-carte.cand-carte .cd-photo{ margin:0; }
.cd-carte.cand-carte .cd-groupe-texte p{ font-size:18px; color:#101828; }

/* Contact (23/09) : la vague de fond du héros, 1881 px de large comme la frame, faisait
   déborder la page de 82 px à droite (barre horizontale). Le débordement est coupé. */
.gabarit-contact main{ overflow-x:clip; }
.gabarit-contact .ct-heros{ overflow-x:clip; }

/* CortexIA, document de Théodore du 22/09 (« couleurs CTA ») : le bouton plein du héros
   va d'un lilas clair en haut à un violet profond en bas dans la frame (relevé pixel :
   #CBB7E7 → #7300C7). */
.gabarit-cortexia .ia-heros .actions .btn-accent{ background:linear-gradient(180deg,#CFBCE8 0%,#9F5AD7 48%,#7300C7 100%); border:0; color:#fff; box-shadow:0 6px 14px -6px rgba(80,0,140,.45); }
.gabarit-cortexia .ia-heros .actions .btn-accent:hover{ background:linear-gradient(180deg,#D6C6EC 0%,#A868DB 45%,#8214D4 100%); }

/* Contrôle du 23/09 au soir, frames Mentions / Politique / Article. */
/* La date « Dernière mise à jour » remonte dans la bande du héros par marge négative ;
   le héros étant positionné, il la recouvrait. */
.gabarit-legal .texte-corps .maj{ position:relative; z-index:3; }
/* Frame 127:49 : le numéro du titre est de la couleur du titre (« 1. Définition »),
   et le bloc « Articles liés » se cale sous le sommaire à 22 px. */
.art-texte h2 .num{ color:inherit; }
@media (min-width:1100px){
  .lies{ width:249px; margin-top:22px; border-top:0; padding:20px 16px 18px 20px; background:#fff; border-radius:22px; box-shadow:var(--ombre-carte); }
  .lies h2{ border-left:0; padding-left:0; font-size:16px; line-height:20px; }
  .lies .item{ grid-template-columns:44px 1fr; gap:10px; padding:8px 0; }
  .lies .item .vign{ border-radius:6px; }
  .lies .item p{ font-size:12.5px; line-height:1.3; }
  .lies .item small{ font-size:11.5px; }
}
@media (min-width:1100px){
  /* Sommaire de la frame 127:49 : titre 22 px, entrées Satoshi 20 px sur 36 px. */
  .sommaire h2{ font-size:22px; line-height:28px; margin-bottom:10px; }
  .sommaire a{ font-family:'Satoshi',sans-serif; font-size:20px; line-height:24px; padding:15px 0 15px 12px; gap:10px; }
  .sommaire a b{ font-weight:700; }
}

/* ===== CortexIA, recette du 23/09 contre la frame 687:2098 ===== */
@media (min-width:1100px){
  /* Étapes : numéros Satoshi 900 / 32 bleu #0161D8 dans un cercle de 59 px à bord bleu,
     traits et flèches bleus (la frame n'utilise pas le violet ici), libellés Inter 700 / 20. */
  .ia-etape .rang{ font-family:'Inter',sans-serif; font-weight:700; font-size:20px; color:#101828; }
  .ia-etape .rang span{ width:59px; height:59px; border:1.6px solid #0161D8; color:#0161D8; font-size:32px; font-weight:900; }
  .ia-etape .rang span::after, .ia-etapes-grille > .ia-etape + .ia-etape .carte::before, .ia-etapes-grille > .ia-etape + .ia-etape .carte::after{ background:#0161D8; }
  /* Carte 2 : libellés Inter 500 / 18, valeurs Satoshi 500 / 13 dans une case blanche
     339 × 46 à bord fin, à 18 px du bord de la carte. */
  .ia-etape:nth-child(2) .carte{ padding-left:18px; padding-right:17px; }
  .ia-etape .ia-libelle{ font-family:'Inter',sans-serif; font-weight:500; font-size:18px; color:#0B172E; }
  .ia-etape .ia-valeur{ height:46px; padding:0 18px; background:#fff; border:1px solid rgba(11,23,46,.14); border-radius:8px; font-family:'Satoshi',sans-serif; font-weight:500; font-size:13px; color:#101828; }
  /* Carte 3 : question Inter 600 / 18 sur 320 px, réponses Satoshi 500 / 13 au pas de 39 px,
     lettre dans un cercle blanc de 27 px à bord gris, bonne réponse sur #BCDFDE. */
  .ia-etape .question{ font-family:'Inter',sans-serif; font-weight:600; font-size:18px; line-height:22px; max-width:320px; color:#0B172E; }
  .ia-etape .reponses{ margin-top:10px; gap:0; margin-left:-4px; }
  .ia-etape .reponses li{ height:39px; width:284px; padding:0 6px; gap:8px; border-radius:8px; font-family:'Satoshi',sans-serif; font-weight:500; font-size:13px; color:#101828; }
  .ia-etape .reponses li b{ width:27px; height:27px; background:#fff; border:1px solid #D9D9D9; color:#101828; font-weight:500; font-size:13px; }
  .ia-etape .reponses li.juste{ background:#BCDFDE; color:#101828; }
  .ia-etape .reponses li.juste b{ background:#fff; color:#028D9D; }
  /* Bibliothèque : Montserrat, titre 700 / 24 #1E1E1E, colonnes 600 / 20, boutons bleus. */
  .carte-biblio .titre{ font-family:'Montserrat','Satoshi',sans-serif; font-weight:700; font-size:24px; color:#1E1E1E; }
  .carte-biblio th, .carte-biblio td{ font-family:'Montserrat','Satoshi',sans-serif; font-weight:600; font-size:20px; color:#101828; }
  .carte-biblio .btn-mini{ background:#3769C1; font-family:'Montserrat','Inter',sans-serif; font-weight:600; }
  /* Crédits : « 124 » en 48 px, pictos à contour blanc de la frame, libellés sur 92 / 131 px
     (« Usage ponctuel » sur deux lignes), seconde ligne de séparation à 1089 px de la carte. */
  .ia-credits .compteur .n{ font-size:48px; line-height:1; display:block; margin-bottom:6px; }
  .ia-credits .paliers .ico{ width:64px; height:60px; align-items:center; }
  .ia-credits .paliers .ico img{ display:block; width:100%; height:100%; object-fit:contain; }
  .ia-credits .paliers li{ gap:8px; }
  .ia-credits .paliers li:nth-child(1) span{ width:92px; }
  .ia-credits .paliers li:nth-child(2) span, .ia-credits .paliers li:nth-child(3) span{ width:131px; }
  .ia-credits .carte{ position:relative; }
  .ia-credits .sep-2{ position:absolute; left:1089px; top:38px; width:2px; height:188px; }
  /* Appel : la bulle reste dans la carte (fond #FAFBFC, 340 px), bouton Satoshi 700 / 20. */
  .gabarit-cortexia .carte-appel{ overflow:hidden; background:#FAFBFC; min-height:340px; }
  body.gabarit-cortexia .appel .carte-appel .visuel{ background:none; }
  .gabarit-cortexia .carte-appel .btn{ font-size:20px; }
}
@media (min-width:1100px){
  /* ⛔ Une .boite est centrée par margin:auto : lui poser un margin-left casse le centrage
     (la grille partait à -42 et -1 px au lieu de 66). Les décalages passent sur les enfants. */
  .ia-exigences{ padding-top:154px; }
  .ia-exigences-grille{ margin-left:auto; grid-template-columns:269px 395px 614px; gap:0 36px; }
  .ia-partage-grille{ margin-left:auto; grid-template-columns:938px minmax(0,1fr); }
  .carte-biblio{ margin-left:-42px; width:938px; }
  /* Carte 3 : question à 1174 (frame 1196 au centre), réponses à partir de 1228. */
  .ia-etape:nth-child(3) .carte{ padding-top:36px; }
  .ia-etape .ia-libelle + .ia-valeur + .ia-libelle{ margin-top:30px; }
  /* Paliers : libellés centrés à la même hauteur (2733) qu'ils tiennent sur une ou deux lignes. */
  .ia-credits .paliers{ align-items:flex-start; }
  .ia-credits .paliers span:not(.ico){ height:38px; display:flex; align-items:center; justify-content:center; }
  .ia-credits .droite{ margin-top:-8px; }
  .ia-credits .btn-plan{ margin-top:25px; }
  /* Dans la frame (Line 31), ce second séparateur ne fait que 94 px : il s'arrête
     au-dessus du bouton au lieu de le traverser (Sylvain, 25/09). */
  .ia-credits .sep-2{ top:43px; height:94px; }
  /* Appel : carte 1293 px à x=47 (frame), section à 2966. */
  .gabarit-cortexia .appel{ padding-top:5px; }
  .gabarit-cortexia .carte-appel{ margin-left:-51px; width:1293px; }
}
@media (min-width:1100px){
  /* Bibliothèque : en-têtes de colonnes 16 px plus bas que posés, « Statut » centré sur les
     badges, « + inviter » 156 × 46 en Montserrat 600 / 20, « … » 52 px ; pictos PDF/DOCX/PPTX
     à 92 px comme la frame. */
  .carte-biblio th{ padding:16px 8px 3px 0; }
  .carte-biblio th:nth-child(3), .carte-biblio td:nth-child(3){ text-align:center; }
  .carte-biblio .btn-mini{ width:156px; justify-content:center; padding:0; font-size:20px; }
  .carte-biblio .btn-mini.rond{ width:52px; }
  .ia-etape .fichier img{ width:92px; height:92px; }
}

/* ===== Recette du 23/09, Candidats (frame 77:1465) et Contact (frame 900:1135) ===== */
@media (min-width:1100px){
  /* Candidats : panneau blanc de 846 px (1825 → 2671), note « Prévoyez une marge » posée
     23 px sous le panneau, panneau lilas à 2863 ; le carrousel garde ses flèches, le panneau
     lilas retrouve ses 846 px ; FAQ 31 px plus bas, appel 93 px plus haut et 61 px plus long. */
  .gabarit-candidats .cd-panneau.blanc{ position:relative; height:846px; box-sizing:border-box; }
  .gabarit-candidats .cd-marge{ position:absolute; left:15px; top:869px; margin:0; }
  .gabarit-candidats .cd-panneau.lilas{ margin-top:192px; height:846px; box-sizing:border-box; overflow:visible; }
  .gabarit-candidats .cand-partenaires{ margin-top:-5px; }
  .gabarit-candidats .sol-faq{ padding-top:119px; padding-bottom:23px; }
  .gabarit-candidats .appel{ padding:44px 0 61px; }
  /* Contact : colonne gauche à x=110 (titre 51 px sous la bande grise), carte du formulaire
     937 px à x=683 avec ses champs de 645 px à 57 px du bord ; carte « bonnes mains »
     1239 × 399 à x=110, textes des univers sur deux lignes au plus. */
  .gabarit-contact .ct-grille{ max-width:none; width:1332px; margin:0 0 0 calc(50% - 610px); grid-template-columns:573px 759px; gap:0; padding-bottom:38px; }
  .gabarit-contact .ct-grille::after{ left:-113px; }
  .gabarit-contact .ct-mains .carte{ padding-top:60px; }
  .gabarit-contact .ct-carte{ margin-top:90px; width:937px; padding-right:235px; }
  .gabarit-contact .ct-mains .carte{ width:1239px; margin-left:calc(50% - 610px); }
  .gabarit-contact .ct-univers > div > p + p{ font-size:16px; line-height:1.3; }
}
@media (min-width:1100px){
  /* Contact, « bonnes mains » : sous-titres Inter 16 sur deux lignes au plus (frame : 230 px). */
  .gabarit-contact .ct-univers > div{ gap:12px; }
  .gabarit-contact .ct-univers > div > div, .gabarit-contact .ct-univers > div > p + p{ max-width:none; min-width:0; flex:1 1 auto; width:auto; }
  .gabarit-contact .ct-univers > div > p + p{ font-size:16.5px; line-height:1.3; margin-top:8px; }
}
@media (min-width:1100px){
  /* La colonne du milieu ne fait que 362 px : le bloc texte prend les 229 px de la frame
     quelle que soit la colonne (il reste à gauche du picto suivant, posé à 973). */
  .gabarit-contact .ct-univers > div > div{ width:229px; }
  .gabarit-contact .ct-univers > div > div > p + p{ font-size:20px; font-weight:500; line-height:24px; }
}

/* Deux cases de consentement sur le contact (réunion du 17/09) : la seconde suit la première. */
.ct-consent + .ct-consent{ margin-top:10px; }

/* Feedback 1 de Sarah (28/09), page CortexIA.
   41 · Sphère « aplatie » : bulle.webp (1536 × 1024, rapport 1,5) était étirée dans
   une boîte de 1013 × 525 (rapport 1,93). Recadrage repris de la frame (687:2148) :
   image à 104,54 % × 134,48 % de la boîte, remontée de 34,48 %, sans déformation. */
@media (min-width:1100px){
  .gabarit-cortexia .carte-appel .visuel.bulle{ overflow:hidden; }
  .gabarit-cortexia .carte-appel .visuel.bulle img{
    position:absolute; left:0; top:-34.48%; width:104.54%; height:134.48%; max-width:none;
  }
}
.gabarit-cortexia .carte-appel .visuel.bulle img{ object-fit:cover; }
/* 40 · La jauge déborde de sa boîte de la moitié du trait, comme dans la frame. */
.ia-credits .anneau svg{ overflow:visible; }

/* Feedback 1 de Sarah (28/09), page Vos métiers.
   44 · Le rond de la bande d'appel porte la sphère de l'accueil sur le disque bleu
   pâle du rond « cube » : le fond du conteneur prend la même teinte (le rose
   débordait en liseré). 45 · Texte du bouton à 20 px / 700, comme sur les pages
   solutions (17 px ici). */
.gabarit-metiers .appel .carte-appel .visuel{ background:#E7EEFB; }
.gabarit-metiers .appel .btn{ font-size:20px; font-weight:700; }

/* ============================================================
   Feedback 1 de Sarah (28/09) — page Candidats, points 62 à 64
   (tickets #76 à #78).
   ============================================================ */
/* 62 · « Image ne fait pas tout l'écran » : la photo faisait 1 140 px posée à
   303 px du bord ; au-delà de 1 440 px de fenêtre (1 536 chez Sarah) elle
   s'arrêtait avant le bord droit. Elle va maintenant jusqu'au bord à toutes les
   largeurs, en gardant son départ par rapport au texte (303 px à 1 440). */
@media (min-width:1100px){
  .cand-heros .cand-photo{ left:max(223px, calc(50% - 417px)); right:0; width:auto; }
  .cand-heros .cand-photo img{ width:100%; object-position:center center; }
}

/* 63 · Cartes Hôtel et Restaurants alignées : même position du titre, de la
   phrase et du bouton. La carte d'adresse (titre 22 px) reprend la ligne de
   41 px et les écarts de la carte générique (titre 30 px) ; le paragraphe du
   bouton ne rajoute plus sa propre hauteur de ligne (55 px contre 49). */
.cd-carte.cand-carte .cd-groupe-corps{ padding-top:17px; }
.cd-carte.cand-carte .cd-groupe-texte h3{ line-height:41px; margin-top:-6px; }
.cd-carte.cand-carte .cd-groupe-texte .accroche{ margin-top:22px; }
.cd-groupe-texte .cand-groupe-action,
.cd-carte.cand-carte .cd-groupe-texte .cand-groupe-action{ margin-top:10px; font-size:0; line-height:0; }

/* ============================================================
   Feedback 1 de Sarah (version complète du 28/09) — page Contact,
   tickets #81 à #86.
   ============================================================ */
/* 81 · Vague du haut centrée : son centre de masse (x = 911 dans l'image de
   1 881 px) tombait 83 px à gauche du centre de la page à 1 440, davantage au-delà. */
@media (min-width:1100px){
  .ct-heros .vague-fond{ left:calc(50% - 911px); }
}
/* 82 · « Bonne réponse » et « Parlons-en. » repris de la maquette (frame 900:1135,
   revu le 29/09) : 80 px dans un titre en 72, soit 1,111 em, ce qui suit aussi le
   titre sur petit écran. Dans Figma le dégradé (rose 74 % jusqu'à 44,7 %, puis bleu
   74 %) couvre tout le bloc de texte : sur le seul mot, la couleur dépend de la
   ligne où il tombe. Les deux dégradés ci-dessous sont mesurés rangée de pixels par
   rangée de pixels sur le rendu de la maquette : « bonne réponse » part du rose franc
   et finit bleu, « Parlons-en. » (3e ligne) reste entre le rose foncé et le violet.
   Le dégradé de l'accueil posé le 28/09 est abandonné. */
.ct-heros h1 .degrade,
.ct-cote h2 .degrade{ font-size:1.111em; }
.ct-heros h1 .degrade{ background-image:linear-gradient(180deg,rgba(255,0,102,.74) 0%,rgba(61,101,224,.74) 85%) !important; }
.ct-cote h2 .degrade{ background-image:linear-gradient(180deg,rgba(208,24,131,.74) 0%,rgba(106,78,196,.74) 100%) !important; }
/* 83 · Contours sans couleur : les deux cartes (formulaire et « Votre demande,
   directement entre de bonnes mains ») avaient un liseré rose. */
@media (min-width:1100px){
  .ct-carte,
  .ct-mains .carte{ border-color:rgba(11,23,46,.10); }
}
/* 84 · Encadrement des champs actifs en 746DFF au lieu du rose de la page. */
.ct-form input:focus,
.ct-form select:focus,
.ct-form textarea:focus{ outline:2px solid #746DFF; border-color:transparent; }

/* 28/09 · CortexIA est posée au pixel sur la maquette de 1 440 px (cartes de 374 px, carte
   d’appel de 1 293, schéma du flux à 834 px du bord). Entre 1 100 et 1 439 px la page débordait
   (jusqu’à 1 398 px de large) et coupait cartes, texte et schéma. Elle est maintenant réduite
   à l’échelle de la fenêtre, par paliers de 40 px, sans rien réagencer ; le dépassement
   décoratif restant (marge vide du schéma, 8 px au plus) est rogné. */
.gabarit-cortexia main{ overflow-x:clip; }
@media (min-width:1100px) and (max-width:1139px){ .gabarit-cortexia main{ zoom:0.76; } }
@media (min-width:1140px) and (max-width:1179px){ .gabarit-cortexia main{ zoom:0.79; } }
@media (min-width:1180px) and (max-width:1219px){ .gabarit-cortexia main{ zoom:0.81; } }
@media (min-width:1220px) and (max-width:1259px){ .gabarit-cortexia main{ zoom:0.84; } }
@media (min-width:1260px) and (max-width:1299px){ .gabarit-cortexia main{ zoom:0.87; } }
@media (min-width:1300px) and (max-width:1339px){ .gabarit-cortexia main{ zoom:0.9; } }
@media (min-width:1340px) and (max-width:1379px){ .gabarit-cortexia main{ zoom:0.93; } }
@media (min-width:1380px) and (max-width:1419px){ .gabarit-cortexia main{ zoom:0.95; } }
@media (min-width:1420px) and (max-width:1439px){ .gabarit-cortexia main{ zoom:0.98; } }

/* 28/09 · Ressources entre 1 100 et 1 439 px : la grille était posée au pixel pour 1 440
   (cartes de 334 px + colonne « Les plus consultés » de 313 = 1 372 px) et poussait la page
   à 1 414 px de large. Les cartes se partagent désormais la place, sur deux colonnes sous
   1 280 px. Les filtres, qui débordaient dans une zone à défilement caché (« Logiciels &
   Apps » invisible à 1 280), passent à la ligne. */
@media (min-width:1100px) and (max-width:1439px){
  .res-corps{ grid-template-columns:minmax(0,1fr) 313px; margin-left:0; }
  .res-grille{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .res-filtres .boite{ flex-wrap:wrap; row-gap:8px; overflow-x:visible; padding-left:32px; padding-right:32px; }
}
@media (min-width:1100px) and (max-width:1279px){
  .res-grille{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* 28/09 · Candidats : entre 1 100 et 1 259 px, cartes, étapes du jour J et fiche d’accès
   dépassaient jusqu’à 147 px. Même mise à l’échelle par paliers que l’accueil et CortexIA. */
@media (min-width:1100px) and (max-width:1139px){ .gabarit-candidats main{ zoom:0.87; } }
@media (min-width:1140px) and (max-width:1179px){ .gabarit-candidats main{ zoom:0.9; } }
@media (min-width:1180px) and (max-width:1219px){ .gabarit-candidats main{ zoom:0.93; } }
@media (min-width:1220px) and (max-width:1259px){ .gabarit-candidats main{ zoom:0.96; } }

/* 28/09 · Politique de confidentialité : la carte grise déborde du texte de 50 px à gauche
   et 45 px à droite (maquette de 1 440). Sous cette largeur elle sortait de l'écran et
   élargissait la page (1 293 px à 1 280). Le débord est ramené à la marge disponible,
   moins 12 px, pour que les coins arrondis restent visibles. */
@media (min-width:1100px){
  .gabarit-politique .texte-corps h2:first-of-type::before{
    left:calc(-1 * min(50px, max(0px, (100vw - 100%) / 2 - 12px)));
    right:calc(-1 * min(45px, max(0px, (100vw - 100%) / 2 - 12px)));
  }
}
/* Sous 1 440 px, le décalage de −22 px de la maquette faisait sortir le texte de la carte
   (texte à 10 px du bord, carte à 12 à 1 280). Le texte reprend l'alignement du conteneur
   et la carte déborde de 28 px de chaque côté, comme à 1 440, dans la limite de l'écran. */
@media (min-width:1100px) and (max-width:1439px){
  .gabarit-legal .texte-corps > *:not(.maj),
  .gabarit-legal .texte-corps h2,
  .gabarit-legal .texte-corps p{ margin-left:0; }
  .gabarit-politique .texte-corps h2:first-of-type::before{
    left:calc(-1 * min(28px, max(0px, (100vw - 100%) / 2 - 12px)));
    right:calc(-1 * min(28px, max(0px, (100vw - 100%) / 2 - 12px)));
  }
}

/* 29/09 · Variante sombre de la vague des Ressources (?vague=nuit), pour comparaison. */
.res-vague.nuit{ background:#05050c; }

/* 29/09 · Vague des Ressources en vidéo (vidéo de référence de Sarah). */
.res-vague .vague-video,
.res-vague .vague-fixe{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.res-vague .vague-video{ z-index:1; }
@media (prefers-reduced-motion:reduce){ .res-vague .vague-video{ display:none; } }

/* 29/09 · Cartes Hébergements / Restaurants (« bien aligner ») : le bouton « Réserver »
   porte aussi la classe .cand-lien, dont la marge haute de 6 px le faisait tomber plus bas
   que « Voir les restaurants » ; et le titre de la carte d'adresse était en 22 px contre 30
   px sur la carte voisine. Les deux titres passent à 26 px (30 px faisait passer le nom de
   l'hôtel sur deux lignes au-delà de 1 440 px). Même titre, même bouton, même hauteur de carte. */
.cd-groupe-texte .cand-groupe-action .btn{ margin-top:0; }
.cd-groupe-texte h3, .cd-carte.cand-carte .cd-groupe-texte h3{ font-size:26px; line-height:41px; }
@media (max-width:640px){ .cd-groupe-texte h3, .cd-carte.cand-carte .cd-groupe-texte h3{ font-size:22px; line-height:30px; } }

/* ============================================================
   30/09 · Retours restants de Sarah, page CortexIA
   (feedback 1 n° 40 et 41, feedback 2 n° 15 à 18), relevés sur la frame 687:2098.
   ============================================================ */
/* F1-40 · Jauge : « 124 » et « crédits » serrés au centre de l'anneau comme dans la
   frame (bloc de 104 px posé 41 px sous le haut de l'anneau). Le <br> ajoutait une
   ligne vide entre les deux. */
.ia-credits .compteur br{ display:none; }
@media (min-width:1100px){
  /* F2-16 · Bulle du bloc « Une IA conçue… » replacée comme dans la frame : image à
     x = -499 (elle était à -597, donc 98 px trop à gauche et presque hors de l'écran).
     Au-delà de 1 440 px elle suit le texte, qui est centré. */
  .ia-exigences::before{ left:calc(max(0px, (100% - 1440px) / 2) - 499px); }
  /* F2-17 · « J'aimerais que ça ne soit pas coupé » : le schéma des sources descendait
     38 px sous le bas de la section, la bande grise suivante en masquait le bas. */
  .ia-exigences{ padding-bottom:48px; }
  /* F2-15 · Carte PDF / DOCX / PPTX : 21 px de marge à gauche, 5 px à droite.
     Les trois fichiers sont centrés, 20 px entre eux, soit ~21 px de chaque côté. */
  .ia-etape .formats{ justify-content:center !important; gap:20px !important; padding-left:0 !important; margin-left:0 !important; }
  /* F2-18 · Bulle de l'appel final « un chouia trop grosse » : réduite de 12 %,
     autour de son centre. */
  .gabarit-cortexia .carte-appel .visuel.bulle img{ transform:scale(.88); transform-origin:52% 46%; }
}

/* ============================================================
   30/09 · Page Candidats, doc de Théodore (numéros du doc de Sarah)
   ============================================================ */
/* Feedback 2 n° 6 et 29 · « en toute sérénité » (et « avant l'épreuve ») avec le dégradé de
   « une seule Suite ». À l'accueil le dégradé couvre tout le titre et ces mots n'en montrent
   que le bas ; ici il est posé sur les mots seuls, recalé sur les couleurs mesurées de
   l'accueil (écart ≤ 5 sur 255). */
.cd-degrade{ background-image:linear-gradient(173.59deg,#E05DAE 0%,#5F74FA 100%) !important; }

/* Feedback 2 n° 30 · Contours des cartes en bleu 20/20 La Suite (#325EE2), plus en rose. */
.gabarit-candidats .cd-cartes a,
.gabarit-candidats .cd-fiche,
.gabarit-candidats .cd-carte{ border-color:rgba(50,94,226,.30); }

/* Fonctionnalités n° 3 · Hébergements et restaurants : un seul bouton, sans flèche bleue,
   et les flèches du carrousel dans la carte (elles étaient dessous, hors de la case). */
.cd-autour .cd-btn-contour.fleche::after{ content:none; display:none; }
.cd-autour .cd-groupe[data-carrousel]{ position:relative; }
.cd-autour .cd-groupe[data-carrousel] > .fleches{ position:absolute; right:24px; bottom:26px; margin:0; z-index:2; }
.cd-autour .cd-groupe[data-carrousel] > .fleches button{ width:40px; height:40px; }

/* ============================================================
   30/09 · Page Contact, doc de Théodore (numéros du doc de Sarah)
   ============================================================ */
@media (min-width:1100px){
  /* Feedback 2 n° 34 · « Trait gris dépasse » : le filet décoratif (ligne-contact.svg)
     partait 113 px à gauche de la colonne de texte. Il part maintenant du bord du texte,
     sa fin ne bouge pas. */
  .gabarit-contact .ct-grille::after{ left:0; width:1170px; }

  /* Feedback 2 n° 35 · « Votre demande, directement entre de bonnes mains » : « pas assez
     aéré ». On garde l'encadrement (il rattache les trois expertises à la demande) et on
     donne de l'air : 72 px au-dessus du titre, 64 px sous les trois expertises. */
  .gabarit-contact .ct-mains .carte{ padding-top:72px; padding-bottom:64px; min-height:0; }
  .gabarit-contact .ct-mains h2{ margin-bottom:72px; }

  /* Feedback 2 n° 36 · Vague du haut « coupée à droite et à gauche » : l'image fait
     1 881 px, ses deux bords apparaissaient sur les écrans plus larges. Elle couvre
     désormais toute la largeur (au moins 1 881 px) et se fond sur les deux bords. */
  .ct-heros .vague-fond{
    --vw:max(1881px, calc(100vw + 160px));
    width:var(--vw); max-width:none; left:calc(50% - var(--vw) * .4843); right:auto;
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 42%), linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
            mask-image:linear-gradient(180deg, transparent 0%, #000 42%), linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
    -webkit-mask-composite:source-in; mask-composite:intersect;
  }
}
/* Feedback 2 n° 37 · Texte d'introduction : plus de retour à la ligne forcé après
   « à connecter ? », il court sur trois lignes comme sur la capture de Sarah
   (« …ou des / outils à connecter ? … vers / l'expert le plus adapté. ») : 750 px. */
.ct-heros .chapo{ max-width:750px; }


/* ============================================================
   30/09 · Page Ressources (et bandeau infolettre, partagé avec les articles),
   doc de Théodore — numéros du doc de Sarah
   ============================================================ */
/* Feedback 2 n° 31 · « agir. » et « des nouvelles ressources. » avec le dégradé de l'accueil
   (« une seule Suite »), mêmes valeurs mesurées que sur Candidats. */
.res-heros h1 em,
.infolettre h2 .degrade-suite{
  font-style:normal; background-image:linear-gradient(173.59deg,#E05DAE 0%,#5F74FA 100%) !important;
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  padding-bottom:.16em; margin-bottom:-.16em;
}
/* Feedback 2 n° 33 · Boutons aux couleurs de 20/20 La Suite (dégradé du bouton « Nous
   contacter » de l'en-tête : #746DFF → #325DEA) et bandeau infolettre plus sobre : fond
   bleu-lavande, vague d'une seule teinte bleue au lieu du rose / turquoise. */
.res-filtres button[aria-pressed="true"]{ background:linear-gradient(114deg,#746DFF 0%,#325DEA 63.5%) !important; color:#fff !important; border-color:transparent !important; }
.infolettre .btn, .infolettre .btn.btn-nuit{ background:linear-gradient(114deg,#746DFF 0%,#325DEA 63.5%) !important; color:#fff !important; border-color:transparent !important; }
.infolettre .btn:hover{ filter:brightness(1.08); }
.infolettre .carte{ background:linear-gradient(100deg,#F3F2FF 0%,#ECEFFE 50%,#EAF1FC 100%) !important; }
.infolettre canvas{ opacity:.55; }
/* Fonctionnalités n° 7 · Message d'erreur : écriture rouge, fond transparent. */
.info-retour.erreur{ background:transparent !important; color:#D0021B !important; padding-left:0 !important; padding-right:0 !important; }
/* Fonctionnalités n° 6 · Toute la carte d'une ressource est cliquable (lien du titre
   étendu à la carte), avec un léger effet au survol. */
.res-carte{ position:relative; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease; }
.res-carte h3 a::after{ content:""; position:absolute; inset:0; z-index:1; }
.res-carte:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -18px rgba(11,23,46,.35); }
.res-carte:hover h3 a{ text-decoration:underline; text-underline-offset:3px; }
/* Feedback 1 n° 65 · « Le texte n'est pas correctement affiché » : la colonne de texte du héros
   faisait 560 px fixes alors que sa marge gauche grandit avec l'écran ; le paragraphe tombait à
   178 px à 1 920 px (un mot par ligne) et disparaissait à 2 560 px. La colonne grandit
   désormais de la même quantité que sa marge : le texte garde sa largeur de 1 440 px. */
@media (min-width:1100px){
  .res-heros{ grid-template-columns:calc(560px + max(0px, (100vw - 1440px) / 2)) minmax(0,1fr) !important; }
}
/* Fonctionnalités n° 5 · Ligne de résultat de la recherche d'adresses (Candidats). */
.cd-resultat{ margin:18px auto 0; text-align:center; font-weight:600; color:#325EE2; }

/* Feedback 1 n° 66 · Variante « V1 » de la page Ressources (/ressources/?variante=v1) :
   la sphère de l'accueil en image fixe, grande et coupée en haut à droite du héros comme
   sur la maquette V1 de Sarah, et reprise à droite du bandeau infolettre. */
.res-v1 .res-heros{ position:relative; overflow:hidden; }
.res-v1 .res-sphere{ position:relative; min-height:240px; overflow:hidden; }
.res-v1 .res-sphere img{ position:absolute; width:130%; max-width:none; right:-24%; top:-38%; mix-blend-mode:multiply; }
@media (min-width:1100px){
  .res-v1 .res-heros{ min-height:470px; }
  .res-v1 .res-sphere img{ width:min(860px, 64vw); right:max(-120px, calc((100vw - 1440px) / 2 - 120px)); top:-250px; }
}
.infolettre.avec-sphere .carte{ overflow:hidden; }
.infolettre.avec-sphere canvas{ display:none; }
.infolettre.avec-sphere .info-sphere{ position:absolute; z-index:0; pointer-events:none; mix-blend-mode:multiply; opacity:.9;
  width:560px; max-width:none; right:-60px; top:50%; transform:translateY(-52%); }
@media (max-width:1099px){ .infolettre.avec-sphere .info-sphere{ width:360px; right:-120px; opacity:.5; } }


/* ============================================================
   30/09 · Décisions de Sylvain (« faire à la demande de Sarah »)
   ============================================================ */
/* Feedback 1 n° 68 et Feedback 2 n° 38 · Page Contact : « bonne réponse », « Parlons-en. »,
   le téléphone et l'e-mail avec le dégradé de l'accueil (« une seule Suite »), recalé comme
   sur Candidats et Ressources. Remplace le dégradé de la maquette posé le 29/09 ; la taille
   de 80 px de la maquette est conservée. */
.ct-heros h1 .degrade,
.ct-cote h2 .degrade,
.ct-direct .tel a,
.ct-direct .mail a{
  background-image:linear-gradient(173.59deg,#E05DAE 0%,#5F74FA 100%) !important;
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
/* Case obligatoire du contact : même dessin que les deux autres, message si elle manque. */
.ct-case-manquante{ margin-top:8px; color:#D0021B; font-size:15px; }
.ct-obligatoire a, .diag-obligatoire a{ color:inherit; text-decoration:underline; }

/* 30/09 · Page Ressources en version mobile et tablette (vérification demandée par Sylvain).
   Sous 1 080 px le texte du héros n'avait aucune marge (titre collé au bord de l'écran) et le
   reste de la page gardait la marge de 51 px de la maquette ordinateur : à 320 px la page
   débordait de 24 px. Marges standard du site : 32 px sur tablette, 20 px sur téléphone. */
@media (max-width:1080px){
  .gabarit-ressources .boite{ padding-left:32px; padding-right:32px; }
  .gabarit-ressources .res-filtres .boite{ padding-left:32px; padding-right:32px; }
  .res-heros .texte{ padding:40px 32px 20px !important; }
  .res-heros p{ margin-top:24px !important; }
}
@media (max-width:640px){
  .gabarit-ressources .boite,
  .gabarit-ressources .res-filtres .boite{ padding-left:20px; padding-right:20px; }
  .res-heros .texte{ padding:32px 20px 12px !important; }
}

/* 30/09 · Audit responsive (téléphones) :
   - CortexIA, bibliothèque partagée : le tableau (470 px) dépassait de sa carte et coupait
     la colonne « Statut ». Sous 640 px, colonne « Partagé avec » retirée, cellules resserrées ;
   - Candidats : les flèches du carrousel, posées en bas à droite de la carte, chevauchaient
     le texte sur téléphone. Elles passent sous le bouton, centrées, dans la carte. */
@media (max-width:640px){
  .carte-biblio{ padding:20px 16px 22px; }
  .carte-biblio th:nth-child(4), .carte-biblio td:nth-child(4){ display:none; }
  .carte-biblio th, .carte-biblio td{ padding:10px 5px; font-size:14px; }
  .carte-biblio td:first-child > *{ max-width:100%; }
  .carte-biblio table{ table-layout:fixed; }
  .cd-autour .cd-groupe[data-carrousel] .cd-carte{ padding-bottom:66px; }
  .cd-autour .cd-groupe[data-carrousel] > .fleches{ right:auto; left:50%; transform:translateX(-50%); bottom:20px; }
}
/* Audit responsive (suite) : « Macroéconomie » dépassait de sa cellule sur téléphone, et le
   bandeau infolettre des articles (marges négatives du cadre 1 440) sortait de 12 px à 1 280. */
@media (max-width:640px){
  .carte-biblio td, .carte-biblio th{ overflow-wrap:anywhere; hyphens:auto; }
  .carte-biblio td:nth-child(2){ font-size:13px; }
}
@media (min-width:1100px) and (max-width:1439px){
  .gabarit-article .infolettre .carte{ margin-left:0 !important; margin-right:0 !important; }
}
/* Audit visuel mobile, CortexIA : dans la bande « 1 question validée = 1 crédit », les
   pictos des paliers (images de 200 px) n'étaient contraints que sur ordinateur et
   débordaient sur leurs libellés ; les filets verticaux restaient affichés. */
@media (max-width:1099px){
  .ia-credits .sep, .ia-credits .sep-2{ display:none !important; }
  .ia-credits .anneau{ justify-self:center; }
  .ia-credits .paliers{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px !important; width:100%; align-items:start; }
  .ia-credits .paliers li{ gap:8px; }
  .ia-credits .paliers .ico{ width:56px !important; height:56px !important; align-items:center; }
  .ia-credits .paliers .ico img{ display:block; width:100%; height:100%; object-fit:contain; }
  .ia-credits .paliers span:not(.ico){ width:auto !important; max-width:none; height:auto !important; font-size:14px; }
  .ia-credits .droite{ align-items:center !important; gap:22px !important; margin-top:0 !important; }
}
@media (max-width:1099px){
  /* colonne unique réellement contrainte : à 320 px la grille gardait 263 px pour 236 disponibles */
  .ia-credits .carte{ grid-template-columns:minmax(0,1fr) !important; }
  .ia-credits .carte > *{ min-width:0; }
}
@media (max-width:400px){
  .ia-credits .titre{ font-size:26px !important; line-height:1.2; }
  .ia-credits .mention{ font-size:17px; }
  .ia-credits .btn-plan{ font-size:16px; padding-left:18px; padding-right:18px; }
}

/* ============================================================
   01/10 · Document de Théodore (« Mon retour » + Fonctionnalités n° 3 et 4)
   ============================================================ */
@media (min-width:1100px){
  /* Candidats · les deux panneaux avaient la hauteur fixe de la maquette (846 px) :
     la fiche « Espace Jean Monnet », plus longue avec les transports, en sortait (double
     contour en bas à droite), et « Offres proposées par nos partenaires » remontait sur
     les cartes. Hauteur minimale au lieu d'une hauteur fixe, air sous les cartes. */
  .gabarit-candidats .cd-panneau.blanc,
  .gabarit-candidats .cd-panneau.lilas{ height:auto !important; min-height:846px; padding-bottom:48px !important; }
  .gabarit-candidats .cand-partenaires{ margin-top:28px !important; }
  /* Contact · « trop serré à gauche » : le formulaire collait au bord gauche de la carte
     et les cases du bas passaient dans l'arrondi de 157 px. Plus de marge à gauche et
     sous les cases. */
  .gabarit-contact .ct-carte{ padding-left:76px !important; padding-bottom:72px !important; }
}
/* 01/10 · Cases du formulaire de contact : interligne de 15 px pour un texte de 16 px, le
   texte débordait de sa ligne et paraissait décalé vers le bas par rapport à la case.
   Interligne de 21 px, case centrée sur la première ligne, même écart entre les trois. */
@media (min-width:1100px){
  .gabarit-contact .ct-consent{ line-height:21px !important; gap:12px !important; }
  .gabarit-contact .ct-consent input{ margin-top:1px !important; }
  .gabarit-contact .ct-consent + .ct-consent{ margin-top:12px !important; }
}
@media (max-width:1099px){
  .gabarit-contact .ct-consent input{ margin-top:2px !important; }
}

/* 01/10 · Fonctionnalité, feedback 1 n° 4 (Sarah) : « aligner la case flèche et la case Voir les hôtels ».
   Les flèches étaient 14 px au-dessus du bouton ; leur centre est calé sur celui du bouton. */
.cd-autour .cd-groupe[data-carrousel] > .fleches{ bottom:12px; }
@media (min-width:641px) and (max-width:1099.98px){
  .cd-autour .cd-groupe[data-carrousel] > .fleches{ bottom:20px; }
}
@media (max-width:640px){
  .cd-autour .cd-groupe[data-carrousel] > .fleches{ bottom:20px; }
}

/* 01/10 · UI, feedback 2 n° 6 (Sarah) : « prendre les mêmes couleurs que la homepage ».
   Sa capture compare la FAQ (« QUESTIONS FRÉQUENTES » en rose) à « NOTRE RÉPONSE » de l'accueil :
   sur-titre bleu #325EE2 sans dégradé, et mots en couleur des h2 avec la rampe des h2 de l'accueil. */
.gabarit-candidats .surtitre{ background-image:none !important; -webkit-text-fill-color:currentColor; color:#325EE2 !important; }
.gabarit-candidats h2 .cd-degrade{ background-image:linear-gradient(to bottom right,#FA58A3 -20%,#5F74FA 90%) !important; }

/* 01/10 · UI, feedback 1 n° 42 (Sarah) : « descendre un peu plus la bulle, plus proche de
   pédagogiques ». Le centre de la bulle était au niveau de la 1re ligne du titre ; descendu de
   120 px, il arrive entre « exigences » et « pédagogiques ». */
@media (min-width:1100px){
  .ia-exigences::before{ top:-102px; }
}

/* 01/10 · UI, feedback 1 n° 45 : Group 17 (les trois logos 3D côte à côte, fichier de Sarah)
   sur le disque bleu pâle. Plus large que haut, il déborde un peu du disque, comme les logos des héros. */
.gabarit-metiers .appel .carte-appel .visuel img[src*="rond-groupe"]{ width:118%; height:auto; max-width:none; flex:none; }
@media (max-width:640px){ .gabarit-metiers .appel .carte-appel .visuel img[src*="rond-groupe"]{ width:104%; } }

/* 01/10 · UI, feedback 2 n° 30 (Sarah) : « le bouton S'abonner n'est pas le même ». Dans la
   maquette c'est une pilule entière, qui chevauche le bout du champ, en graisse moyenne ;
   ici il était carré à gauche, collé au champ, en gras. */
@media (min-width:1100px){
  .infolettre .btn{ border-radius:23px; margin-left:-23px; position:relative; z-index:1; font-weight:500; }
  .infolettre input[type=email]{ padding-right:46px; }
}

/* 01/10 · UI, feedback 2 n° 15 (Sarah) : « j'aimerais que ça ne soit pas coupé » (schéma des
   quatre critères). La bande grise de « Bibliothèque partagée » remonte de 38 px sur ce bloc ;
   selon le rendu des polices, elle passait sur le bas du schéma et coupait la ligne rose.
   Le bloc du schéma passe au-dessus de la bande : le dessin reste entier. */
@media (min-width:1100px){
  .ia-exigences{ z-index:2; }
}

/* 01/10 · UI, feedback 1 n° 68 (Sarah) : « que se passe-t-il avec l'image ? ». Sur un écran plus
   large que 1 440 px, la vague élargie le 30/09 (n° 36) gardait 709 px de haut en « cover » : elle
   était agrandie et son creux, en bas de l'image, sortait du héros ; il ne restait que les deux
   coins. Le cadrage remonte avec l'agrandissement pour que le creux (ligne 687 de l'image)
   reste à la même hauteur qu'à 1 440 px : seul le haut, presque vide, sort du cadre. */
@media (min-width:1100px){
  .ct-heros .vague-fond{
    object-position:0 calc(-127px - (var(--vw) - 1881px) * 687 / 1881);
  }
}

/* 01/10 · Une seule case (F1 n° 73, Fonctionnalités n° 1) : mention d'information sous la case. */
.ct-info-legale{ margin:10px 0 0 31px; font-size:13px; line-height:18px; color:#667085; }

/* 01/10 · Audit responsive : à 320 px, « pédagogique » (paliers de crédits CortexIA) dépassait
   de sa colonne de 10 px. Libellés un peu plus petits sous 360 px, et coupure permise. */
@media (max-width:389.98px){
  .ia-credits .paliers span:not(.ico){ font-size:12.5px !important; overflow-wrap:anywhere; hyphens:auto; }
  .ia-credits .paliers{ gap:8px !important; }
}

/* 02/10 · UI, feedback 2 n° 15 (Sarah) : « il faudrait que chaque tentacule démarre de la dernière
   lettre ». Les quatre lignes du schéma (flux.webp) partent à 38 / 106 / 228 / 307 px du haut de
   l'image et à 14 px de son bord gauche ; les textes étaient 13 à 33 px plus bas et finissaient
   54 px avant. Chaque texte est posé à la hauteur de sa ligne, et l'image avance jusqu'à 6 px de la
   fin des textes (alignés à droite, ils finissent tous au même endroit). Repère : cadre de 1 440 ;
   en dessous, la page est mise à l'échelle d'un bloc, les rapports restent justes. */
@media (min-width:1100px){
  .ia-exigences .mentions li{ position:relative; }
  .ia-exigences .mentions li:nth-child(1){ top:-15px; }
  .ia-exigences .mentions li:nth-child(2){ top:-11px; }
  .ia-exigences .mentions li:nth-child(3){ top:1px; }
  .ia-exigences .mentions li:nth-child(4){ top:5px; }
  /* 02/10, « on peut complètement coller ? » : la ligne devient pleine à 20-24 px du bord de
     l'image (son halo commence à 12 px). Image avancée de 12 px de plus : le trait plein touche
     la dernière lettre, le halo passe sous le texte, qui reste au premier plan. */
  .ia-exigences .flux{ margin-left:-56px; position:relative; z-index:0; top:3px; } /* 02/10 : trait descendu de 3 px, au milieu de la hauteur des lettres (mesuré au pixel) */
  .ia-exigences .mentions{ position:relative; z-index:1; }
}

/* 02/10 · UI, feedback 2 n° 32, réponse de Sarah (« ça fait déséquilibré, réduire peut-être un
   peu la largeur du cadre formulaire à droite ») : la carte du formulaire débordait à droite
   de la fenêtre (937 px). Elle s'arrête maintenant au même bord droit que le bloc « Votre
   demande, directement entre de bonnes mains » juste dessous. */
@media (min-width:1100px){
  html body.gabarit-contact .ct-carte{ width:666px; padding-right:44px !important; }
}

/* ============================================================
   06/10 · CortexIA sur téléphone (Sylvain : « pas folle »). Mesures à 390 px :
   visuel du héros qui débordait de 6 px, chapô mauve sur mauve, carte de l'étape 1
   de 300 px pour trois icônes, schéma « flux » écrasé en 350 × 345, atouts en
   escalier, titre des crédits coupé après « = 1 ».
   ============================================================ */
@media (max-width:640px){
  .gabarit-cortexia .ia-heros{ padding-bottom:0; }
  .gabarit-cortexia .ia-heros h1{ font-size:34px; line-height:1.1; }
  .gabarit-cortexia .ia-heros .chapo{ color:#5B2E9E; font-size:17px; line-height:1.4; margin-top:18px; }
  .gabarit-cortexia .ia-heros .actions{ margin-top:24px; gap:12px; }
  .gabarit-cortexia .ia-heros .visuel{ margin:28px 0 0; }
  .gabarit-cortexia .ia-heros .visuel img{ border-radius:12px 12px 0 0; box-shadow:none; }

  .gabarit-cortexia .ia-etapes{ padding:48px 0 40px; }
  .gabarit-cortexia .ia-etapes .h2{ font-size:26px; margin-bottom:28px; }
  .gabarit-cortexia .ia-etapes-grille{ gap:28px; }
  .gabarit-cortexia .ia-etape .carte{ min-height:0 !important; padding:22px 20px; width:auto !important; }
  .gabarit-cortexia .ia-etape:first-child .carte{ padding:26px 20px; }
  .gabarit-cortexia .ia-etape .fichier img{ width:60px; height:60px; }
  .gabarit-cortexia .ia-etape .rang span::after{ height:28px; margin-top:62px; }

  .gabarit-cortexia .ia-exigences{ padding:36px 0 24px !important; }
  .gabarit-cortexia .ia-exigences::before{ display:none; }
  .gabarit-cortexia .ia-exigences h2{ font-size:26px; }
  .gabarit-cortexia .ia-exigences .mentions{ gap:14px; margin-top:20px; }
  .gabarit-cortexia .ia-exigences .mentions li{ margin-left:0 !important; font-size:19px; }
  .gabarit-cortexia .ia-exigences .flux{ margin:24px auto 0 !important; width:100%; top:0 !important; left:0 !important; }
  .gabarit-cortexia .ia-exigences .flux img{ width:100% !important; height:auto !important; }

  .gabarit-cortexia .ia-partage{ padding:40px 0 32px; }
  .gabarit-cortexia .carte-biblio{ padding:18px 16px 20px; }
  .gabarit-cortexia .carte-biblio th, .gabarit-cortexia .carte-biblio td{ font-size:13px !important; line-height:18px !important; padding:10px 4px 10px 0 !important; height:auto !important; hyphens:manual; -webkit-hyphens:manual; }
  .gabarit-cortexia .carte-biblio .etat{ padding:6px 10px; font-size:12.5px; white-space:nowrap; }
  .gabarit-cortexia .carte-biblio .barre{ width:64px; }
  .gabarit-cortexia .ia-partage .texte{ padding-top:24px; }
  .gabarit-cortexia .ia-partage .texte h2{ font-size:26px; line-height:1.2; }
  .gabarit-cortexia .ia-partage .texte p{ width:auto; margin:14px 0 0; font-size:16px; line-height:1.5; }

  .gabarit-cortexia .ia-atouts-bande{ margin-top:0; padding:8px 0 0; }
  .gabarit-cortexia .ia-atouts{ flex-direction:column; align-items:stretch; gap:6px; padding:24px 0 0; }
  .gabarit-cortexia .ia-atouts li{ justify-content:flex-start; gap:12px; width:100%; }
  .gabarit-cortexia .ia-atouts .ico{ width:56px; height:56px; }
  .gabarit-cortexia .ia-atouts .ico img{ width:44px; height:44px; }
  .gabarit-cortexia .ia-atouts b{ font-size:19px; }

  .gabarit-cortexia .ia-credits{ padding:36px 0; }
  .gabarit-cortexia .ia-credits .carte{ padding:26px 20px 28px; text-align:center; }
  .gabarit-cortexia .ia-credits .titre{ font-size:22px !important; line-height:1.25; margin-top:0; }
  .gabarit-cortexia .ia-credits .mention{ margin-top:10px; font-size:16px; }
  .gabarit-cortexia .ia-credits .anneau{ justify-self:center; width:150px; height:150px; margin:0 auto; }
  .gabarit-cortexia .ia-credits .droite{ align-items:center; }
  .gabarit-cortexia .ia-credits .paliers{ justify-content:center; gap:18px; }
  .gabarit-cortexia .ia-credits .btn-plan{ margin:22px 0 0 !important; }
}
@media (max-width:640px){
  .gabarit-cortexia .carte-biblio .entete{ gap:8px; padding-bottom:12px; }
  .gabarit-cortexia .carte-biblio .titre{ font-size:16px; line-height:1.2; }
  .gabarit-cortexia .carte-biblio .btn-mini{ white-space:nowrap; padding:7px 10px; font-size:13px; }
}

/* 07/10 · M14 : « Les plus consultés » replié par défaut sur téléphone (bouton dans le titre). */
.res-aside h2 .res-aside-bascule{ all:unset; cursor:default; display:flex; align-items:center; justify-content:space-between; width:100%; font:inherit; color:inherit; }
.res-aside h2 .chevron{ display:none; width:10px; height:10px; border-right:2px solid #0B172E; border-bottom:2px solid #0B172E; transform:rotate(45deg); transition:transform .2s ease; margin-right:4px; }
@media (max-width:1080px){
  .res-aside h2 .res-aside-bascule{ cursor:pointer; }
  .res-aside h2 .chevron{ display:block; }
  .res-aside[data-replie="1"] .res-aside-liste{ display:none; }
  .res-aside[data-replie="1"] h2{ margin-bottom:0; }
  .res-aside[data-replie="1"] h2 .chevron{ transform:rotate(-45deg); }
}
/* FN-4 : flèches du carrousel Candidats alignées sur le bouton « Voir les hôtels ». */
.cd-autour .cd-groupe[data-carrousel] > .fleches{ bottom:22px; align-items:center; }
.cd-autour .cd-groupe[data-carrousel] > .fleches button{ width:44px; height:44px; }

/* ============================================================
   08/10 · Retour mobile de Sarah, points 11, 12 et 13 (≤ 640 px).
   11 : Contact resserré, formulaire tout de suite après le héros, libellés
        au-dessus des champs, bloc facultatif replié, bouton bleu pleine largeur.
   12 : Ressources, filtres en deux listes déroulantes sous la recherche.
   13 : Ressources en liste (image, type et durée, titre, extrait, lien).
   ============================================================ */
.res-filtres-mobile, .res-carte .lire-res, .ct-lib, .ct-champs-oblig, .ct-plier{ display:none; }
@media (max-width:640px){
  /* 12 · Filtres */
  .gabarit-ressources .res-filtres, .gabarit-ressources .res-barre:has(.res-recherche){ display:none; }
  .res-filtres-mobile{ display:block; padding:6px 0 0; }
  .res-filtres-mobile .boite{ display:flex; flex-direction:column; gap:12px; }
  .res-filtres-mobile .titre{ font-family:'Satoshi',sans-serif; font-weight:700; font-size:18px; color:var(--ink); }
  .res-filtres-mobile .champ-recherche{ position:relative; }
  .res-filtres-mobile .champ-recherche svg{ position:absolute; left:16px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:#667085; pointer-events:none; }
  .res-filtres-mobile input{ width:100%; height:54px; border:1px solid var(--ligne); border-radius:16px; padding:0 16px 0 44px; font:inherit; font-size:16px; color:var(--ink); background:#fff; }
  /* « Toutes les expertises » ne tient pas dans une demi-largeur de 390 px : libellé à gauche, liste à droite. */
  .res-filtres-mobile .duo{ display:flex; flex-direction:column; gap:10px; }
  .res-filtres-mobile .duo > label{ display:grid; grid-template-columns:86px minmax(0,1fr); align-items:center; gap:10px; font-size:14px; font-weight:700; color:#4A5568; }
  .res-filtres-mobile .select{ position:relative; display:block; }
  .res-filtres-mobile select{ width:100%; height:50px; appearance:none; -webkit-appearance:none; border:1px solid var(--ligne); border-radius:16px; padding:0 38px 0 16px; font:inherit; font-family:'Satoshi',sans-serif; font-weight:700; font-size:16px; color:var(--ink); background:#fff; text-overflow:ellipsis; }
  .res-filtres-mobile .select::after{ content:""; position:absolute; right:18px; top:50%; width:9px; height:9px; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); transform:translateY(-70%) rotate(45deg); pointer-events:none; }
  .res-filtres-mobile input:focus, .res-filtres-mobile select:focus{ outline:2px solid #746DFF; border-color:transparent; }
  .gabarit-ressources .res-barre + .res-barre{ padding-top:22px; }
  /* 13 · Liste */
  .gabarit-ressources .res-corps{ padding-top:6px; }
  .gabarit-ressources .res-grille{ display:flex; flex-direction:column; gap:0; }
  .gabarit-ressources .res-carte{ background:none; border-radius:0; box-shadow:none !important; border-bottom:1px solid var(--ligne); padding:22px 0 24px; transform:none !important; min-height:0; overflow:visible; }
  .gabarit-ressources .res-carte:first-child{ padding-top:8px; }
  .gabarit-ressources .res-carte .visuel{ aspect-ratio:16/9; border-radius:14px; }
  .gabarit-ressources .res-carte .corps{ padding:16px 0 0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; align-items:baseline; }
  .gabarit-ressources .res-carte .type{ grid-column:1; grid-row:1; margin:0; font-size:13px; }
  .gabarit-ressources .res-carte .type i{ display:none; }
  .gabarit-ressources .res-carte[data-univers="rose"] .type{ color:#FE2977; }
  .gabarit-ressources .res-carte[data-univers="teal"] .type{ color:#028D9D; }
  .gabarit-ressources .res-carte[data-univers="bleu"] .type{ color:#0161D8; }
  .gabarit-ressources .res-carte .duree{ grid-column:2; grid-row:1; margin:0; padding:0; font-size:14px; }
  .gabarit-ressources .res-carte .duree svg{ display:none; }
  .gabarit-ressources .res-carte h3{ grid-column:1 / -1; font-size:21px; line-height:1.25; margin:2px 0 0; }
  .gabarit-ressources .res-carte .corps > p:not(.type):not(.duree):not(.lire-res){ grid-column:1 / -1; font-size:16px; line-height:1.45; color:#4A5568; margin:0; }
  .gabarit-ressources .res-carte .lire-res{ display:block; grid-column:1 / -1; margin-top:4px; font-family:'Satoshi',sans-serif; font-weight:700; font-size:16px; color:var(--accent); }
  /* 11 · Contact */
  .gabarit-contact .ct-heros{ padding:18px 0 22px; }
  .gabarit-contact .ct-heros h1{ font-size:30px; line-height:1.12; }
  .gabarit-contact .ct-heros .chapo{ margin-top:16px; font-size:16px; font-weight:500; line-height:1.45; color:#4A5568; }
  .gabarit-contact .ct-grille{ gap:28px; padding-bottom:40px; }
  .gabarit-contact .ct-carte{ order:1; padding:22px 18px 26px; }
  .gabarit-contact .ct-cote{ order:2; }
  .gabarit-contact .ct-cote h2{ font-size:28px; }
  .gabarit-contact .ct-cote .intro{ margin-top:14px; font-size:16px; line-height:1.45; }
  .gabarit-contact .ct-promesses{ margin-top:24px; gap:18px; }
  .gabarit-contact .ct-direct{ margin-top:26px; padding-top:22px; }
  .gabarit-contact .ct-titre{ font-size:22px; margin-bottom:14px; }
  .gabarit-contact .ct-form-intro{ display:none; }
  .gabarit-contact .ct-bloc legend{ font-size:20px; margin-bottom:6px; }
  .gabarit-contact .ct-champs-oblig{ display:block; margin:0 0 18px; font-size:14px; color:#667085; }
  .gabarit-contact .ct-lib{ display:block; margin:0 0 8px; font-family:'Satoshi',sans-serif; font-weight:700; font-size:16px; color:var(--ink); }
  .gabarit-contact .ct-lib .ct-fac{ font-family:'Inter',sans-serif; font-weight:400; font-size:14px; color:#667085; }
  .gabarit-contact .ct-bloc > input, .gabarit-contact .ct-bloc > select, .gabarit-contact .ct-duo > input{ margin-bottom:20px; padding:16px 16px; border-radius:14px; font-size:16px; background:#fff; }
  .gabarit-contact .ct-bloc input::placeholder{ color:transparent; }
  .gabarit-contact .ct-duo{ grid-template-columns:1fr 1fr; grid-template-rows:auto auto; grid-auto-flow:column; column-gap:14px; row-gap:0; margin-bottom:20px; }
  .gabarit-contact .ct-duo > input{ margin-bottom:0; }
  .gabarit-contact .ct-pliable{ margin-bottom:26px; }
  .gabarit-contact .ct-pliable legend, .gabarit-contact .ct-pliable .ct-bloc-intro{ display:none; }
  .gabarit-contact .ct-plier{ display:grid; grid-template-columns:1fr auto; column-gap:14px; align-items:center; width:100%; padding:18px 20px; border:1px solid var(--ligne); border-radius:16px; background:#F7F9FC; text-align:left; cursor:pointer; font:inherit; color:var(--ink); }
  .gabarit-contact .ct-plier b{ font-family:'Satoshi',sans-serif; font-weight:700; font-size:18px; }
  .gabarit-contact .ct-plier span{ grid-column:1; font-size:14.5px; color:#667085; margin-top:2px; }
  .gabarit-contact .ct-plier .chevron{ grid-column:2; grid-row:1 / 3; width:10px; height:10px; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); transform:rotate(45deg); transition:transform .2s; }
  .gabarit-contact .ct-pliable.ouvert .ct-plier{ margin-bottom:18px; }
  .gabarit-contact .ct-pliable.ouvert .ct-plier .chevron{ transform:rotate(-135deg); }
  .gabarit-contact .ct-pliable:not(.ouvert) > :not(legend):not(.ct-plier){ display:none; }
  /* Comme sur la maquette : la case de confidentialité avant le bouton. */
  .gabarit-contact .ct-form{ display:flex; flex-direction:column; }
  .gabarit-contact .ct-form .ct-consent{ order:1; }
  .gabarit-contact .ct-form .ct-info-legale{ order:2; }
  .gabarit-contact .ct-form .btn{ order:3; margin-top:22px; }
  .gabarit-contact .ct-form .ct-case-manquante{ order:4; }
  .gabarit-contact .ct-form .btn{ display:flex; justify-content:center; align-items:center; width:100%; height:58px; padding:0 20px; border-radius:999px; background:#325EE2; border-color:#325EE2; color:#fff; font-size:17px; }
  .gabarit-contact .ct-form .btn::after{ content:"\2192"; margin-left:8px; }
  .gabarit-contact .ct-consent{ margin-top:4px; font-size:15px; line-height:1.5; }
  .gabarit-contact .ct-info-legale{ margin-left:0; }
  .gabarit-contact .ct-mains{ padding-bottom:40px; }
}

/* 08/10 · Retour mobile de Sarah n° 30 (CortexIA) : plus de disque bleu au-dessus de l'appel,
   la bulle est posée sur le côté de la carte, à droite du titre. */
@media (max-width:640px){
  html body.gabarit-cortexia .carte-appel{ position:relative; overflow:hidden; text-align:left; padding:28px 22px 26px; }
  html body.gabarit-cortexia .carte-appel .visuel.bulle{ position:absolute; right:-56px; top:-48px; width:230px; height:230px; max-width:none; margin:0; background:none; border-radius:0; aspect-ratio:auto; z-index:0; pointer-events:none; }
  html body.gabarit-cortexia .carte-appel .visuel.bulle img{ width:100%; height:100%; object-fit:contain; display:block; }
  html body.gabarit-cortexia .carte-appel h2{ position:relative; z-index:1; padding-right:96px; font-size:24px; text-align:left; }
  html body.gabarit-cortexia .carte-appel p, html body.gabarit-cortexia .carte-appel .surtitre{ position:relative; z-index:1; text-align:left; }
  html body.gabarit-cortexia .carte-appel .btn{ position:relative; z-index:1; width:100%; display:flex; justify-content:center; }
}

/* ============================================================
   08/10 · Retours mobile de Sarah (réunion du 8 octobre), page Candidats, points 45 à 56.
   ============================================================ */
@media (max-width:640px){
  /* 45 · La photo revient, en bandeau comme sur les pages métiers. */
  html body.gabarit-candidats .cand-heros{ padding-top:0; }
  html body.gabarit-candidats .cand-heros .cand-photo{ display:block; position:relative; inset:auto; width:100%; height:210px; margin:0; }
  html body.gabarit-candidats .cand-heros .cand-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 35%; display:block; }
  html body.gabarit-candidats .cand-heros .cand-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(43,47,60,.25) 0%, rgba(43,47,60,.08) 50%, #fff 100%); }
  html body.gabarit-candidats .cand-heros .boite{ padding-top:8px; }
  html body.gabarit-candidats .cand-heros h1{ font-size:30px; line-height:1.12; }
  html body.gabarit-candidats .cand-heros .chapo{ font-size:16px; line-height:1.45; margin-top:14px; }
  /* 46 · Boutons du héros pleine largeur. */
  html body.gabarit-candidats .cand-heros .actions{ display:flex; flex-direction:column; gap:10px; }
  html body.gabarit-candidats .cand-heros .actions .btn{ width:100%; justify-content:center; height:52px; }
  /* 47 · Encadrés deux par deux. */
  html body.gabarit-candidats .cd-besoin .cd-cartes{ grid-template-columns:1fr 1fr; gap:12px; margin-top:24px; }
  html body.gabarit-candidats .cd-cartes a{ height:156px; border-radius:20px; }
  html body.gabarit-candidats .cd-cartes .picto{ width:118px; height:118px; top:-8px; }
  html body.gabarit-candidats .cd-cartes .picto.petit{ width:104px; height:104px; top:4px; }
  html body.gabarit-candidats .cd-cartes .picto.lit{ width:92px; height:92px; top:10px; left:calc(50% - 26px); }
  html body.gabarit-candidats .cd-cartes .picto.lit + .picto.petit{ width:92px; height:92px; top:10px; left:calc(50% + 26px); }
  html body.gabarit-candidats .cd-cartes span{ top:102px; left:6px; right:6px; width:auto; transform:none; padding:0; font-size:14.5px; line-height:1.2; }
  /* 48 · Tailles de texte alignées sur les autres pages, coches retirées. */
  html body.gabarit-candidats .cd-titre{ font-size:26px; line-height:1.2; }
  html body.gabarit-candidats .cd-intro{ font-size:16px; line-height:1.45; margin-top:14px; }
  html body.gabarit-candidats .cd-moments{ gap:22px; margin-top:28px; }
  html body.gabarit-candidats .cd-moment li{ font-size:16px; line-height:1.4; gap:0; }
  html body.gabarit-candidats .cd-moment li .coche{ display:none; }
  html body.gabarit-candidats .cd-moment ul{ padding-left:0; }
  /* 49 · « Prévoyez une marge… » plus discret. */
  html body.gabarit-candidats .cd-marge{ font-size:14px; font-weight:500; line-height:1.4; color:#4A5568; text-align:center; }
  /* 51 · Plus de ronds lit et fourchette sur les cartes hôtels et restaurants. */
  html body.gabarit-candidats .cd-autour .cd-rond{ display:none; }
  /* 52 · Plan et fiche du centre en pleine largeur, centrés. */
  html body.gabarit-candidats .cd-centre:not([hidden]){ display:flex; flex-direction:column; gap:16px; }
  html body.gabarit-candidats .cd-centre .cd-plan, html body.gabarit-candidats .cd-centre .cd-fiche{ width:100%; }
  html body.gabarit-candidats .cd-fiche{ text-align:center; padding:24px 20px; }
  html body.gabarit-candidats .cd-fiche-action .btn, html body.gabarit-candidats .cd-fiche-action2 .btn{ margin:0 auto; }
  html body.gabarit-candidats .cd-pli summary{ justify-content:center; }
  /* 53 · « Offres proposées par nos partenaires » plus petit, collé au bloc. */
  html body.gabarit-candidats .cd-autour .cand-partenaires{ margin-top:10px !important; font-size:13px; line-height:1.3; color:#667085; }
  /* 55 · Le paragraphe sous la FAQ est retiré sur téléphone. */
  html body.gabarit-candidats .cand-avertissement{ display:none; }
  /* 56 · Le bouton d'itinéraire tient sur une ligne. */
  html body.gabarit-candidats .cd-fiche-action2 .btn{ white-space:nowrap; font-size:13.5px; padding:0 16px; }
}

/* ============================================================
   08/10 · Retours mobile de Sarah (réunion du 8 octobre), Ressources 57-61 et Contact 62-68.
   ============================================================ */
@media (max-width:640px){
  /* 57 · Listes déroulantes : flèche bleue, cadre plus doux. */
  html body[class] .res-filtres-mobile select, html body[class] .res-filtres-mobile input{ border:1.5px solid #DCE2F5; box-shadow:0 2px 8px rgba(50,94,226,.08); }
  html body[class] .res-filtres-mobile .select::after{ width:10px; height:10px; border-width:0 2.5px 2.5px 0; border-color:#325EE2; border-radius:1px; right:17px; }
  html body[class] .res-filtres-mobile .champ-recherche svg{ color:#325EE2; }
  /* 58 · Héros Ressources : l'image du Drive (« 13 - Ressources/01.png ») à la place de la nappe animée. */
  html body.gabarit-ressources .res-vague{ min-height:200px; background:url('../img/pages/vague-ressources-mobile.webp') center / cover no-repeat; }
  html body.gabarit-ressources .res-vague .vague-fixe, html body.gabarit-ressources .res-vague canvas, html body.gabarit-ressources .res-vague video{ display:none; }
  /* 59, 60, 61 · Infolettre : titre seul, champ blanc puis bouton pleine largeur, mentions petites et grises. */
  html body[class] .infolettre .carte{ padding:26px 20px 22px; }
  html body[class] .infolettre h2{ font-size:22px; line-height:1.25; }
  html body[class] .infolettre h2 + p{ display:none; }
  html body[class] .infolettre form{ background:none; box-shadow:none; padding:0; gap:10px; margin-top:16px; }
  html body[class] .infolettre input[type=email]{ height:52px; background:#fff; border:1px solid var(--ligne); border-radius:999px; padding:0 18px; box-shadow:var(--ombre-carte); }
  html body[class] .infolettre form .btn{ width:100%; height:52px; }
  html body[class] .infolettre .mentions{ margin-top:10px; }
  html body[class] .infolettre .mentions label{ font-size:13px; color:#667085; }
  html body[class] .infolettre .mentions p{ margin-top:4px; font-size:13px; line-height:1.4; color:#667085; }
  /* 62, 63 · Contact : la vague (image « ccontact.png » du Drive) reste visible derrière le haut du formulaire. */
  html body.gabarit-contact .ct-heros{ padding:18px 0 150px; background:url('../img/pages/vague-contact-mobile.webp') center bottom -10px / 820px auto no-repeat; }
  html body.gabarit-contact .ct-heros .vague-fond{ display:none; }
  html body.gabarit-contact .ct-grille{ margin-top:-92px; position:relative; z-index:1; }
  html body.gabarit-contact .ct-carte{ background:rgba(255,255,255,.96); }
  /* 65 · Mention légale alignée sur la case, même police, un peu plus petite. */
  html body.gabarit-contact .ct-info-legale{ margin:6px 0 0 29px; font-family:inherit; font-size:13.5px; line-height:1.4; color:#4A5568; }
  /* 66, 67 · Sans « Vous avez un projet ? », les trois promesses centrées, téléphone et e-mail centrés. */
  html body.gabarit-contact .ct-cote h2, html body.gabarit-contact .ct-cote .intro{ display:none; }
  html body.gabarit-contact .ct-promesses{ margin-top:8px; gap:16px; align-items:center; }
  html body.gabarit-contact .ct-promesses li{ justify-content:center; width:100%; max-width:300px; gap:16px; }
  html body.gabarit-contact .ct-promesses b{ text-align:left; min-width:170px; }
  html body.gabarit-contact .ct-direct{ text-align:center; }
  /* 68 · Le bloc des trois logos d'univers disparaît sur téléphone. */
  html body.gabarit-contact .ct-mains{ display:none; }
}

/* 08/10 · Point 30 précisé par Sylvain (image dans le doc) : la grande bulle de la section
   « Une IA conçue pour vos exigences » revient sur téléphone, posée sur le côté droit du titre. */
@media (max-width:640px){
  html body.gabarit-cortexia .ia-exigences{ position:relative; overflow:hidden; }
  html body.gabarit-cortexia .ia-exigences::before{ display:block; content:""; position:absolute; left:auto; right:-120px; top:-30px; width:300px; height:300px; background:url('../img/cortexia/bulle.webp') center/contain no-repeat; z-index:0; opacity:.95; pointer-events:none; }
  html body.gabarit-cortexia .ia-exigences-grille{ position:relative; z-index:1; }
}

/* 09/10 · Point 30 précisé dans le doc de suivi : on retire la seconde bulle (le schéma à branches
   sous la liste) et la bulle du haut passe à droite des quatre lignes, à mi-hauteur. */
@media (max-width:640px){
  html body.gabarit-cortexia .ia-exigences::before{ display:none; }
  html body.gabarit-cortexia .ia-exigences .flux{ display:none; }
  html body.gabarit-cortexia .ia-exigences .mentions{ position:relative; }
  html body.gabarit-cortexia .ia-exigences .mentions::after{ content:""; position:absolute; right:-104px; top:50%; width:210px; height:210px; transform:translateY(-50%); background:url('../img/cortexia/bulle.webp') center/contain no-repeat; z-index:-1; opacity:.95; pointer-events:none; }
}

/* ============================================================
   10/10 · Doc de suivi, annotations en rouge (CortexIA, Candidats, Ressources, Contact).
   ============================================================ */
@media (max-width:640px){
  /* 30 · « Une bulle grosse comme l'image » : la sphère à la taille du bureau, à droite des quatre lignes. */
  html body.gabarit-cortexia .ia-exigences{ overflow:hidden; }
  html body.gabarit-cortexia .ia-exigences .mentions::after{ width:780px; height:520px; right:-365px; opacity:1; }
  /* 45 · Titre à gauche, sur l'image. */
  html body.gabarit-candidats .cand-heros .boite{ position:relative; z-index:1; margin-top:-112px; text-align:left; }
  html body.gabarit-candidats .cand-heros h1, html body.gabarit-candidats .cand-heros .chapo{ text-align:left; }
  /* 52 · Boutons des cartes hôtel et restaurants en pleine largeur. */
  html body.gabarit-candidats .cd-groupes .btn{ width:100%; display:flex; justify-content:center; }
  /* 54 · Moins d'espace entre la FAQ et la checklist. */
  html body.gabarit-candidats .cd-appel{ padding-top:0 !important; }
  html body.gabarit-candidats .sol-faq{ padding-bottom:24px !important; }
  /* 56 · « Tout est prêt pour le jour J ? » sur une seule ligne. */
  html body.gabarit-candidats .cd-appel .carte-appel h2{ white-space:nowrap; font-size:21px; }
  /* 60 · Le champ e-mail de l'infolettre gardait la hauteur de son texte (flex:1 dans un formulaire en colonne). */
  html body[class] .infolettre input[type=email]{ flex:0 0 auto; }
  /* 62 · La vague derrière le formulaire de contact plus visible. */
  html body.gabarit-contact .ct-heros{ padding-bottom:220px; background-size:900px auto; background-position:center bottom 10px; }
}

/* ============================================================
   13/10 · Retours de Sarah du 11/10 (doc de suivi, mobile).
   ============================================================ */
@media (max-width:640px){
  /* 56 · Candidats : même respiration entre « Consulter les questions fréquentes » et
     « De quoi avez-vous besoin ? » qu'entre les cartes et « Le Jour J, pensez à… » (59 px). */
  html body .cand-heros{ padding-bottom:23px; }
  /* 56 · « Anticiper mon trajet » : lignes de bus, RER… centrées (retrait de liste retiré). */
  html body[class] .cd-fiche .cd-pli{ padding-left:0; }
  html body[class] .cd-fiche .cd-pli summary{ padding-left:40px; }
  /* 60 · Infolettre : titre rapproché du champ e-mail, champ moins haut. */
  html body[class] .infolettre .carte{ row-gap:14px; }
  html body[class] .infolettre form{ margin-top:0; }
  html body[class] .infolettre input[type=email]{ height:46px; }
  /* 62 · Contact : vague remontée pour qu'elle se voie au-dessus du formulaire. */
  html body.gabarit-contact .ct-heros{ background-position:center bottom 70px; }
}

/* 13/10 soir (retours de Sarah, ordinateur) */
/* Icônes lit et couverts : l'image était bridée à 97 px de large par un max-width:100% hérité, donc écrasée (97 × 160). */
html body .cd-rond img{ max-width:none !important; width:160px !important; height:160px !important; }
@media (min-width:1100px){
  /* « Prévoyez une marge… » : remontée juste sous le plan (fin du plan à 738 px dans la carte) au lieu de coller au bas de l'encadré. */
  html body.gabarit-candidats .cd-marge{ top:766px; }
}

/* 14/10 : tableaux et bouton d'appel des ressources (guides, études, cas clients de Sarah). */
.art-texte table{ width:100%; border-collapse:collapse; margin:8px 0 26px; font-size:16px; line-height:1.45; color:#0B172E; }
.art-texte th, .art-texte td{ text-align:left; vertical-align:top; padding:12px 14px; border-bottom:1px solid #E4E7EC; }
.art-texte thead th{ background:#F2F4F7; font-weight:700; border-bottom:2px solid #D0D5DD; }
.art-texte tbody tr:nth-child(even) td{ background:#FAFBFC; }
.art-texte td:first-child{ font-weight:600; }
.art-texte p.art-cta{ margin-top:22px; margin-bottom:34px; }
.art-texte p.art-cta a{ display:inline-block; text-decoration:none; }
@media (min-width:1100px){
  .art-texte table{ margin-left:38px; width:calc(100% - 38px); font-size:17px; }
}
@media (max-width:700px){
  .art-texte table{ display:block; overflow-x:auto; font-size:15px; }
  .art-texte th, .art-texte td{ min-width:140px; }
}

/* 15/10 (Sarah) : titres d'articles plus petits ; sommaire plus discret et articles liés plus
   lisibles sur ordinateur ; sur mobile, le sommaire passe au-dessus du texte et les articles
   liés restent en bas. */
.art-entete h1{ font-size:clamp(28px,4.4vw,52px); line-height:1.12; }
@media (min-width:1100px){
  .art-entete h1{ font-size:52px; line-height:1.12; }
  .sommaire{ padding:20px 10px 18px 40px; }
  .sommaire h2{ font-size:18px; line-height:23px; margin-bottom:8px; }
  .sommaire a{ font-size:15px; line-height:20px; padding:7px 0 7px 12px; }
  .lies{ padding:22px 18px 20px 22px; }
  .lies h2{ font-size:18px; line-height:23px; margin-bottom:6px; }
  .lies .item{ grid-template-columns:64px 1fr; gap:12px; padding:10px 0; }
  .lies .item p{ font-size:14.5px; line-height:1.35; }
  .lies .item small{ font-size:12.5px; }
}
@media (max-width:1099px){
  .art-corps .art-aside{ display:contents; }
  .art-corps .sommaire{ order:-1; margin-bottom:8px; }
  .art-corps .lies{ order:1; }
}

/* 15/10 (Sarah) : sous-titres d'articles un peu plus petits sur mobile. */
@media (max-width:1099px){
  .art-texte h2{ font-size:21px; line-height:1.3; margin:30px 0 12px; }
  .art-texte h3{ font-size:18px; line-height:1.35; }
}

/* 15/10 (Sarah) : un clic dans le sommaire amène sur le titre de la partie, pas sous l'en-tête fixe. */
.art-texte h2[id], .art-texte h3[id]{ scroll-margin-top:120px; }
@media (max-width:1099px){ .art-texte h2[id], .art-texte h3[id]{ scroll-margin-top:96px; } }