/* ============ FORMUNIV — complément : routeur et sections calquées sur Formoz ============ */

/* ---- routeur : une seule page visible ---- */
.page{display:none}
.page.on{display:block;animation:entree .4s cubic-bezier(.2,.8,.3,1)}
@keyframes entree{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---- barre supérieure ---- */
.barre-haute{background:var(--nuit-profond);color:var(--texte-nuit);font-size:13.5px}
.barre-haute .wrap{display:flex;align-items:center;gap:26px;height:42px}
.barre-haute a{color:var(--texte-nuit);transition:color .2s;display:flex;align-items:center;gap:8px}
.barre-haute a:hover{color:#fff}
.barre-haute svg{width:16px;height:16px}
.barre-espace{flex:1}
@media(max-width:900px){.barre-haute{display:none}}

/* ---- héros sans encart ---- */
.heros-grille.solo{grid-template-columns:1fr;max-width:900px}

/* ---- accueil : boutons d'ouverture ---- */
.ouverture-btns{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-top:40px}

/* ---- tailles d'entreprise ---- */
.tailles{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.taille{background:var(--nacre);border:1px solid var(--trait);border-radius:var(--r-l);padding:34px 30px;transition:all .3s cubic-bezier(.2,.8,.3,1)}
.taille:hover{border-color:var(--clair);box-shadow:var(--ombre-h);transform:translateY(-4px)}
.taille-nb{display:inline-block;font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.12em;color:var(--clair);background:var(--clair-pale);padding:6px 14px;border-radius:100px;margin-bottom:18px}
.taille h3{font-size:19px;margin-bottom:20px}
.taille ul{list-style:none;display:grid;gap:12px}
.taille li{display:flex;gap:11px;font-size:14.5px;color:var(--texte-doux);line-height:1.55}
.taille li svg{width:17px;height:17px;color:var(--clair);flex:none;margin-top:3px}

/* ---- note sous les chiffres ---- */
.chiffres-note{max-width:760px;margin:52px auto 0;text-align:center;font-size:16.5px;color:var(--texte-nuit)}

/* ---- emplacement à alimenter ---- */
.temoins-vide{background:var(--blanc);border:1.5px dashed #C6D3E9;border-radius:var(--r-l);padding:56px 44px;text-align:center;max-width:820px;margin:0 auto}
.temoins-vide>svg{width:44px;height:44px;color:var(--clair);margin:0 auto 22px;opacity:.7}
.temoins-vide h3{font-size:22px;margin-bottom:14px}
.temoins-vide p{font-size:16px;max-width:600px;margin:0 auto 12px}
.temoins-vide .petite{font-size:13.5px;color:#8494B0;font-family:var(--display);margin-top:20px}

/* ---- étapes en quatre colonnes ---- */
.etapes.quatre{grid-template-columns:repeat(4,1fr)}
.section-blanc .etape{border-top-color:var(--trait)}
.section-blanc .etape::before{background:var(--blanc);color:var(--clair)}
.section-nacre .etape{border-top-color:var(--trait)}
.section-nacre .etape::before{background:var(--nacre)}

/* ---- piliers (onglets sur fond sombre) ---- */
.onglets.piliers{background:rgba(255,255,255,.05);border-color:rgba(169,188,220,.2);box-shadow:none}
.onglets.piliers .onglet{color:var(--texte-nuit);flex-direction:row}
.onglets.piliers .onglet:hover{color:#fff}
.onglets.piliers .onglet.actif{background:var(--clair);color:#08142B}
.liste-piliers{list-style:none;display:grid;gap:16px;max-width:820px}
.liste-piliers li{display:flex;gap:14px;font-size:16.5px;color:#DDE7F7;line-height:1.55}
.liste-piliers li svg{width:19px;height:19px;color:var(--clair);flex:none;margin-top:4px}

/* ---- couverture géographique ---- */
.villes{display:flex;flex-wrap:wrap;gap:10px}
.ville{font-family:var(--display);font-size:14.5px;font-weight:500;color:var(--texte);background:var(--blanc);border:1px solid var(--trait);padding:9px 17px;border-radius:100px;transition:all .22s}
.ville:hover{border-color:var(--clair);color:var(--nuit);transform:translateY(-2px)}
.villes-note{margin-top:24px;font-size:15px;font-family:var(--display);color:var(--texte-doux)}

/* ---- catalogue en deux colonnes ---- */
.catalogue.deux{grid-template-columns:repeat(2,1fr)}

/* ---- FAQ et lexique ---- */
.faq-liste{max-width:900px}
.faq-liste .jour-tete{padding:22px 26px}
.faq-liste .jour-titre{font-size:17px}
.jour-corps-in.faq{padding:0 26px 26px}
.jour-corps-in.faq p{font-size:16px;line-height:1.65;margin:0}

/* ---- guide : fil sans onglets ---- */
.programme.guide{max-width:900px}

/* ---- financement ---- */
.finance-grille{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.finance{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r-l);padding:34px;transition:all .3s}
.finance:hover{border-color:var(--clair);box-shadow:var(--ombre-h);transform:translateY(-4px)}
.finance-ico{width:46px;height:46px;border-radius:13px;background:var(--clair-pale);display:grid;place-items:center;color:var(--nuit);margin-bottom:20px}
.finance-ico svg{width:22px;height:22px}
.finance h3{font-size:20px;margin-bottom:10px}
.finance-qui{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--clair);margin-bottom:16px}
.finance p{font-size:15px}
.finance-ref{margin-top:18px;padding-top:14px;border-top:1px solid var(--trait);font-family:var(--display);font-size:13px;color:var(--texte-doux)}

/* ---- boutons et divers ---- */
.centre-btn{text-align:center;margin-top:44px}
.encart-btn{margin-top:24px}
.encart-btn .btn{width:100%}
.btn.pleine{width:100%}
.sans-marge{margin-bottom:0!important}
.form-titre{font-size:26px;margin-bottom:8px}
.form-sous{margin-bottom:28px}

@media(max-width:1080px){
  .tailles,.finance-grille,.catalogue.deux{grid-template-columns:1fr}
  .etapes.quatre{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .etapes.quatre{grid-template-columns:1fr}
  .temoins-vide{padding:38px 24px}
  .faq-liste .jour-tete{padding:19px 20px}
  .jour-corps-in.faq{padding:0 20px 22px}
  .onglets.piliers .onglet{padding:11px 18px}
}

/* ancres internes : compenser l'en-tête collant */
.page section[id],.page div[id]{scroll-margin-top:104px}

/* ==========================================================================
   ÉCRAN 1 — photo pleine largeur, texte à gauche, carte retournable à droite
   ========================================================================== */
.ecran1{
  position:relative;min-height:min(880px,calc(100vh - 82px));
  display:flex;align-items:flex-start;overflow:hidden;
  background:var(--nuit-profond);padding:38px 0 96px;
}
.ecran1-photo{
  position:absolute;inset:0;background-size:cover;background-position:64% 46%;
  filter:saturate(.88) contrast(1.01) brightness(1.06);
  transform:scale(1.06);animation:derive 26s ease-in-out infinite alternate;
}
@keyframes derive{from{transform:scale(1.06) translateX(0)}to{transform:scale(1.12) translateX(-18px)}}
.ecran1-voile{
  position:absolute;inset:0;
  background:
    linear-gradient(97deg,rgba(11,23,48,.9) 0%,rgba(11,23,48,.74) 26%,rgba(11,23,48,.4) 46%,rgba(11,23,48,.12) 66%,rgba(11,23,48,.06) 100%),
    linear-gradient(180deg,rgba(11,23,48,.28) 0%,transparent 26%,transparent 74%,rgba(11,23,48,.32) 100%);
}
.ecran1-grille{opacity:.55;
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(106,153,233,.075) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(106,153,233,.075) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(100deg,#000 0%,transparent 58%);
  -webkit-mask-image:linear-gradient(100deg,#000 0%,transparent 58%);
}
.ecran1-in{
  position:relative;z-index:2;width:100%;
  display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:start;
}

/* --- colonne texte --- */
.surtitre{
  display:flex;align-items:center;gap:13px;
  font-family:var(--display);font-size:12px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--clair);margin:0 0 26px;
}
.surtitre::before{content:"";width:34px;height:1.5px;background:var(--clair);flex:none}
.ecran1 h1{
  font-family:var(--display);color:#fff;font-weight:700;
  font-size:clamp(31px,4.4vw,60px);line-height:1.02;letter-spacing:-.042em;margin:0;
  text-shadow:0 2px 30px rgba(6,14,32,.5);
}
.ecran1 h1 span{display:block}
.ecran1 h1 .mot .f{color:#fff}
.ecran1 h1 .mot .u{color:var(--clair)}
.ecran1 h1 .mot,.ecran1 h1 .mot span{display:inline}
.ecran1-accroche{
  font-family:var(--display);font-weight:500;
  font-size:clamp(19px,2.3vw,29px);line-height:1.25;letter-spacing:-.02em;
  color:#D8E4F7;margin:28px 0 0;max-width:20ch;
}
.ecran1-accroche b{color:var(--clair);font-weight:700}
.ecran1-sous{
  color:#D3E0F3;font-size:17px;line-height:1.6;max-width:520px;margin:24px 0 0;
  text-shadow:0 1px 16px rgba(6,14,32,.55);
}
.ecran1-sous + .ecran1-sous{margin-top:10px}
.ecran1-signature{
  font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.02em;
  color:var(--clair);margin:20px 0 0;text-shadow:0 1px 16px rgba(6,14,32,.55);
}
.ecran1-btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}
.ecran1-btns .btn{padding:16px 30px;font-size:15.5px}

/* --- carte retournable --- */
.carte3d{
  perspective:1600px;justify-self:end;width:min(440px,100%);
  transform:rotate(3deg);transition:transform .5s cubic-bezier(.2,.8,.3,1);
}
.carte3d:hover{transform:rotate(1deg)}
.carte3d-in{
  position:relative;aspect-ratio:85/55;transform-style:preserve-3d;
  transition:transform .85s cubic-bezier(.2,.85,.3,1);
}
.carte3d.retournee .carte3d-in{transform:rotateY(180deg)}
.face{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:22px;padding:26px;display:grid;place-items:center;overflow:hidden;
  background:
    linear-gradient(rgba(106,153,233,.085) 1px,transparent 1px) 0 0/38px 38px,
    linear-gradient(90deg,rgba(106,153,233,.085) 1px,transparent 1px) 0 0/38px 38px,
    linear-gradient(158deg,rgba(26,45,84,.95),rgba(10,21,45,.94));
  border:1px solid rgba(106,153,233,.34);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 34px 90px rgba(4,10,24,.62),inset 0 1px 0 rgba(255,255,255,.08);
}
.face::before{
  content:"";position:absolute;top:0;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(160,199,255,.7),transparent);
}
.face.verso{transform:rotateY(180deg)}
.face-tete{display:flex;align-items:center;gap:12px;margin-bottom:auto}
.face-tete .logo-mot{font-size:20px}
.face-tete .logo-mot .f{color:#fff}
.face-devise{
  font-family:var(--display);font-weight:700;color:#fff;
  font-size:27px;line-height:1.12;letter-spacing:-.03em;margin:26px 0 0;
}
.face-devise span{color:var(--clair)}
.face-sep{height:1px;background:rgba(169,188,220,.22);margin:24px 0 20px}
.face-liste{list-style:none;display:grid;gap:13px}
.face-liste li{display:flex;gap:12px;font-size:14.5px;color:#D2E0F5;line-height:1.45}
.face-liste li svg{width:17px;height:17px;color:var(--clair);flex:none;margin-top:2px}
.face-bas{
  margin-top:auto;padding-top:22px;font-family:var(--display);font-size:12px;
  font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:#8FA6CC;
}
.face-titre{
  font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--clair);margin:26px 0 16px;
}
.face-forma{
  display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid rgba(169,188,220,.16);
}
.face-forma:last-of-type{border-bottom:0}
.face-forma span{font-size:14.5px;color:#D2E0F5}
.face-forma b{font-family:var(--display);font-size:12.5px;font-weight:600;color:var(--clair);flex:none}
.face-prix{margin-top:22px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.face-prix .apd{font-size:13px;color:#8FA6CC}
.face-prix .nb{font-family:var(--display);font-size:38px;font-weight:700;color:#fff;letter-spacing:-.04em;line-height:1}
.face-prix .u{font-size:13px;color:#8FA6CC}
.face .btn{margin-top:20px;width:100%}
.carte-flip{
  position:absolute;top:16px;right:16px;z-index:4;
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:rgba(106,153,233,.16);border:1px solid rgba(106,153,233,.4);color:#DDE7F7;
  transition:all .25s;
}
.carte-flip:hover{background:var(--clair);color:#08142B;transform:rotate(180deg)}
.carte-flip svg{width:17px;height:17px}
.carte-astuce{
  text-align:center;margin-top:16px;font-family:var(--display);font-size:12px;
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#8FA6CC;
}

@media(max-width:1080px){
  .ecran1-in{grid-template-columns:1fr;gap:48px}
  .carte3d{justify-self:start;width:min(410px,100%)}
  .ecran1-voile{background:
    linear-gradient(180deg,rgba(11,23,48,.88) 0%,rgba(11,23,48,.93) 55%,rgba(11,23,48,.97) 100%),
    radial-gradient(ellipse 70% 50% at 70% 20%,rgba(106,153,233,.28),transparent 70%)}
  .ecran1-grille{mask-image:none;-webkit-mask-image:none;opacity:.5}
}
@media(max-width:680px){
  .ecran1{min-height:auto;padding:56px 0 64px}
  .carte3d-in{height:500px}
  .face{padding:30px 26px}
  .ecran1-btns .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .ecran1-photo{animation:none;transform:scale(1.06)}
}

/* --- carte de visite : le logo seul, centré --- */
/* le chapeau seul, centré */
.face-chapeau{width:clamp(104px,30%,152px);height:auto;overflow:visible;
  filter:drop-shadow(0 6px 22px rgba(0,0,0,.35))}
@media(max-width:680px){
  .carte3d-in{aspect-ratio:85/55;height:auto}
  .face{padding:22px;border-radius:18px}
}

/* carte alignée sur le haut de la typographie */
.carte3d{margin-top:6px}
@media(max-width:1080px){.carte3d{transform:rotate(2deg);margin-top:0}}

.carte3d{width:min(460px,100%)}

/* ==========================================================================
   CATALOGUE DE L'ACCUEIL — ligne des obligatoires + carrousel des spécifiques
   ========================================================================== */
.famille-tete{margin-top:8px}
.trio{display:grid;grid-template-columns:1.24fr 1fr 1fr;gap:20px;align-items:stretch}

/* --- la carte phare --- */
.forma.phare{
  position:relative;overflow:hidden;
  background:linear-gradient(158deg,#1B3054 0%,var(--nuit-profond) 100%);
  border-color:rgba(106,153,233,.32);padding:34px;
}
.forma.phare::before{   /* trame discrète */
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(106,153,233,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(106,153,233,.07) 1px,transparent 1px);
  background-size:40px 40px;pointer-events:none;
}
.forma.phare::after{    /* balayage lumineux, lent et discret */
  content:"";position:absolute;top:-60%;left:-70%;width:55%;height:220%;
  background:linear-gradient(100deg,transparent,rgba(180,213,255,.13),transparent);
  transform:rotate(14deg);pointer-events:none;
  animation:balayage 8.5s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes balayage{0%,62%{left:-70%}100%{left:150%}}
.forma.phare>*{position:relative;z-index:2}
.forma.phare h3{color:#fff;font-size:25px;margin-top:4px}
.forma.phare p{color:#BCCDE6;font-size:15.5px}
.forma.phare .forma-bas{border-top-color:rgba(169,188,220,.22)}
.forma.phare .forma-duree{background:rgba(106,153,233,.18);color:#DDE7F7}
.forma.phare .forma-lien{color:var(--clair)}
.forma.phare:hover{border-color:var(--clair);box-shadow:0 26px 60px rgba(11,23,48,.4)}
.phare-tag{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:#08142B;background:var(--clair);
  padding:6px 13px;border-radius:100px;
}
.phare-tag::before{
  content:"";width:6px;height:6px;border-radius:50%;background:#08142B;
  animation:pulsation 2.6s ease-in-out infinite;
}
@keyframes pulsation{0%,100%{opacity:1}50%{opacity:.25}}

/* --- carrousel --- */
.carr-tete{display:flex;align-items:center;justify-content:space-between;gap:20px}
.carr-nav{display:flex;gap:9px}
.carr-b{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--blanc);border:1px solid var(--trait);color:var(--nuit);
  transition:all .22s;
}
.carr-b:hover{border-color:var(--clair);color:var(--clair);transform:translateY(-2px)}
.carr-b[disabled]{opacity:.35;cursor:default;transform:none;border-color:var(--trait);color:var(--texte-doux)}
.carr-b svg{width:18px;height:18px}
.carrousel{overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;margin:0 -6px;padding:6px}
.carrousel::-webkit-scrollbar{display:none}
.carr-piste{display:flex;gap:20px;scroll-snap-type:x mandatory}
.carr-item{
  flex:0 0 calc((100% - 40px)/3);scroll-snap-align:start;
  background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r);
  padding:26px;display:flex;flex-direction:column;gap:13px;
  transition:all .3s cubic-bezier(.2,.8,.3,1);
}
.carr-item:hover{border-color:var(--clair);box-shadow:var(--ombre-h);transform:translateY(-4px)}

@media(max-width:1080px){
  .trio{grid-template-columns:1fr}
  .forma.phare{padding:30px}
  .carr-item{flex:0 0 calc((100% - 20px)/2)}
}
@media(max-width:680px){
  .carr-item{flex:0 0 88%}
  .carr-tete{flex-direction:column;align-items:flex-start;gap:14px}
}
@media(prefers-reduced-motion:reduce){
  .forma.phare::after,.phare-tag::before{animation:none}
  .forma.phare::after{display:none}
}

/* --- titres de famille centrés et espacement entre les deux catégories --- */
.famille-tete.centree{justify-content:center;text-align:center;display:block;margin-bottom:34px}
.famille-tete.centree h2{font-size:clamp(23px,2.6vw,30px)}
.famille-tete.ecart{margin-top:112px}

/* --- flèches de part et d'autre des cartes --- */
.carr-zone{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center}
.carr-zone .carrousel{margin:0;padding:6px 0}
.carr-zone .carr-b{flex:none}
@media(max-width:1080px){
  .carr-zone{gap:12px}
  .famille-tete.ecart{margin-top:80px}
}
@media(max-width:680px){
  .carr-zone{grid-template-columns:auto minmax(0,1fr) auto;gap:8px}
  .carr-b{width:38px;height:38px}
  .carr-b svg{width:16px;height:16px}
}

/* ==========================================================================
   CARTE — d'après la version v3 : presque carrée, basculement à la souris
   ========================================================================== */
.carte3d{
  perspective:1300px;justify-self:end;width:min(470px,100%);
  transform:none;margin-top:4px;
}
.carte3d:hover{transform:none}
.carte3d-in{aspect-ratio:6/5;transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.face{
  border-radius:38px;padding:0;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(152deg,#2A4472 0%,#1D3358 34%,#132342 66%,#0E1A32 100%);
  border:1px solid rgba(255,255,255,.09);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 40px 90px rgba(6,14,32,.5),0 4px 16px rgba(6,14,32,.3),
             inset 0 1px 0 rgba(255,255,255,.12);
}
.face::before{          /* trame visible seulement au centre */
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(150,190,255,.13) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(150,190,255,.13) 1px,transparent 1px);
  background-size:62px 62px;background-position:center;
  mask-image:radial-gradient(ellipse 42% 46% at 50% 47%,#000 0%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 42% 46% at 50% 47%,#000 0%,transparent 72%);
  top:0;left:0;right:0;height:100%;
}
.face-chapeau{
  width:clamp(96px,23%,124px);height:auto;overflow:visible;position:relative;z-index:2;
  filter:drop-shadow(0 0 26px rgba(120,170,245,.34)) drop-shadow(0 6px 14px rgba(0,0,0,.32));
}
@media(max-width:1080px){
  .carte3d{justify-self:start;transform:none;margin-top:0}
}
@media(max-width:680px){
  .carte3d-in{aspect-ratio:6/5;height:auto}
  .face{border-radius:30px;padding:0}
}

/* --- ajustements d'après la version de référence --- */
.carte3d-in{aspect-ratio:23/20}
.face{border-radius:26px}
.face-chapeau{width:clamp(108px,26%,142px)}
@media(max-width:680px){.face{border-radius:22px}}

.face-chapeau{width:clamp(124px,30%,164px);margin-top:-2%}

/* ==========================================================================
   CARTE v3 — bleu vif, éclairée par la souris
   ========================================================================== */
.carte3d-in{aspect-ratio:23/20}
.face{
  border-radius:32px;padding:0;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(148deg,#2E72E8 0%,#2263DA 42%,#164FBE 100%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 70px rgba(16,52,124,.42),0 6px 18px rgba(10,30,74,.3),
             inset 0 1px 0 rgba(255,255,255,.22);
}
.face::before{   /* halo lumineux qui suit la souris */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle 58% at var(--mx,50%) var(--my,38%),
             rgba(255,255,255,.3) 0%,rgba(255,255,255,.09) 34%,transparent 68%);
  mask-image:none;-webkit-mask-image:none;
  transition:background .18s linear;
}
.face-chapeau{
  width:clamp(96px,25%,132px);margin-top:0;position:relative;z-index:2;
  filter:drop-shadow(0 4px 16px rgba(8,26,68,.42));
}
@media(max-width:680px){.face{border-radius:26px}}

/* ==========================================================================
   CARTE — état au repos : bleu nuit + trame ; sous le curseur : bleu vif + lueur
   ========================================================================== */
.face{
  border-radius:28px;
  background:linear-gradient(150deg,#1E3054 0%,#17283F 40%,#101D36 72%,#0C1730 100%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 34px 76px rgba(8,18,42,.5),0 6px 18px rgba(8,18,42,.32),
             inset 0 1px 0 rgba(255,255,255,.13);
  transition:background .45s ease,box-shadow .45s ease,border-color .45s ease;
}
.face::before{                 /* trame discrète, centrée */
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(150,190,255,.14) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(150,190,255,.14) 1px,transparent 1px);
  background-size:62px 62px;background-position:center;
  mask-image:radial-gradient(ellipse 46% 50% at 50% 46%,#000 0%,transparent 74%);
  -webkit-mask-image:radial-gradient(ellipse 46% 50% at 50% 46%,#000 0%,transparent 74%);
  transition:opacity .45s ease;
}
.face::after{                  /* lueur blanche qui suit la souris */
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(circle 42% at var(--mx,50%) var(--my,40%),
             rgba(255,255,255,.15) 0%,rgba(255,255,255,.06) 34%,transparent 68%);
  opacity:0;transition:opacity .4s ease;
}
.carte3d:hover .face::after{opacity:1}
.face-chapeau{width:clamp(96px,25%,132px);position:relative;z-index:2}
@media(max-width:680px){.face{border-radius:24px}}

/* la case du chapeau s'éclaircit avec le fond */
.face-chapeau .cq{transition:stroke .45s ease}
.carte3d:hover .face-chapeau .cq{stroke:#6A99E9}

/* --- menu Formations CSE : liste simple --- */
.menu{min-width:342px;padding:12px}
.menu-lien{padding:11px 15px;font-size:15.5px}
.menu-lien.tout{font-weight:600;color:var(--nuit);gap:10px;white-space:nowrap}
.menu-lien.tout svg{width:15px;height:15px;color:var(--clair);transition:transform .25s}
.menu-lien.tout:hover svg{transform:translateX(4px)}

/* les trois points avant le séparateur */
.menu-points{
  padding:4px 0 8px;text-align:center;font-family:var(--display);font-size:19px;
  font-weight:600;letter-spacing:.22em;text-indent:.22em;color:var(--texte-doux);
  line-height:1;user-select:none;
}

/* --- écran 3 : en-tête avec bouton, cartes réduites --- */
.tailles-tete{
  display:flex;align-items:flex-end;justify-content:space-between;gap:44px;
  margin-bottom:52px;flex-wrap:wrap;
}
.tailles-tete>div{max-width:720px}
.tailles-tete p{font-size:17.5px;margin-top:18px}
.tailles-tete .btn{flex:none}
.taille{
  display:flex;flex-direction:column;align-items:flex-start;gap:0;
  padding:38px 32px;
}
.taille h3{margin-bottom:0;font-size:22px}
.taille .taille-nb{margin-bottom:20px}
@media(max-width:680px){
  .tailles-tete{gap:26px}
  .tailles-tete .btn{width:100%}
}

/* --- écran 3 : listes dans les cartes --- */
.nw{white-space:nowrap}
.taille ul{list-style:none;display:grid;gap:11px;margin-top:22px}
.taille li{display:flex;gap:11px;font-size:14.5px;color:var(--texte-doux);line-height:1.5}
.taille li svg{width:16px;height:16px;color:var(--clair);flex:none;margin-top:3px}
.taille ul.ajout li svg{stroke-width:2.6}

/* --- services complémentaires sur fond bleu nuit --- */
.services-duo{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.service-carte{
  background:rgba(255,255,255,.04);border:1px solid rgba(169,188,220,.16);
  border-radius:var(--r-l);padding:34px 30px;display:flex;flex-direction:column;gap:13px;
  transition:all .32s cubic-bezier(.2,.8,.3,1);
}
.service-carte:hover{background:rgba(106,153,233,.09);border-color:rgba(106,153,233,.38);transform:translateY(-5px)}
.service-carte h3{color:#fff;font-size:21px}
.service-carte p{color:var(--texte-nuit);font-size:15px;flex:1;line-height:1.6}
.service-carte .forma-lien{color:var(--clair);font-family:var(--display);font-weight:600;font-size:14.5px;display:flex;align-items:center;gap:8px}
.service-carte .forma-lien svg{width:15px;height:15px;transition:transform .25s}
.service-carte:hover .forma-lien svg{transform:translateX(4px)}

/* --- écran 2 : flèches du carrousel en bleu nuit --- */
.carr-b{background:var(--nuit);border-color:var(--nuit);color:#fff}
.carr-b:hover{background:var(--nuit-profond);border-color:var(--nuit-profond);color:var(--clair)}
.carr-b[disabled]{background:var(--nuit);border-color:var(--nuit);color:#fff;opacity:.28}

@media(max-width:900px){.services-duo{grid-template-columns:1fr}}

/* le gras reste lisible sur fond sombre */
.section-nuit strong,.atout strong,.service-carte strong,.carte-loi strong{color:#fff;font-weight:600}

/* bouton blanc sur fond sombre */
.btn-blanc{background:#fff;color:var(--nuit);box-shadow:0 8px 24px rgba(6,14,32,.34)}
.btn-blanc:hover{background:#fff;transform:translateY(-2px);box-shadow:0 14px 34px rgba(6,14,32,.44)}
.btn-blanc svg{color:var(--clair)}
.section-nuit .tailles-tete h2{color:#fff}

/* services : logo et titre sur la même ligne */
.service-tete{display:flex;align-items:center;gap:16px}
.service-tete .atout-ico{margin-bottom:0;flex:none}
.service-tete h3{margin:0}
@media(max-width:680px){.service-tete{gap:13px}.service-tete h3{font-size:18px}}

/* deux paragraphes dans les cartes de service */
.service-carte p{flex:none}
.service-carte p + p{margin-top:12px}
.service-carte p:last-of-type{flex:1}

/* le poing est un aplat, pas un trait */
#i-poing path{fill:currentColor;stroke:currentColor;stroke-width:.62;stroke-linejoin:round}

/* pied : titres sur une ligne, trois points cliquables */
.pied h4{white-space:nowrap;font-size:10.5px;letter-spacing:.09em}
.pied-points{
  display:block;margin-top:16px;text-align:center;font-family:var(--display);
  font-size:19px;font-weight:600;letter-spacing:.22em;text-indent:.22em;
  color:var(--texte-nuit);transition:color .2s;
}
.pied-points:hover{color:#fff}
@media(max-width:680px){.pied-points{text-align:left;text-indent:0}}

/* pied : bouton centré sous les deux listes de formations */
.pied-cta{grid-column:2 / 4;grid-row:2;justify-self:center;margin-top:4px}
.btn-pied{
  background:var(--nuit);color:#fff;border:1px solid rgba(106,153,233,.34);
  box-shadow:0 8px 24px rgba(6,14,32,.35);
}
.btn-pied:hover{background:#1B3054;border-color:var(--clair);transform:translateY(-2px)}
.btn-pied svg{color:var(--clair)}
@media(max-width:1080px){.pied-cta{grid-column:auto;grid-row:auto;justify-self:start;margin-top:8px}}

.pied-haut{row-gap:8px;align-items:start}
.pied-cta{margin-top:-6px}

/* introduction discrète sous le titre d'une page légale */
.heros-intro{
  color:#A9BCDC;font-size:14.5px;line-height:1.65;max-width:620px;margin:26px 0 0;
}

/* ==========================================================================
   CARTES DE FORMATION AVEC VISUEL
   ========================================================================== */
.fcard{
  background:var(--blanc);border:1px solid var(--trait);border-radius:18px;
  overflow:hidden;display:flex;flex-direction:column;position:relative;
  transition:border-color .3s,box-shadow .3s,transform .3s cubic-bezier(.2,.8,.3,1);
}
.fcard:hover{border-color:var(--clair);box-shadow:var(--ombre-h);transform:translateY(-5px)}
.fcard-img{aspect-ratio:16/10;overflow:hidden;background:var(--nuit);flex:none}
.fcard-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.8,.3,1)}
.fcard:hover .fcard-img img{transform:scale(1.06)}
.fcard-corps{padding:24px;display:flex;flex-direction:column;gap:11px;flex:1}
.fcard-corps h3{font-size:19px;letter-spacing:-.02em}
.fcard-corps p{font-size:14.5px;line-height:1.55;flex:1}
.fcard-bas{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:15px;margin-top:2px;border-top:1px solid var(--trait)}
.fcard-bas .forma-lien{font-family:var(--display);font-size:14px;font-weight:600;
  color:var(--clair);display:flex;align-items:center;gap:7px}
.fcard-bas .forma-lien svg{width:14px;height:14px;transition:transform .25s}
.fcard:hover .fcard-bas .forma-lien svg{transform:translateX(4px)}
.fcard.grand .fcard-corps{padding:28px}
.fcard.grand .fcard-corps h3{font-size:21px}

/* --- carte phare : visuel plein cadre --- */
/* --- carte « obligatoire » : photo peu recadrée, texte sur fond sombre --- */
.fcard.phare{
  border-color:rgba(106,153,233,.28);
  background:linear-gradient(170deg,#1C3157 0%,#12213C 55%,var(--nuit-profond) 100%);
  display:flex;flex-direction:column;
}
.fcard.phare:hover{border-color:var(--clair);box-shadow:0 22px 56px rgba(10,22,48,.38)}
.phare-img{
  position:relative;aspect-ratio:16/9;flex:0 0 auto;overflow:hidden;
  border-radius:17px 17px 0 0;
}
.phare-img .ph{position:absolute;inset:0;width:100%;height:100%}
.phare-fondu{            /* fond l'image dans le bleu nuit de la carte */
  position:absolute;left:0;right:0;bottom:-1px;height:34%;pointer-events:none;
  background:linear-gradient(180deg,rgba(21,38,70,0) 0%,rgba(20,35,64,.55) 55%,#15263F 100%);
}
.phare-corps{
  position:relative;z-index:2;padding:22px 24px 24px;
  display:flex;flex-direction:column;gap:11px;flex:1;
}
.phare-corps h3{color:#fff;font-size:21px;letter-spacing:-.022em}
.phare-corps p{color:#BDCDE6;font-size:14.5px;line-height:1.55;flex:1}
.phare-corps .fcard-bas{border-top-color:rgba(169,188,220,.2)}
.phare-corps .forma-duree{background:rgba(106,153,233,.2);color:#DDE7F7}
.phare-tag{
  position:absolute;top:14px;left:14px;z-index:3;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--display);font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#08142B;background:var(--clair);
  padding:6px 12px;border-radius:100px;box-shadow:0 4px 14px rgba(8,18,40,.3);
}
.phare-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:#08142B;
  animation:pulsation 2.6s ease-in-out infinite}
@keyframes pulsation{0%,100%{opacity:1}50%{opacity:.25}}

/* --- grilles --- */
.trio{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:20px;align-items:stretch}
.grille-obl{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grille-spe{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.famille-sous{font-size:16px;margin-top:12px}
.carr-item{flex:0 0 calc((100% - 44px)/3);scroll-snap-align:start}

@media(max-width:1080px){
  .trio,.grille-obl,.grille-spe{grid-template-columns:repeat(2,1fr)}
  .carr-item{flex:0 0 calc((100% - 22px)/2)}
}
@media(max-width:680px){
  .trio,.grille-obl,.grille-spe{grid-template-columns:1fr}
  .carr-item{flex:0 0 86%}
  .phare-corps{padding:20px}
}
@media(prefers-reduced-motion:reduce){
  .phare-tag::before{animation:none}
  .ph{transition:none}
}

/* hauteurs déterministes des visuels */
.fcard-img{height:196px;min-height:196px;flex:0 0 196px;overflow:hidden}
.fcard.grand .fcard-img{height:216px;min-height:216px;flex:0 0 216px}
.fcard-corps{flex:1 1 auto;min-height:0}
.fcard .ph{position:static}
.fcard.phare .phare-img{position:relative;inset:auto;flex:0 0 auto;overflow:hidden}
.fcard.phare .phare-img .ph{position:absolute;inset:0;height:100%}

.ph{display:block;width:100%;height:100%;background-size:cover;background-position:center;
  transition:transform .7s cubic-bezier(.2,.8,.3,1)}
.fcard:hover .fcard-img .ph{transform:scale(1.06)}
.fcard.phare:hover .phare-img .ph{transform:scale(1.05)}

/* les trois obligatoires partagent le rendu plein cadre */
.trio{grid-template-columns:repeat(3,1fr)}
.grille-obl .fcard.phare,.trio .fcard.phare{min-height:400px}
.phare-corps .fcard-bas{margin-top:4px}
@media(max-width:1080px){
  .trio,.grille-obl{grid-template-columns:repeat(2,1fr)}
  .trio .fcard.phare,.grille-obl .fcard.phare{grid-column:auto;min-height:360px}
}
@media(max-width:680px){
  .trio,.grille-obl{grid-template-columns:1fr}
}

/* ==========================================================================
   BANDEAU DES PAGES DE FORMATION — photo en fond
   ========================================================================== */
.heros-photo{position:relative;background:var(--nuit-profond);overflow:hidden}
.heros-fond{position:absolute;inset:0;z-index:0;overflow:hidden}
.heros-fond .ph{
  position:absolute;inset:0;width:100%;height:100%;
  background-size:cover;background-position:center 32%;
  filter:saturate(.9) contrast(1.02);
  transform:scale(1.04);animation:derive 30s ease-in-out infinite alternate;
}
.heros-voile{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(96deg,rgba(9,18,40,.97) 0%,rgba(9,18,40,.94) 38%,rgba(9,18,40,.74) 60%,rgba(9,18,40,.46) 100%),
    linear-gradient(180deg,rgba(9,18,40,.42) 0%,transparent 26%,transparent 62%,rgba(9,18,40,.6) 100%);
}
.heros-trame{
  position:absolute;inset:0;z-index:1;opacity:.5;
  background-image:linear-gradient(rgba(106,153,233,.08) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(106,153,233,.08) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(100deg,#000 0%,transparent 62%);
  -webkit-mask-image:linear-gradient(100deg,#000 0%,transparent 62%);
}
.heros-photo .wrap{position:relative;z-index:2}
.heros-photo h1,.heros-photo .heros-chapo{text-shadow:0 2px 24px rgba(6,14,32,.6)}
.heros-photo .carte-loi{
  background:linear-gradient(160deg,rgba(20,36,68,.86),rgba(11,23,48,.82));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-color:rgba(106,153,233,.36);
  box-shadow:0 26px 64px rgba(5,12,28,.42);
}
@media(max-width:1080px){
  .heros-voile{background:
    linear-gradient(180deg,rgba(9,18,40,.9) 0%,rgba(9,18,40,.93) 50%,rgba(9,18,40,.97) 100%)}
  .heros-trame{mask-image:none;-webkit-mask-image:none;opacity:.32}
}
@media(prefers-reduced-motion:reduce){.heros-fond .ph{animation:none;transform:scale(1.04)}}

.heros-photo{padding-top:52px}
@media(max-width:680px){.heros-photo{padding-top:36px}}

/* ==========================================================================
   PARCOURS EN CARTES (page SSCT)
   ========================================================================== */
.parcours-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.parcours-carte{
  background:var(--blanc);border:1px solid var(--trait);border-radius:18px;
  padding:34px 30px;display:flex;flex-direction:column;gap:10px;
  transition:border-color .3s,box-shadow .3s,transform .3s cubic-bezier(.2,.8,.3,1);
}
.parcours-carte:hover{border-color:var(--clair);box-shadow:var(--ombre-h);transform:translateY(-4px)}
.pc-label{
  font-family:var(--display);font-size:20px;font-weight:600;
  letter-spacing:-.02em;color:var(--texte);
}
.pc-duree{
  font-family:var(--display);font-size:clamp(34px,4vw,46px);font-weight:700;
  letter-spacing:-.04em;line-height:1;color:var(--clair);margin:6px 0 4px;
}
.pc-champ{font-size:15px;color:var(--texte-doux);line-height:1.5}
@media(max-width:1080px){.parcours-trio{grid-template-columns:1fr}}

/* ==========================================================================
   MODULE COMPLÉMENTAIRE (page Référent harcèlement)
   ========================================================================== */
.module-bloc{
  display:grid;grid-template-columns:1.05fr .95fr;
  border:1px solid var(--trait);border-radius:22px;overflow:hidden;background:var(--nacre);
}
.module-txt{padding:40px;display:flex;flex-direction:column;gap:14px}
.module-tag{
  align-self:flex-start;font-family:var(--display);font-size:11px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--nuit);
  background:var(--clair-pale);padding:6px 13px;border-radius:100px;
}
.module-txt h3{font-size:24px}
.module-txt p{font-size:15.5px}
.module-txt .service-liste{margin:6px 0 0}
.module-btns{margin-top:auto;padding-top:22px}
.module-prog{
  background:linear-gradient(155deg,var(--nuit) 0%,var(--nuit-profond) 100%);
  padding:40px 36px;position:relative;overflow:hidden;
}
.module-prog::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(106,153,233,.08) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(106,153,233,.08) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 70% 60% at 70% 20%,#000,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 70% 20%,#000,transparent 76%);
}
.module-prog>*{position:relative;z-index:2}
.module-prog h4{
  font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--clair);margin-bottom:22px;
}
.module-prog ul{list-style:none;display:grid;gap:18px}
.module-prog li{display:grid;gap:5px;padding-bottom:18px;border-bottom:1px solid rgba(169,188,220,.16)}
.module-prog li:last-child{border-bottom:0;padding-bottom:0}
.module-prog li b{font-family:var(--display);font-size:16px;font-weight:600;color:#fff;letter-spacing:-.015em}
.module-prog li span{font-size:14px;color:var(--texte-nuit);line-height:1.5}
@media(max-width:900px){
  .module-bloc{grid-template-columns:1fr}
  .module-txt,.module-prog{padding:30px 26px}
}

/* ==========================================================================
   BANDEAU AU FILIGRANE (page catalogue)
   ========================================================================== */
.heros-fil{position:relative;overflow:hidden}
.filigrane{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background-repeat:repeat;background-size:340px auto;background-position:center;
  opacity:.82;
  mask-image:radial-gradient(ellipse 92% 88% at 50% 42%,#000 30%,transparent 88%);
  -webkit-mask-image:radial-gradient(ellipse 92% 88% at 50% 42%,#000 30%,transparent 88%);
}
.heros-fil .wrap{position:relative;z-index:2}
.heros-fil h1 .accent:empty{display:none}
@media(max-width:680px){.filigrane{background-size:340px auto}}

/* écran du catalogue : colonnes équilibrées */
.heros-fil .heros-grille{align-items:center;gap:56px}
.heros-fil .heros-chapo{margin:22px 0 30px}
.heros-fil .pastilles{margin-bottom:32px}
@media(max-width:1080px){.heros-fil .heros-grille{align-items:start}}

/* le léger zoom au survol porte sur le fond, plus sur une balise image */
.fcard.phare:hover .phare-img .ph{transform:scale(1.04)}

/* La carte tarifaire est blanche : son texte ne doit pas hériter du blanc
   de la section sombre qui l'entoure (page catalogue). */
.section-nuit .carte-tarif{color:var(--texte)}
.section-nuit .carte-tarif .tarif-prix{color:var(--texte)}
.section-nuit .carte-tarif p{color:var(--texte-doux)}
.section-nuit .carte-tarif .tarif-unite,
.section-nuit .carte-tarif .tarif-apd{color:var(--texte-doux)}
.section-nuit .carte-tarif .tarif-format{color:var(--clair)}
.section-nuit .carte-tarif .tarif-liste li{color:var(--texte-doux)}

/* --- module complémentaire sans panneau de programme --- */
.module-bloc.seul{grid-template-columns:1fr;background:var(--nacre)}
.module-bloc.seul .module-txt{padding:40px 44px}
.module-tags{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.module-tags .module-tag{align-self:auto}
.phare-tag.module-phare{position:static;box-shadow:none}
@media(max-width:680px){.module-bloc.seul .module-txt{padding:28px 24px}}

/* Carte sans durée : le lien reste aligné à droite comme sur les autres cartes */
.fcard-bas .forma-lien{margin-left:auto}

/* ==========================================================================
   TÉLÉPHONE — corrections de mise en page
   1. l'en-tête débordait : le bouton « Contactez-nous » est déjà dans le menu
   2. le carrousel était écrasé entre ses deux flèches : on empile les cartes
========================================================================== */
@media(max-width:900px){
  .entete-actions > .btn{display:none}
  .entete-actions{gap:0}
}
@media(max-width:680px){
  .carr-zone{display:block}
  .carr-zone > .carr-b,.carr-nav{display:none}
  .carr-zone .carrousel{overflow:visible;margin:0;padding:0}
  .carr-piste{display:grid;grid-template-columns:1fr;gap:18px;scroll-snap-type:none}
  .carr-item{flex:none;width:auto}
}

/* le bouton menu se cale au bord droit de l'écran, la barre de navigation
   étant masquée sur téléphone il n'y avait plus rien pour l'y pousser */
@media(max-width:900px){
  .entete-in{justify-content:space-between}
  .entete-actions{margin-left:auto}
}

/* ==========================================================================
   CARTE DE VISITE — format réel 85 × 55 mm, recto et verso
   Les tailles sont en cqw : la carte à l'écran garde exactement les
   proportions du carton imprimé, quelle que soit la largeur disponible.
   ========================================================================== */
.carte3d-in{aspect-ratio:85/55;height:auto}
.face{display:block;padding:0;overflow:hidden;container-type:inline-size}
.face-dedans{position:relative;z-index:2;height:100%;padding:5.6cqw 6cqw;
  display:grid;color:#E9F0FC}

/* --- recto --- */
.face.recto .face-dedans{grid-template-rows:1fr auto;align-items:center}
.face-chapeau{width:25cqw;max-width:none;margin:0 auto;display:block;
  align-self:center;justify-self:center}
.face-pied{display:flex;align-items:center;justify-content:space-between;gap:4cqw}
.face-activite{font-family:var(--display);font-weight:500;font-size:2.9cqw;
  letter-spacing:.055em;text-transform:uppercase;color:#9FB6DC;
  white-space:nowrap;line-height:1.45;margin:0}
.face-coord{text-align:right;flex:none;margin:0}
.face-site{font-family:var(--display);font-weight:600;font-size:4.2cqw;
  letter-spacing:-.02em;color:#FFF;line-height:1.1;display:block}
.face-mail{font-size:3.1cqw;letter-spacing:.012em;color:#A9BCDC;line-height:1.5;
  display:block;margin-top:.9cqw}

/* --- verso --- */
.face-dos{grid-template-rows:1fr auto;align-content:space-between}
.face-identite{align-self:center}
.face-titre-bloc{display:inline-block}
.face-nom{font-family:var(--display);font-weight:700;font-size:5.6cqw;
  letter-spacing:-.025em;line-height:1.05;color:#FFF;margin:0}
.face-regle{width:100%;height:1.5px;background:#6A99E9;border:0;
  margin:2.8cqw 0 2.6cqw;opacity:.85}
.face-qualite{font-family:var(--display);font-weight:600;font-size:2.9cqw;
  letter-spacing:.055em;text-transform:uppercase;color:#9FB6DC;margin:0}
.face-role{font-size:3cqw;line-height:1.55;color:#C9D8F0;margin:4.2cqw 0 0;
  max-width:86%}
.face-role .nbsp{white-space:nowrap}
.face-matieres{font-size:2.9cqw;line-height:1.5;color:#92A9D0;margin:1.4cqw 0 0}
.face-perso{font-size:3.1cqw;color:#FFF;letter-spacing:.012em;
  justify-self:end;text-align:right}

/* trame recalée sur le nouveau format */
.face::before{background-size:11cqw 11cqw;
  mask-image:radial-gradient(ellipse 48% 54% at 50% 44%,#000 0%,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 48% 54% at 50% 44%,#000 0%,transparent 76%)}
@media(max-width:680px){.face{border-radius:20px}}

/* --------------------------------------------------------------------------
   Le dos de la carte ne doit jamais transparaître.
   Safari (iPhone) cesse d'appliquer backface-visibility dès qu'une face
   contient des éléments imbriqués : le recto réapparaissait en miroir
   par-dessus le verso. On ne s'y fie donc plus et on masque franchement la
   face cachée, à mi-rotation pour que le basculement reste invisible.
   -------------------------------------------------------------------------- */
.face,.face-dedans{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.face{transition:background .45s ease,box-shadow .45s ease,border-color .45s ease,
      visibility 0s linear .42s}
.face.verso{visibility:hidden}
.carte3d.retournee .face.recto{visibility:hidden}
.carte3d.retournee .face.verso{visibility:visible}

/* --------------------------------------------------------------------------
   Basculement exact. La courbe d'accélération est volontairement symétrique :
   la carte franchit les 90° pile à la moitié du temps. Le masquage de la face
   cachée est calé sur cet instant précis, donc aucune fenêtre, même de
   quelques centièmes, pendant laquelle la mauvaise face pourrait se voir.
   Ce masquage ne dépend d'aucune propriété 3D : il fonctionne partout.
   -------------------------------------------------------------------------- */
.carte3d-in{transition:transform .8s cubic-bezier(.65,0,.35,1)}
.face{transition:background .45s ease,box-shadow .45s ease,border-color .45s ease,
      visibility 0s linear .4s}
@media(prefers-reduced-motion:reduce){
  .carte3d-in{transition:none}
  .face{transition:none}
}

/* --------------------------------------------------------------------------
   Pied de page : les quatre colonnes ne tiennent pas en dessous de 965 px.
   Comme la page ne défile pas horizontalement, la dernière colonne était
   simplement coupée — invisible sur iPad en portrait et sur iPhone en
   paysage. On passe à deux colonnes avant d'en arriver là.
   -------------------------------------------------------------------------- */
.pied-haut{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}
@media(max-width:1000px){
  .pied-haut{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 40px}
}
@media(max-width:680px){
  .pied-haut{grid-template-columns:minmax(0,1fr);gap:38px}
}

/* --------------------------------------------------------------------------
   Deux couches distinctes : l'inclinaison au survol d'un côté, le
   retournement de l'autre. Posées sur le même élément, l'inclinaison écrasait
   la rotation et la carte semblait disparaître.
   -------------------------------------------------------------------------- */
.carte3d-incl{display:block;transform-style:preserve-3d;
  transition:transform .22s cubic-bezier(.2,.7,.3,1)}
@media(prefers-reduced-motion:reduce){.carte3d-incl{transition:none}}

/* photos en fichiers : le cadrage passe de background à object-fit */
img.ph{object-fit:cover;object-position:center;border:0}
.filigrane{background-image:url(img/filigrane.png)}
/* champ piège à robots : invisible et hors du parcours au clavier */
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* retour après envoi du formulaire */
.form-etat.ok{border-left:3px solid var(--clair);background:rgba(106,153,233,.10)}
.form-etat.ko{border-left:3px solid #c0392b;background:rgba(192,57,43,.08)}