/* ====================================================================
   site.css : le socle commun à toutes les pages d'Inter'Conduite.
   Polices, couleurs, remise à zéro, bouton rouge, bandeau, barre de
   navigation (menu mobile compris) et pied de page.
   L'accueil le charge à la place des mêmes règles, autrefois en ligne :
   il garde sa place dans la cascade (après heros-b.css, avant le style
   propre à l'accueil).
   ==================================================================== */
@font-face{font-family:"Inter";src:url(/fonts/Inter-var.woff2) format("woff2");font-weight:100 900;font-display:block}
@font-face{font-family:"Newsreader";src:url(/fonts/Newsreader-var.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:block}
:root{
  --rouge:#e20613; --rouge-lavis:rgba(226,6,19,.16);
  --encre:#1d1714; --nuit:#0c0c0d; --papier:#fffdf9; --creme:#f6efe4; --creme-2:#efe6d8;
  --cendre:#6e625a; --texte-2:#4a3f38; --filet:#e6dccd; --filet-2:#d9ccba;
  --nuit-2:#17171a; --vert:#1f9d55; --ambre:#f0a20b; --asphalte:#2a2a2e; --marquage:#fff;
  --serif:"Newsreader",Georgia,serif; --sans:"Inter",Arial,sans-serif;
  --cadre:1800px; --barre:66px; --rouge-fonce:#c40510;
  --pied-texte:rgba(246,239,228,.72); --pied-filet:rgba(246,239,228,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-weight:400;font-feature-settings:"ss01" on,"cv11" on;color:var(--encre);background:var(--creme);-webkit-font-smoothing:antialiased}
.page{position:relative;overflow-x:clip}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
figure{margin:0}
.c{width:min(var(--cadre),100% - 2 * clamp(16px, 4vw, 80px));margin-inline:auto}
h1,h2,h3{font-weight:400}
h1,h2,h3{text-wrap:balance}
/* un titre découpé par flip ne s'équilibre pas comme son texte (règle 10) : il garde la coupure ordinaire */
h2[data-anim~="flip"]{text-wrap:wrap}
p,blockquote,q{text-wrap:pretty}
.lab{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--cendre)}
.puce{font-variant-numeric:tabular-nums;background:var(--creme-2);border-radius:4px;padding:3px 7px;letter-spacing:.02em;color:var(--encre);text-transform:none}
mark{background:linear-gradient(var(--rouge-lavis),var(--rouge-lavis)) no-repeat 0 92%/100% 60%;color:inherit;padding:0 2px;margin:0 -2px;transition:background-size .9s cubic-bezier(.2,.7,.2,1)}
.veille mark{background-size:0% 60%}
.veille mark.on{background-size:100% 60%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* un seul style de bouton : le rouge */
.btn{--fond:var(--rouge);--encre-btn:#fff;position:relative;display:inline-flex;align-items:center;height:56px;padding:0 30px;border-radius:999px;background:var(--fond);color:var(--encre-btn);white-space:nowrap;overflow:hidden;transition:background-color .25s ease}
.btn-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2;transition:transform .3s cubic-bezier(.215,.61,.355,1)}
.btn .anim-libelle,.btn .lib{font-size:16px;font-weight:500}
.btn-num{font-size:13px;opacity:.75;font-variant-numeric:tabular-nums;margin-top:1px}
.btn-ico{position:absolute;right:12px;top:50%;width:16px;height:16px;margin-top:-8px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:translateX(10px);transition:opacity .3s cubic-bezier(.215,.61,.355,1),transform .3s cubic-bezier(.215,.61,.355,1)}
.btn:hover,.btn:focus-visible{--fond:var(--rouge-fonce)}
.btn:hover .btn-txt,.btn:focus-visible .btn-txt{transform:translateX(-4px)}
.btn:hover .btn-ico,.btn:focus-visible .btn-ico{opacity:1;transform:none}
.btn:focus-visible{outline:2px solid var(--papier);outline-offset:3px}
.btn-petit{height:44px;padding:0 24px}
.btn-petit:hover .btn-txt,.btn-petit:focus-visible .btn-txt{transform:translateX(-10px)}
.btn-petit .btn-ico{right:10px}
.btn-petit .lib-court{display:none}
/* sur un aplat rouge : pastille blanche, texte rouge */
.sur-rouge .btn{--fond:#fff;--encre-btn:var(--rouge)}
.sur-rouge .btn:hover,.sur-rouge .btn:focus-visible{--fond:var(--creme)}

/* bandeau et barre */
.annonce{height:40px;line-height:40px;background:var(--nuit);color:var(--creme);font-size:14px;text-align:center;white-space:nowrap;overflow:hidden}
.annonce b{font-weight:400;color:#fff;opacity:.55}
.barre{height:var(--barre);background:var(--papier);border-bottom:1px solid var(--filet);position:sticky;top:0;z-index:40}
.barre .c{height:100%;display:flex;align-items:center;gap:32px}
.barre img{height:32px;width:auto}
.logo{display:block;flex:none;border-radius:4px}
.menu{display:flex;gap:28px;font-size:15px}
.menu a{position:relative;padding:6px 0;white-space:nowrap}
/* l'état actif et le survol : un trait rouge sous le lien */
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:1px;background:var(--rouge);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.215,.61,.355,1)}
.menu a:hover::after,.menu a:focus-visible::after,.menu a[aria-current="page"]::after{transform:none}
.menu a:focus-visible,.logo:focus-visible,.droite .tel:focus-visible,.burger:focus-visible{outline:2px solid var(--rouge);outline-offset:4px}
.droite{margin-left:auto;display:flex;align-items:center;gap:20px;font-size:15px}
.droite .tel{white-space:nowrap;font-variant-numeric:tabular-nums}
.burger{display:none;flex:none;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer;place-items:center}
.burger svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.burger .b2{transition:opacity .2s ease}
.burger .b1,.burger .b3{transition:transform .3s cubic-bezier(.215,.61,.355,1);transform-origin:12px 12px}
.ouvert .burger .b1{transform:translateY(6px) rotate(45deg)}
.ouvert .burger .b2{opacity:0}
.ouvert .burger .b3{transform:translateY(-6px) rotate(-45deg)}

/* pied de page : trois colonnes, puis la bande de l'agrément */
.pied{position:relative;z-index:3;background:var(--nuit);color:var(--pied-texte);font-size:15px;line-height:1.55;border-top:1px solid var(--pied-filet)}
.pied a{transition:color .2s ease}
.pied a:hover,.pied a:focus-visible{color:#fff}
.pied a:focus-visible{outline:2px solid var(--rouge);outline-offset:3px;border-radius:2px}
.pied-haut{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:48px;padding:72px 0 56px}
.pied h2{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(246,239,228,.5);margin-bottom:18px}
.pied-logo{display:inline-block;margin-bottom:22px}
.pied-logo img{width:64px;height:auto}
.pied-id p{text-wrap:pretty}
.pied-id p+p{margin-top:4px}
.pied-id .pied-nom{font-family:var(--serif);font-size:22px;line-height:1.3;color:var(--creme);margin-bottom:14px;max-width:24ch}
.pied ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.pied dl{display:grid;gap:12px}
.pied dt{color:var(--creme)}
.pied dd{text-wrap:pretty}
.pied-bas{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 32px;padding:22px 0 28px;border-top:1px solid var(--pied-filet);font-size:13px}
.pied .pied-mentions{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 0}
.pied-mentions li+li::before{content:"·";margin:0 10px;color:rgba(246,239,228,.4)}
.pied-mentions .agrement{color:#fff;font-weight:500;font-size:14px}
.pied-signature{margin-left:auto;color:rgba(246,239,228,.5)}

/* deux portraits en duo décalé (accueil et formation) */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:16px}
.duo figure{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:3/4;background:var(--creme-2)}
/* le décalage passe par la marge : GSAP (montee) efface le translate posé en CSS */
.duo figure:nth-child(2){margin-top:48px}
.duo img{width:100%;height:100%;object-fit:cover}
.duo figcaption{position:absolute;left:12px;right:12px;bottom:12px;width:fit-content;background:rgba(255,253,249,.95);color:var(--encre);border-radius:10px;padding:7px 11px;font-size:14px;line-height:1.35}

@media (prefers-reduced-motion:reduce){.btn-ico,.btn-txt{transform:none!important;transition:opacity .2s linear}.menu a::after,.burger *{transition:none}}

/* la barre passe au menu repliable avant de serrer ses liens */
@media (max-width:1240px){
  .droite .tel{display:none}
}
@media (max-width:1100px){
  .barre .c{gap:12px}
  .burger{display:grid}
  .menu{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;gap:0;max-height:calc(100vh - var(--barre));max-height:calc(100svh - var(--barre));overflow-y:auto;padding:8px clamp(16px,4vw,80px) 24px;background:var(--papier);color:var(--encre);border-bottom:1px solid var(--filet);box-shadow:0 24px 40px -28px rgba(29,23,20,.35)}
  .ouvert .menu{display:flex}
  .menu a{font-family:var(--serif);font-size:24px;line-height:1.2;padding:14px 0;border-bottom:1px solid var(--filet)}
  .menu a:last-child{border-bottom:0}
  .menu a::after{bottom:-1px}
  .menu a[aria-current="page"]{color:var(--rouge)}
}
@media (max-width:900px){
  .annonce{font-size:12.5px}.annonce b,.annonce .long{display:none}
  .btn{height:52px;padding:0 28px}
  .btn-petit{height:44px;padding:0 20px}
  .pied-haut{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 32px;padding:56px 0 40px}
  .pied-id{grid-column:1 / -1}
}
@media (max-width:600px){
  .duo figure:nth-child(2){margin-top:24px}
  .duo{gap:10px}
  .duo figcaption{left:8px;right:8px;bottom:8px;font-size:12.5px;padding:6px 9px}
  .btn-petit .lib-long{display:none}
  .btn-petit .lib-court{display:inline}
  .pied-haut{grid-template-columns:minmax(0,1fr)}
  .pied .pied-mentions{flex-direction:column;gap:6px}
  .pied-mentions li+li::before{content:none}
}