/* ============================================================
   ifa.css — Design system if2a.fr, axe « Affiche de spectacle » (v2B)
   Référence : 04-maquettes/maquette-*v2B*.html (validées 03/07/2026)
   ============================================================ */

:root{
  --ifa-rouge:#e63946;
  --ifa-jaune:#ffd23f;
  --ifa-bleu:#1d6fb8;
  --ifa-rose:#ff70a6;
  --ifa-vert:#06d6a0;
  --ifa-violet:#8338ec;
  --ifa-encre:#14213d;
  --ifa-fond:#fdfcf9;
  --ifa-font-titre:"Archivo Black",sans-serif;
  --ifa-font-texte:"Archivo",sans-serif;
}

body{font-family:var(--ifa-font-texte);color:var(--ifa-encre);background:var(--ifa-fond)}
h1,h2,h3{font-family:var(--ifa-font-titre);text-transform:uppercase;letter-spacing:-.01em}

/* ── Boutons ── */
.btn-pop{border-radius:.6rem;font-weight:900;padding:.65rem 1.5rem;text-transform:uppercase;letter-spacing:.03em;border:0}
.btn-rouge{background:var(--ifa-rouge);color:#fff}.btn-rouge:hover{background:#c62b38;color:#fff}
.btn-jaune{background:var(--ifa-jaune);color:var(--ifa-encre)}.btn-jaune:hover{background:#f0c020;color:var(--ifa-encre)}
.btn-encre{background:var(--ifa-encre);color:#fff}.btn-encre:hover{background:#0c1526;color:#fff}

/* ── Nav / bandeau ── */
.topbar{background:var(--ifa-fond)}
.nav-link{color:var(--ifa-encre);font-weight:700}.nav-link:hover{color:var(--ifa-rouge)}
.nav-link.active{color:var(--ifa-rouge)}
.strip{display:flex;height:14px}.strip div{flex:1}

/* ── Ponctuation de marque ── */
.asterisque{color:var(--ifa-rose);font-size:1.2em}
.fil{font-size:.85rem;font-weight:700;text-transform:uppercase}.fil a{color:var(--ifa-bleu);text-decoration:none}

/* ── Hero accueil ── */
.hero h1{font-size:clamp(2.6rem,6vw,5rem);line-height:.95}
.mot-rouge{color:var(--ifa-rouge)}.mot-bleu{color:var(--ifa-bleu)}
.mot-jaune{-webkit-text-stroke:2px var(--ifa-encre);color:var(--ifa-jaune)}
.photo-hero{border-radius:1rem;object-fit:cover;width:100%;height:100%;min-height:280px}
.cadre-photo{position:relative}
.cadre-photo::after{content:"";position:absolute;inset:-12px 12px 12px -12px;border:4px solid var(--ifa-jaune);border-radius:1.2rem;z-index:-1}
.badge-tourne{position:absolute;top:-22px;right:-10px;background:var(--ifa-jaune);color:var(--ifa-encre);font-weight:900;border-radius:50%;width:110px;height:110px;display:flex;align-items:center;justify-content:center;text-align:center;transform:rotate(12deg);font-size:.8rem;text-transform:uppercase;box-shadow:0 8px 20px rgba(20,33,61,.2);z-index:2}

/* ── Blocs univers (accueil) ── */
.bloc-univers{border-radius:1.25rem;color:#fff;overflow:hidden;position:relative;min-height:320px;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .12s}
.bloc-univers:hover{transform:scale(1.02)}
.bloc-univers img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:luminosity;opacity:.45}
.bloc-univers .contenu{position:relative;padding:1.5rem}
.compteur{font-family:var(--ifa-font-titre);font-size:3rem;line-height:1;opacity:.9}

/* ── Tableau des départs (sessions) ── */
.depart{background:var(--ifa-encre);color:#fff;border-radius:1.25rem}
.depart .ligne{border-bottom:1px dashed rgba(255,255,255,.25)}
.depart .ligne:last-child{border:0}
.heure{font-family:var(--ifa-font-titre);color:var(--ifa-jaune)}
.pastille-dispo{background:var(--ifa-vert);color:var(--ifa-encre);font-weight:900;border-radius:.5rem;padding:.3rem .7rem;font-size:.8rem;text-transform:uppercase}
.pastille-last{background:var(--ifa-rose)}
.pastille-projet{background:var(--ifa-jaune);color:var(--ifa-encre)}

/* ── Gros chiffres ── */
.gros-chiffre{font-family:var(--ifa-font-titre);font-size:3.2rem;line-height:1}

/* ── Filtres (catalogue / planning / conseils) ── */
.filtre{border:3px solid var(--ifa-encre);border-radius:2rem;background:#fff;font-weight:900;padding:.5rem 1.3rem;text-transform:uppercase;font-size:.85rem;color:var(--ifa-encre);text-decoration:none;display:inline-block}
.filtre.actif,.filtre:hover{background:var(--ifa-encre);color:#fff}
.filtre .dot{display:inline-block;width:.7rem;height:.7rem;border-radius:50%;margin-right:.4rem}

/* ── Cartes formation ── */
.carte-f{border-radius:1.25rem;overflow:hidden;background:#fff;border:3px solid var(--ifa-encre);height:100%;display:flex;flex-direction:column;transition:transform .12s}
.carte-f:hover{transform:translateY(-5px)}
.carte-f .visuel{height:160px;position:relative}
.carte-f .visuel img{width:100%;height:100%;object-fit:cover;mix-blend-mode:luminosity;opacity:.5}
.carte-f .univers-tag{position:absolute;top:.8rem;left:.8rem;background:#fff;border:2px solid var(--ifa-encre);border-radius:2rem;font-weight:900;font-size:.75rem;padding:.25rem .8rem;text-transform:uppercase}
.carte-f .duree{position:absolute;bottom:.8rem;right:.8rem;background:var(--ifa-encre);color:#fff;border-radius:.5rem;font-weight:900;font-size:.8rem;padding:.25rem .7rem}
.carte-f .corps{padding:1.2rem;display:flex;flex-direction:column;flex-grow:1}
.carte-f h3{font-size:1.05rem;text-transform:none;font-family:var(--ifa-font-titre)}
.carte-f .prix{font-family:var(--ifa-font-titre);font-size:1.3rem}
.carte-f .bande{height:10px}
.tag-stage{background:var(--ifa-jaune);border:2px solid var(--ifa-encre);border-radius:.4rem;font-size:.7rem;font-weight:900;padding:.15rem .5rem;text-transform:uppercase}
.tag-demande{background:var(--ifa-rose);color:#fff;border-radius:.4rem;font-size:.7rem;font-weight:900;padding:.2rem .5rem;text-transform:uppercase}

/* ── Fiche formation ── */
.hero-fiche{color:#fff;border-radius:1.5rem;overflow:hidden;position:relative}
.hero-fiche .visuel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:luminosity;opacity:.3}
.hero-fiche .contenu{position:relative}
.hero-fiche .badge-tourne{top:1.2rem;right:1.5rem;width:100px;height:100px;transform:rotate(10deg);font-size:.75rem}
.chip{background:#fff;color:var(--ifa-encre);border-radius:2rem;font-weight:900;font-size:.8rem;padding:.35rem 1rem;text-transform:uppercase}
.photo-bande img{width:100%;height:190px;object-fit:cover;border-radius:1rem;border:3px solid var(--ifa-encre)}
.etape{display:flex;gap:1rem;position:relative;padding-bottom:1.5rem}
.etape::before{content:"";position:absolute;left:1.45rem;top:3rem;bottom:0;width:4px;background:var(--ifa-jaune)}
.etape:last-child::before{display:none}
.etape .num{width:3rem;height:3rem;border-radius:50%;background:var(--ifa-jaune);font-family:var(--ifa-font-titre);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;z-index:1}
.etape .texte{background:#fff;border:3px solid var(--ifa-encre);border-radius:1rem;padding:1rem 1.2rem;flex-grow:1}
.carte-fmt{background:#fff;border:3px solid var(--ifa-encre);border-radius:1.25rem}
.trombi{width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--ifa-font-titre);font-size:1.5rem;flex-shrink:0;overflow:hidden}
.trombi img{width:100%;height:100%;object-fit:cover}
.postit{background:var(--ifa-jaune);border-radius:.3rem;box-shadow:0 10px 24px rgba(20,33,61,.15);font-weight:500}
.postit.p2{background:#d9f7ef;transform:rotate(1.5deg)}
.postit.p1{transform:rotate(-2deg)}
.etoiles{color:var(--ifa-rouge)}
.infos-cles{background:var(--ifa-jaune);border-radius:1.25rem}
.infos-cles .ligne{border-bottom:2px dashed rgba(20,33,61,.25);padding:.6rem 0}
.infos-cles .ligne:last-child{border:0}
.infos-cles .prix{font-family:var(--ifa-font-titre);font-size:2.4rem}
.mention-acces{background:#fff;border-radius:1rem}

/* ── Planning ── */
.mois-titre{font-family:var(--ifa-font-titre);font-size:1.1rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ifa-fond);background:var(--ifa-encre);border-radius:2rem;display:inline-block;padding:.4rem 1.4rem}
.depart-ligne{background:#fff;border:3px solid var(--ifa-encre);border-radius:1rem;transition:transform .1s}
.depart-ligne:hover{transform:translateX(6px)}
.jourbloc{font-family:var(--ifa-font-titre);background:var(--ifa-jaune);border-radius:.8rem .2rem .2rem .8rem;min-width:98px;border-right:3px solid var(--ifa-encre)}
.dot-univers{width:.9rem;height:.9rem;border-radius:50%;display:inline-block;flex-shrink:0}
.pastille{font-weight:900;border-radius:.5rem;padding:.3rem .7rem;font-size:.78rem;text-transform:uppercase}
.p-dispo{background:var(--ifa-vert)}.p-last{background:var(--ifa-rose);color:#fff}.p-complet{background:#ccc}.p-projet{background:var(--ifa-jaune);color:var(--ifa-encre)}
/* Vignette formateur (liste) : conteneur paysage → ancrer le cadrage vers le haut pour préserver le visage */
.carte-f .visuel-fmt img{object-position:center 20%}

/* ── Fiche formateur ── */
.portrait{border-radius:1.5rem;aspect-ratio:4/5;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.portrait .init{font-family:var(--ifa-font-titre);font-size:7rem;color:#fff;opacity:.9}
.portrait .nomvertical{position:absolute;left:1rem;bottom:1rem;font-family:var(--ifa-font-titre);color:var(--ifa-jaune);text-transform:uppercase;letter-spacing:.1em;font-size:.9rem;z-index:1}
.chip-bord{background:#fff;border:3px solid var(--ifa-encre);color:var(--ifa-encre);border-radius:2rem;font-weight:900;font-size:.8rem;padding:.35rem 1rem;text-transform:uppercase}
.citation{border-left:8px solid var(--ifa-jaune);font-size:1.4rem;font-weight:700;font-style:italic}

/* ── Articles conseils ── */
.rubrique-tag{background:var(--ifa-bleu);color:#fff;border-radius:2rem;font-weight:900;font-size:.8rem;padding:.4rem 1.1rem;text-transform:uppercase;display:inline-block;text-decoration:none}
.meta{color:#7a8199;font-weight:700;font-size:.9rem}
.article{font-size:1.12rem;line-height:1.75}
.article h2{font-size:1.5rem;margin-top:2.4rem;text-transform:none;font-family:var(--ifa-font-titre)}
.article h2::before{content:"— ";color:var(--ifa-rose)}
.article h3{font-size:1.15rem;margin-top:1.8rem;text-transform:none;font-family:var(--ifa-font-titre)}
.chapo{font-size:1.3rem;font-weight:700;border-left:8px solid var(--ifa-jaune);padding-left:1.2rem}
.encadre{background:#fff;border:3px solid var(--ifa-encre);border-radius:1rem}
.cta-formation{color:#fff;border-radius:1.25rem;position:relative;overflow:hidden}
.cta-formation img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:luminosity;opacity:.25}
.cta-formation .contenu{position:relative}
.carte-a{background:#fff;border:3px solid var(--ifa-encre);border-radius:1rem;height:100%;transition:transform .12s}
.carte-a:hover{transform:translateY(-4px)}
.sommaire{background:var(--ifa-jaune);border-radius:1rem}
.sommaire a{color:var(--ifa-encre);font-weight:700;text-decoration:none}

/* ── FAQ (accordéon) ── */
.accordion-ifa .accordion-item{background:#fff;border:3px solid var(--ifa-encre);border-radius:1rem;margin-bottom:.9rem;overflow:hidden}
.accordion-ifa .accordion-header{margin:0}
.accordion-ifa .accordion-button{font-family:var(--ifa-font-titre);font-size:1.02rem;line-height:1.35;text-transform:none;letter-spacing:-.01em;color:var(--ifa-encre);background:#fff;padding:1rem 1.2rem;border-radius:0}
.accordion-ifa .accordion-button:not(.collapsed){background:var(--ifa-jaune);color:var(--ifa-encre);box-shadow:none}
.accordion-ifa .accordion-button:focus{box-shadow:0 0 0 .2rem rgba(29,111,184,.2);z-index:2}
.accordion-ifa .accordion-body{padding:1.1rem 1.2rem 1.3rem}
.accordion-ifa .accordion-body>:last-child{margin-bottom:0}

/* ── Formulaires ── */
.form-ifa .form-control,.form-ifa .form-select{border:3px solid var(--ifa-encre);border-radius:.8rem;padding:.65rem .9rem;background:#fff}
.form-ifa .form-control:focus,.form-ifa .form-select:focus{border-color:var(--ifa-bleu);box-shadow:0 0 0 .2rem rgba(29,111,184,.15)}
.form-ifa label{font-weight:700}

/* ── Prose pages statiques ── */
.prose{font-size:1.08rem;line-height:1.7}
.prose h2{font-size:1.5rem;margin-top:2.2rem;text-transform:none}
.prose h2::before{content:"— ";color:var(--ifa-rose)}
.prose h3{font-size:1.15rem;margin-top:1.6rem;text-transform:none}

/* ── Footer ── */
footer.ifa-footer{background:var(--ifa-encre);color:#c9d2e3}
footer.ifa-footer a{color:#fff}

/* ── Bandeau consentement cookies ── */
.consent-banner{position:fixed;bottom:1rem;left:1rem;right:1rem;z-index:1080;background:#fff;border:3px solid var(--ifa-encre);border-radius:1rem;box-shadow:0 12px 30px rgba(20,33,61,.25);max-width:560px;margin:auto}

/* ── Responsive ── */
@media (max-width: 575px){
  .badge-tourne{width:88px;height:88px;font-size:.68rem;top:-16px;right:-4px}
  .gros-chiffre{font-size:2.4rem}
  .compteur{font-size:2.2rem}
  .photo-bande img{height:110px}
}

/* ── Bloc Qualiopi (charte d'usage de la marque : fond blanc conservé, mention sous le logo) ── */
.bloc-qualiopi{background:#fff;border-radius:.75rem;padding:.9rem 1rem;display:inline-block;max-width:100%}
.bloc-qualiopi img{display:block;height:auto;max-width:100%;margin:0 auto}
.bloc-qualiopi a{display:block}
.bloc-qualiopi .mention{margin:.55rem 0 0;font-size:.6rem;line-height:1.3;color:var(--ifa-encre);text-align:center;text-transform:none;letter-spacing:0}