/* SOSERIM — feuille autonome des pages de cours : socle limité aux composants utilisés ici
   (nav et footer complets du site), puis le catalogue et la lecture d'un cours.
   Source de vérité des composants partagés : style.css (design system). */
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-400.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/poppins-500.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-600.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/poppins-700.woff2) format("woff2")}
/* Manuscrite : la seule signature du hero. Chargée en différé — la page se lit sans elle. */
@font-face{font-family:"Caveat";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/caveat-600.woff2) format("woff2")}

:root{
--font:"Poppins",system-ui,sans-serif;
--script:"Caveat",cursive;
--ink:#221b4e;--body:#4d4966;--muted:#6e6890;
--primary:#4a38a8;--lav50:#f7f5fc;--lav100:#efebf9;--line:#e7e4f1;--accent:#0b7d91;--accent100:#e0f3f6;
--grad:linear-gradient(92deg,#4a38a8,#3f63c9 55%,#129cb5);
--r:16px;--rs:10px;
--sh1:0 1px 2px rgba(34,27,78,.05),0 4px 16px rgba(34,27,78,.07);
--sh2:0 6px 14px rgba(34,27,78,.1),0 18px 44px rgba(34,27,78,.14);
}

/* Base */
*{box-sizing:border-box;margin:0}
html{font-size:112.5%;scroll-behavior:smooth} /* 18px : lectorat senior */
body{font:400 1rem/1.65 var(--font);color:var(--body);background:#fff;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
h1,h2,h3{color:var(--ink);font-weight:700;line-height:1.18;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:2.9rem;line-height:1.08}
p{max-width:70ch}
.lead{font-size:1.0625rem;color:var(--muted)}
a{color:var(--primary);text-underline-offset:3px}
::selection{background:var(--primary);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.skip{position:absolute;top:-100%;left:0;z-index:30;padding:.6rem 1.2rem;background:var(--primary);color:#fff;border-radius:0 0 var(--rs) 0}
.skip:focus{top:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* libellé réservé aux lecteurs d'écran */
.wrap{max-width:1350px;margin-inline:auto;padding-inline:2.5rem}
.cy{color:var(--accent)}

/* Navigation : barre collante, ombre fondue dès que la page défile (classe posée par script.js) */
body>header{position:sticky;top:0;z-index:20}
.nav{padding-block:.7rem;background:#fff;border-bottom:1px solid var(--line);transition:box-shadow .3s}
.nav.pose{box-shadow:var(--sh1)}
.nav-in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2rem}
.nav-in>.btn{justify-self:end;padding:.6rem 1.4rem}
/* Logo et sa signature : le nom sur une ligne, la baseline dessous, alignés à gauche du bloc */
.nav-logo{display:flex;align-items:center;gap:.65rem;justify-self:start;color:var(--ink);text-decoration:none}
.nav-logo img{height:46px;width:auto}
.nav-nom{display:block;font:700 1.15rem/1.15 var(--font);letter-spacing:-.01em}
.nav-nom i{display:block;font:400 .6875rem/1.3 var(--font);font-style:normal;color:var(--muted)}
.nav-links{display:flex;justify-self:center;position:relative;gap:1.6rem;list-style:none;padding:0}
/* Aucun libellé ne se coupe : « Cours et formations » sur deux lignes ferait grandir la
   barre et désalignerait tout le menu. */
.nav-links a{white-space:nowrap;color:var(--body);text-decoration:none;font-weight:500;font-size:.9375rem;transition:color .25s}
.nav-links a:hover,.nav-links a[aria-current=page]{color:var(--primary)}
/* Filet du menu : trait au dégradé du logo qui glisse d'une entrée à l'autre. Il se cale sous
   l'entrée courante, suit le survol et le focus ; script.js pose sa position et sa largeur. */
.nav-links::after{content:"";position:absolute;left:0;bottom:-.35rem;width:var(--w,0);height:2px;border-radius:2px;background:var(--grad);box-shadow:0 2px 10px rgba(18,156,181,.45);opacity:0;translate:var(--x,0) 0;transition:translate .42s cubic-bezier(.32,.72,0,1),width .42s cubic-bezier(.32,.72,0,1),opacity .3s}
.nav-links.filet::after{opacity:1}
.burger{display:none;flex-direction:column;gap:.32rem;align-items:center;justify-content:center;margin-left:auto;width:2.6rem;height:2.6rem;border:1px solid var(--line);border-radius:50%;background:#fff;cursor:pointer}
.burger i{width:1.1rem;height:2px;background:var(--ink);border-radius:2px}
/* Libellé du bouton de compte : la version courte prend le relais en tablette, où le
   libellé long casserait sur deux lignes dans sa pilule */
.nav .lib{font-size:13px}
.nav .lib-c{display:none}
/* Entre le tiroir et le desktop large, le menu à sept entrées se resserre, la baseline du
   logo s'efface et le bouton de compte prend son libellé court */
@media(min-width:1001px) and (max-width:1300px){
.nav .lib{display:none}
.nav .lib-c{display:inline}
.nav-nom i{display:none}
.nav-in{gap:1.2rem}
.nav-links{gap:1rem}
.nav-links a{font-size:.875rem}
}

/* Boutons, puces, icônes */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1.6rem;border:1px solid transparent;border-radius:999px;font:600 .9375rem/1 var(--font);letter-spacing:.01em;color:#fff;background:var(--primary);cursor:pointer;text-decoration:none;transition:transform .2s,box-shadow .2s,filter .2s,border-color .2s}
.btn:hover{transform:translateY(-1px);box-shadow:var(--sh2);filter:brightness(1.07)}
.btn:active{transform:none;filter:brightness(.97)}
.btn-o{background:#fff;color:var(--primary);border-color:var(--line)}
.btn-o:hover{border-color:var(--primary);filter:none}
.btn-disc{display:grid;place-items:center;flex:none;width:1.3rem;height:1.3rem;margin:-.5rem 0 -.5rem -1rem;border-radius:50%;background:rgba(255,255,255,.2)}
.btn-disc .ico,.btn>.ico{width:1.05rem;height:1.05rem}
.ico{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .7rem;border-radius:999px;background:var(--lav100);color:var(--primary);font-size:.72rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase}
.chip-a{background:var(--accent100);color:var(--accent)}
.pic{display:grid;place-items:center;flex:none;border-radius:50%;background:var(--lav50)}
.link{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:var(--primary);text-decoration:none}
.link .ico{transition:translate .2s}
.link:hover .ico{translate:4px 0}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;font-size:.875rem;color:var(--muted)}
.crumb ol{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;padding:0}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--primary)}
.crumb [aria-current=page]{color:var(--ink);font-weight:600}
.crumb li+li::before{content:"›";margin-right:.45rem;color:#bfb8d8} /* chevron dessiné, pas d'image */

/* En-tête du catalogue : le texte sur fond lavande à gauche, la photo occupant la moitié
   droite jusqu'au bord de l'écran. La photo se fond dans le fond clair par un dégradé, ce
   qui évite l'arête verticale d'un demi-écran d'image posé sur un aplat. */
.hero{position:relative;background:var(--lav50);border-bottom:1px solid var(--line);overflow:hidden}
.hero-img{position:absolute;inset:0 0 0 47%}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
/* Deux couches : le fondu vers le fond clair à gauche, et un voile d'encre au seul angle
   que la signature occupe — une salle d'examen est blanche, et du blanc sur du blanc ne se
   lit pas. Le voile s'arrête avant le tiers gauche pour ne pas grisailler la photo. */
.hero-img::after{content:"";position:absolute;inset:0;background:radial-gradient(62% 56% at 100% 100%,rgba(34,27,78,.5),rgba(34,27,78,.16) 46%,transparent 70%),linear-gradient(to right,var(--lav50),rgba(247,245,252,.55) 14%,transparent 34%)}
/* Signature manuscrite, seul écart au système typographique : elle tient lieu de sceau,
   une fois par page et jamais ailleurs. */
.hero-sign{position:absolute;right:2.4rem;bottom:1.9rem;z-index:1;font:600 2.1rem/1.1 var(--script);color:#fff;text-align:right;text-shadow:0 2px 14px rgba(34,27,78,.45);rotate:-4deg}
.hero-sign span{display:block;margin-right:-1.4rem}
.hero-in{position:relative;z-index:1;display:grid;gap:1.1rem;max-width:36rem;padding-block:3.2rem 3rem}
.hero-in h1{max-width:12ch}
.hero-in .lead{max-width:40ch}
/* Les trois arguments tiennent sur une rangée : sans « nowrap », le troisième passe seul
   à la ligne dès que la colonne se resserre, et la rangée cesse de se lire comme un lot. */
.hero-pts{display:flex;flex-wrap:nowrap;gap:.9rem;margin-top:.6rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.hero-pt{display:flex;align-items:center;gap:.6rem}
.hero-pt+.hero-pt{padding-left:.9rem;border-left:1px solid var(--line)}
/* Trait affiné à mesure que l'icône grandit : à taille double de celles du texte, un trait
   de 1,8 la ferait peser plus lourd que le libellé qu'elle accompagne. */
.hero-pt .ico{width:1.9rem;height:1.9rem;color:var(--primary);stroke-width:1.5}
.hero-pt b,.hero-pt i{display:block;white-space:nowrap;font-size:.8125rem;line-height:1.4}
.hero-pt b{font-weight:600;color:var(--ink)}
.hero-pt i{font-style:normal;color:var(--muted)}

/* Barre d'outils : recherche, filtres de discipline, tri. Tout agit sur la liste déjà
   chargée — aucun de ces trois gestes ne repasse par le serveur. */
.outils{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.4rem;padding-block:1.8rem 1.4rem}
.srch{position:relative;flex:1 1 18rem;max-width:26rem}
.srch .ico{position:absolute;left:1.05rem;top:50%;translate:0 -50%;width:1.1rem;height:1.1rem;color:var(--muted);pointer-events:none}
.srch input{width:100%;padding:.78rem 1.1rem .78rem 2.9rem;border:1px solid var(--line);border-radius:999px;background:var(--lav50);font:400 .9375rem var(--font);color:var(--ink);transition:border-color .2s,background .2s,box-shadow .2s}
.srch input::placeholder{color:var(--muted)}
.srch input:focus{outline:none;border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px var(--lav100)}
.filtres{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.filtre-t{margin-right:.2rem;font-size:.875rem;font-weight:600;color:var(--ink)}
.filtre{padding:.48rem 1rem;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--body);font:500 .875rem/1 var(--font);cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.filtre:hover{border-color:var(--primary);color:var(--primary)}
.filtre[aria-pressed=true]{background:var(--primary);border-color:var(--primary);color:#fff}
.tri{display:flex;align-items:center;gap:.45rem;margin-left:auto;color:var(--body)}
.tri .ico{width:1.15rem;height:1.15rem;color:var(--muted)}
.tri select{padding:.4rem 1.6rem .4rem .3rem;border:0;background:none;font:500 .875rem var(--font);color:var(--ink);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6890' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .2rem center;background-size:1rem}
.tri select:focus{outline:none;box-shadow:0 0 0 3px var(--lav100);border-radius:var(--rs)}

/* Catalogue : trois colonnes, deux puis une selon la largeur */
.cours-l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;padding-bottom:4.5rem;list-style:none;margin:0;padding-left:0;padding-right:0}
.cours-c{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh1);overflow:hidden;text-decoration:none;transition:transform .25s,box-shadow .25s,border-color .25s}
.cours-c:hover{transform:translateY(-4px);box-shadow:var(--sh2);border-color:transparent}
.cours-cov{position:relative;aspect-ratio:16/10;background:var(--lav100)}
.cours-cov img{width:100%;height:100%;object-fit:cover}
/* Couverture absente : le dégradé du logo tient le cadre plutôt qu'un gris vide */
.cours-cov.vide{background:var(--grad)}
.cours-tags{position:absolute;left:.75rem;top:.75rem;display:flex;flex-wrap:wrap;gap:.4rem}
.cours-tags .chip{background:var(--primary);color:#fff;box-shadow:0 2px 8px rgba(34,27,78,.25)}
.cours-tags .chip-a{background:#cdeef4;color:#075e6e}
/* Pastille d'accès : posée sur la photo, donc sur un fond qu'on ne choisit pas — le blanc
   opaque est ce qui reste lisible sur une salle claire comme sur une salle sombre. */
.cours-acc{position:absolute;right:.75rem;top:.75rem;display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .7rem .35rem .55rem;border-radius:999px;background:rgba(255,255,255,.94);color:var(--ink);font-size:.75rem;font-weight:600;box-shadow:0 2px 8px rgba(34,27,78,.2)}
.cours-acc .ico{width:.9rem;height:.9rem;color:var(--primary)}
/* Marge du bas égale à celle des côtés : la pastille de la flèche vient s'y loger, et un
   pied plus court la collerait à l'angle arrondi de la carte. */
.cours-b{display:flex;flex-direction:column;gap:.5rem;flex:1;padding:1.25rem 1.35rem 1.35rem}
.cours-c h2{font-size:1.2rem;line-height:1.3}
.cours-r{font-size:.9375rem;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cours-m{display:flex;align-items:center;gap:1rem;margin-top:auto;padding-top:1rem;font-size:.8125rem;color:var(--muted)}
.cours-m span{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.cours-m .ico{width:1rem;height:1rem}
/* La pastille reste claire au survol : un disque violet plein pèse plus lourd que le titre
   du cours, et le pied de carte cesse d'être un pied. C'est la flèche qui répond, en
   avançant — le même geste que les liens fléchés du reste du site. */
/* La flèche occupe tout le disque, creusé d'un retrait égal sur les quatre côtés, plutôt
   que d'être une petite boîte que l'on centre. Centrer laissait un espace à répartir de
   part et d'autre : au moindre facteur d'échelle — zoom du navigateur, écran à 125 % —
   cet espace tombe sur un demi-pixel, que le moteur arrondit d'un seul côté. Ici il n'y a
   plus rien à répartir, et le tracé se cale au centre de sa propre zone. */
.cours-go{position:relative;display:block;flex:none;width:42px;height:42px;margin-left:auto;border-radius:50%;background:var(--lav100);color:var(--primary);transition:background .25s}
.cours-go .ico{position:absolute;inset:0;width:100%;height:100%;padding:10px;stroke-width:1.6;transition:translate .2s}
.cours-c:hover .cours-go{background:var(--lav100);filter:brightness(.96)}
.cours-c:hover .cours-go .ico{translate:3px 0}

/* États d'échange : attente, liste vide, échec — mêmes formes que l'espace membre */
[aria-busy=true]{min-height:12rem}
.empty{grid-column:1/-1;display:grid;justify-items:center;gap:.5rem;padding:3.2rem 1.5rem;border:1px dashed var(--line);border-radius:var(--r);background:var(--lav50);text-align:center}
.empty .pic{width:3rem;height:3rem;background:var(--lav100);color:var(--primary)}
.empty b{color:var(--ink);font-size:1.05rem}
.empty p{font-size:.9375rem;color:var(--muted);max-width:44ch}

/* Lecture d'un cours : une colonne de 940 px centrée, et les marges qui l'entourent
   portent les mentions de la société. Largeur relevée sur la maquette (70 % de la page). */
.art{position:relative;padding-block:2.4rem 4.5rem}
.art-in{position:relative;z-index:1;max-width:940px;margin-inline:auto}
.art-head{display:grid;gap:.9rem;margin:1.4rem 0 1.8rem}
.art-head h1{font-size:3rem;letter-spacing:-.02em}

/* Mentions de marge : elles n'appartiennent pas au cours mais à la société, et se lisent
   comme une gravure sur le mur de la page. Retirées dès que la place manque — écrasées
   sur la colonne, elles deviendraient du bruit. */
.art-deco{position:absolute;inset:0;pointer-events:none;color:#c9c2e0}
.art-deco p{position:absolute;margin:0;max-width:none;font-size:.6875rem;font-weight:600;line-height:2;letter-spacing:.16em;text-transform:uppercase}
.art-deco span{display:block}
.art-deco p::after{content:"";display:block;width:18px;height:3px;margin-top:.7rem;border-radius:2px;background:var(--accent)}
.deco-hg{left:0;top:27rem}
.deco-hd{right:0;top:11rem;text-align:right}
.deco-hd::after{margin-left:auto}
.deco-bd{right:0;top:43rem;text-align:right}
.deco-bd::after{margin-left:auto}
/* La signature reprend la manuscrite du catalogue : même sceau, posé une fois par page. */
.deco-sign{right:0;top:1.6rem;font:600 1.45rem/1.35 var(--script);letter-spacing:0;text-transform:none;text-align:right;color:#a9a0cd;rotate:-5deg}
.deco-sign::after{display:none}
.art-p{display:flex;flex-wrap:wrap;gap:.4rem}
.art-m{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.1rem;font-size:.875rem;color:var(--muted)}
.art-m span{display:inline-flex;align-items:center;gap:.4rem}
.art-m .ico{width:1.05rem;height:1.05rem}
/* Bandeau, et non photo entière : au ratio relevé sur la maquette, la couverture tient
   le haut de l'article sans repousser le texte sous la ligne de flottaison. */
.art-cov{margin-bottom:1.7rem;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh1)}
.art-cov img{width:100%;height:100%;aspect-ratio:3.5/1;object-fit:cover}

/* Corps de l'article : la mise en forme vient du back-office, la typographie d'ici.
   Les marges sont posées entre les blocs et non autour de chacun : un texte qui commence
   par un sous-titre ne creuse alors pas un blanc au-dessus de lui. */
.art-txt{font-size:1.0625rem;line-height:1.75}
.art-txt>*+*{margin-top:1.15rem}
.art-txt h2{font-size:1.65rem;margin-top:2.4rem}
.art-txt h3{font-size:1.3rem;margin-top:1.9rem}
.art-txt h4{font-size:1.1rem;margin-top:1.6rem;color:var(--ink);font-weight:600}
.art-txt ul,.art-txt ol{padding-left:1.4rem}
.art-txt li+li{margin-top:.4rem}
.art-txt blockquote{padding:.2rem 0 .2rem 1.2rem;border-left:3px solid var(--line);color:var(--muted);font-style:italic}
.art-txt img{width:100%;height:auto;border-radius:var(--r)}
.art-txt iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:var(--r)} /* ratio réservé : aucun décalage à l'arrivée de la vidéo */
.art-txt hr{margin-block:2rem;border:0;border-top:1px solid var(--line)}
.art-txt code{padding:.1rem .35rem;border-radius:.25rem;background:var(--lav100);font-size:.9em}
.art-txt pre{padding:1rem 1.2rem;border-radius:var(--rs);background:var(--lav50);overflow-x:auto}
.art-txt pre code{padding:0;background:none}
.art-txt a{font-weight:500}

/* Coupure : l'aperçu s'efface dans le blanc de la page, puis la carte dit quoi faire.
   Le fondu est ce qui signale la coupure — sans lui, le texte paraît tronqué par erreur. */
.art-cut{position:relative;margin-top:-5rem;padding-top:5rem;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 4.2rem)}
/* Proportions relevées sur la maquette : pastille de 44 px, puis titre, deux lignes de
   texte, bouton et rappel, tout centré sur la largeur de la colonne. */
.art-card{display:grid;justify-items:center;gap:.7rem;padding:1.7rem 1.8rem 1.9rem;border:1px solid var(--line);border-radius:var(--r);background:var(--lav50);text-align:center}
.art-card .pic{width:44px;height:44px;margin-bottom:.3rem;background:#fff;color:var(--primary);box-shadow:var(--sh1)}
.art-card .pic .ico{width:20px;height:20px}
.art-card h2{font-size:1.2rem}
.art-card p{font-size:.875rem;color:var(--muted);max-width:52ch}
.art-card .btn{margin-top:.6rem}
.art-card .art-note{margin-top:.2rem;font-size:.8125rem}
.art-card .art-note a{font-weight:600;text-decoration:underline}
.art-back{margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--line)}

/* Pied de page : bandeau lettre d'information sous halo violet — la profondeur des fonds
   sombres passe par le halo, jamais par une ombre —, puis identité, réseaux et colonnes de
   liens, enfin la barre de mentions sur un fond d'un cran plus profond. */
.ft{background:var(--ink);color:#c9c2e8}
.ft a{color:#c9c2e8;text-decoration:none;transition:color .2s}
.ft a:hover{color:#fff}
.ft :focus-visible{outline-color:#5fd0e4} /* le cyan du système tomberait à 3,2:1 sur ce fond */
.ft-news{background:radial-gradient(58% 130% at 38% -10%,#3a2c86,transparent 62%);border-bottom:1px solid rgba(255,255,255,.1)}
.ft-news-in{display:grid;grid-template-columns:1fr 1fr;gap:2rem 3.5rem;align-items:center;padding-block:3.6rem}
.ft-news h2{color:#fff;max-width:20ch;font-size:2.4rem}
.ft-news .mark{color:#5fd0e4} /* le cyan du système tomberait à 3,2:1 sur ce fond */
.ft-sub{display:grid;gap:1.2rem}
.ft-sub-t{display:flex;align-items:flex-start;gap:.9rem;font-size:.9375rem}
.ft-sub-t .pic{width:2.4rem;height:2.4rem;background:rgba(255,255,255,.08);color:#fff}
.ft-form{display:flex;align-items:center;gap:.5rem;padding:.4rem .4rem .4rem 1.3rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:999px;transition:border-color .2s}
.ft-form:focus-within{border-color:rgba(255,255,255,.34)}
.ft-form input{flex:1;min-width:0;padding:.55rem 0;background:none;border:0;color:#fff;font:400 .9375rem var(--font)}
.ft-form input::placeholder{color:#c9c2e8;opacity:.62}
.ft-form input:focus{outline:0} /* l'anneau se pose sur la pilule entière, pas sur le champ nu */
.ft-form button{display:grid;place-items:center;flex:none;width:2.7rem;height:2.7rem;background:var(--primary);border:0;border-radius:var(--rs);color:#fff;cursor:pointer;transition:filter .2s}
.ft-form button:hover{filter:brightness(1.15)}
.ft-top{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:2.5rem 2.4rem;padding-block:3.4rem}
.ft-id{display:grid;justify-items:start;gap:1.1rem;max-width:24rem}
.ft .ft-logo{display:flex;align-items:center;gap:.7rem;font:700 1.3rem var(--font);color:#fff}
/* Le logo est une image carrée sur fond blanc : la pastille doit contenir sa diagonale
   (2 × 1,41 = 2,83 rem) pour que ses angles se fondent dans le blanc au lieu d'en déborder. */
.ft-mark{display:grid;place-items:center;flex:none;width:3rem;height:3rem;background:#fff;border-radius:50%}
.ft-mark img{width:2rem;height:auto}
.ft-id p{font-size:.9375rem}
.ft-soc{display:flex;gap:.6rem;list-style:none;padding:0}
.ft-soc a{display:grid;place-items:center;width:2.4rem;height:2.4rem;border:1px solid rgba(255,255,255,.2);border-radius:50%;transition:background .2s,border-color .2s}
.ft-soc a:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4)}
.sico{width:1.05rem;height:1.05rem;fill:currentColor} /* glyphes de marque : pleins, hors set trait */
.ft-col h2{font-size:1rem;color:#fff}
.ft-col ul{display:grid;gap:.7rem;margin-top:1.3rem;list-style:none;padding:0}
.ft-col a{font-size:.9375rem}
.ft-contact p{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.12);font-size:.9375rem}
.ft-base{background:rgba(0,0,0,.22);border-top:1px solid rgba(255,255,255,.08)}
.ft-base-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.8rem;padding-block:1.3rem;font-size:.875rem}
.ft-base ul{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;list-style:none;padding:0}

/* Menu en tiroir (tablette et mobile) : le panneau glisse de la droite sous un voile encre, le
   burger se mue en croix et reste cliquable par-dessus, le bouton de compte se cale au pied. */
@media(max-width:1000px){
.nav-in{display:flex;justify-content:space-between}
.burger{display:flex;position:relative;z-index:23}
.burger i{transition:translate .3s,rotate .3s,opacity .2s}
.nav.open .burger i:nth-child(1){translate:0 .43rem;rotate:45deg}
.nav.open .burger i:nth-child(2){opacity:0}
.nav.open .burger i:nth-child(3){translate:0 -.43rem;rotate:-45deg}
.nav::before{content:"";position:fixed;inset:0;z-index:21;background:rgba(34,27,78,.42);opacity:0;pointer-events:none;transition:opacity .35s}
.nav.open::before{opacity:1;pointer-events:auto} /* un clic sur le voile referme (script.js) */
.nav-links,.nav-in>.btn{position:fixed;z-index:22;transition:translate .42s cubic-bezier(.32,.72,0,1)}
.nav-links{inset:0 0 0 auto;width:20rem;max-width:85%;display:grid;align-content:start;gap:.35rem;padding:5.2rem 1.6rem 7.5rem;background:#fff;box-shadow:var(--sh2);overflow-y:auto;translate:100% 0}
.nav-links::after{display:none} /* le filet suit une rangée horizontale : sans objet dans le tiroir */
.nav-links a{display:block;padding:.85rem .9rem;border-radius:var(--rs);font-size:1.05rem;font-weight:600;color:var(--ink)}
.nav-links a:hover{background:var(--lav50)}
.nav-links li{opacity:0;translate:12px 0;transition:opacity .25s,translate .25s}
.nav-in>.btn{display:inline-flex;right:1.6rem;bottom:1.6rem;width:16.8rem;max-width:calc(85% - 3.2rem);translate:calc(100% + 1.6rem) 0}
.nav.open :is(.nav-links,.nav-in>.btn){translate:0 0}
.nav.open .nav-links li{opacity:1;translate:0 0}
.nav.open .nav-links li:nth-child(1){transition-delay:.1s}
.nav.open .nav-links li:nth-child(2){transition-delay:.16s}
.nav.open .nav-links li:nth-child(3){transition-delay:.22s}
.nav.open .nav-links li:nth-child(4){transition-delay:.28s}
.nav.open .nav-links li:nth-child(5){transition-delay:.34s}
.nav.open .nav-links li:nth-child(6){transition-delay:.4s}
body.fige{overflow:hidden} /* le fond ne défile pas sous le tiroir ouvert */
}

/* Paliers de largeur, du plus large au plus étroit */
@media(max-width:1280px){
/* Sous cette largeur, les marges ne tiennent plus les mentions sans les écraser contre
   la colonne de lecture. */
.art-deco{display:none}
}
@media(max-width:1200px){
.cours-l{grid-template-columns:repeat(2,minmax(0,1fr))}
.hero-in h1{font-size:2.5rem}
.art-head h1{font-size:2.6rem}
.art-cov img{aspect-ratio:3/1}
}
@media(max-width:1100px){
.wrap{padding-inline:1.9rem}
.hero-img{inset:0 0 0 55%}
/* La colonne de texte se resserre avant de toucher le fondu de la photo : au-delà, les
   dernières lettres se liraient sur la salle d'examen. */
.hero-in{max-width:28rem}
.hero-sign{font-size:1.7rem;right:1.6rem;bottom:1.4rem}
.art-head h1{font-size:2.3rem}
.art-cov img{aspect-ratio:2.6/1}
.ft-news h2{font-size:2.1rem}
}
@media(max-width:900px){
/* La photo passe au-dessus du texte : à cette largeur, une demi-colonne d'image ne montre
   plus qu'une bande où rien n'est lisible. */
.hero-img{position:relative;inset:auto;height:16rem;margin-inline:-1.9rem}
.hero-img::after{background:linear-gradient(to bottom,transparent 55%,rgba(247,245,252,.9))}
/* La signature tenait dans un angle de la photo : sur une bande de seize rem, elle
   passerait sur la salle d'examen au lieu de la signer. */
.hero-sign{display:none}
.hero-in{max-width:none;padding-block:1.8rem 2.6rem}
.hero-pt+.hero-pt{padding-left:0;border-left:0}
.ft-news-in{grid-template-columns:1fr;gap:1.6rem}
.ft-top{grid-template-columns:1fr 1fr;gap:2.2rem}
}
@media(max-width:768px){
.wrap{padding-inline:1.25rem}
.hero-img{margin-inline:-1.25rem;height:13rem}
.hero-in h1{font-size:2rem}
.cours-l{grid-template-columns:1fr}
.tri{margin-left:0}
.art-head h1{font-size:1.85rem}
.art-cov img{aspect-ratio:16/9}
.art-txt{font-size:1rem}
.art-txt h2{font-size:1.4rem}
.ft-news h2{font-size:1.7rem}
/* Footer empilé : tout se centre — identité, réseaux, colonnes de liens et contact */
.ft-top{grid-template-columns:1fr;text-align:center}
.ft-id{justify-items:center;margin-inline:auto}
.ft-soc{justify-content:center}
.ft-base-in,.ft-base ul{justify-content:center;text-align:center}
}
@media(prefers-reduced-motion:reduce){*,::before,::after{animation-duration:.01ms!important;transition-duration:.01ms!important}html{scroll-behavior:auto}}