/* =====================================================================
JETONS — site Adèle Lardinois
=====================================================================
Toute valeur qui se répète, ou qui porte une intention, vit ici.
Changer la charte, c'est changer ce fichier — pas les composants.
Les valeurs sont celles du HTML validé par Adèle, au pixel près.
Ce fichier ne redessine rien : il nomme ce qui existait déjà.
===================================================================== */
/* ---------------------------------------------------------------------
0. Polices, hébergées sur le site
Jusqu'au 19/09 elles venaient de Google Fonts : chaque visite envoyait
l'adresse IP du visiteur à Google. Mêmes fichiers, servis d'ici.
Les déclarations reprennent MOT POUR MOT celles de Google, une par
graisse, seules les adresses changent. Ce n'est pas de la paresse :
Figtree est une police variable, et une plage « 300 900 » aurait été
plus élégante — mais le site ne demandait pas la graisse 700, que 14
règles utilisent. Le navigateur prenait donc la déclaration la plus
proche, 800, et c'est ce rendu-là qu'Adèle a validé. Une plage rendait
un vrai 700, plus maigre : mesuré le 19/09, de 900 à 6 000 pixels
changés par page. Pour passer au vrai 700, c'est une décision de
dessin, pas un détail d'hébergement.
Licence : SIL Open Font License, voir assets/fonts/OFL-*.txt
--------------------------------------------------------------------- */
@font-face{font-family:'Figtree'; font-style:italic; font-weight:800; font-display:swap; src:url("../fonts/figtree-italique-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Figtree'; font-style:italic; font-weight:800; font-display:swap; src:url("../fonts/figtree-italique-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Figtree'; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/figtree-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Figtree'; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/figtree-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Figtree'; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/figtree-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Figtree'; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/figtree-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Figtree'; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/figtree-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Figtree'; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/figtree-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Figtree'; font-style:normal; font-weight:800; font-display:swap; src:url("../fonts/figtree-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Figtree'; font-style:normal; font-weight:800; font-display:swap; src:url("../fonts/figtree-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Figtree'; font-style:normal; font-weight:900; font-display:swap; src:url("../fonts/figtree-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Figtree'; font-style:normal; font-weight:900; font-display:swap; src:url("../fonts/figtree-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Instrument Serif'; font-style:italic; font-weight:400; font-display:swap; src:url("../fonts/instrument-serif-italique-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Instrument Serif'; font-style:italic; font-weight:400; font-display:swap; src:url("../fonts/instrument-serif-italique-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
:root{
/* ---------------------------------------------------------------
1. Palette de la charte
Les quatre couleurs du § 9 du cahier, plus leurs variantes.
--------------------------------------------------------------- */
--nuit:#1C2351;
--nuit-clair:#2A3468;
--abysse:#131735;
--turquoise:#4DA5BA;
--orange:#F05222;
--orange-fonce:#C63D13;
--ambre:#FDB814;
--ambre-clair:#ffc945; /* survol du bouton ambre */
--craie:#F4F2ED;
--brume:#E9E6DF;
--pierre:#D6D2C9;
--ardoise:#5A6073;
--encre:#181C34;
/* Composantes RVB, pour les voiles et les ombres.
Elles rendent explicite ce qui était écrit en dur :
rgba(19,23,53,…) EST l'abysse, rgba(28,35,81,…) EST le nuit. */
--nuit-rvb:28,35,81;
--abysse-rvb:19,23,53;
/* ---------------------------------------------------------------
2. Textes sur fond sombre
La découverte de ce lot : le site utilisait neuf bleus pâles
distincts sur fond nuit, sans qu'aucun ne porte de nom. Ils
forment une échelle, du plus present au plus effacé.
--------------------------------------------------------------- */
--sur-nuit-fort:#fff; /* titres, liens actifs */
--sur-nuit-vif:#E6E9F5; /* listes à filets */
--sur-nuit:#C9CEE4; /* sous-titres de hero, textes de porte */
--sur-nuit-carte:#C7CDE6; /* textes d'une carte mise en avant */
--sur-nuit-doux:#C2C8E0; /* paragraphes courants */
--sur-nuit-discret:#AEB6D8; /* descriptions de ligne */
--sur-abysse:#99A0C4; /* pied de page */
--sur-nuit-faible:#98A0C8; /* mots-clés, mentions de prix */
--sur-nuit-tenu:#8E97C0; /* mots-clés en section nuit */
--sur-nuit-nav:#ffffffd1; /* menu au repos */
--sur-nuit-cote:#ffffff9e; /* mention verticale du hero */
--nuit-surface:#212a5C; /* carte posée sur une section nuit */
/* ---------------------------------------------------------------
3. Filets et voiles sur fond sombre
Même logique : sept blancs transparents, jamais nommés.
--------------------------------------------------------------- */
--filet-nuit:#ffffff2b; /* le filet courant sur fond sombre */
--filet-nuit-doux:#ffffff1f;
--filet-carte:#ffffff24;
--filet-entete:#ffffff1a;
--filet-pied:#ffffff17;
--filet-bouton:#ffffff8c;
--filet-etiquette:#ffffff2e;
--filet-champ-nuit:#ffffff40;
--voile-survol:#ffffff14; /* fond du bouton fantôme au survol */
--voile-etiquette:#00000059; /* fond de l'étiquette photo */
--sur-voile:#ffffffcc;
/* ---------------------------------------------------------------
4. Dégradés d'assombrissement des photos
--------------------------------------------------------------- */
--scrim-gauche:linear-gradient(95deg,
rgba(var(--abysse-rvb),.92) 0%,
rgba(var(--abysse-rvb),.72) 38%,
rgba(var(--abysse-rvb),.28) 68%,
rgba(var(--abysse-rvb),.05) 100%);
--scrim-bas:linear-gradient(0deg,
rgba(var(--abysse-rvb),.94) 0%,
rgba(var(--abysse-rvb),.62) 34%,
rgba(var(--abysse-rvb),.12) 72%,
rgba(var(--abysse-rvb),0) 100%);
--scrim-plat:rgba(var(--abysse-rvb),.62);
--degrade-cta:linear-gradient(104deg, var(--orange) 0%, var(--orange) 42%, var(--ambre) 100%);
--ombre-carte:0 22px 50px rgba(var(--nuit-rvb),.18);
/* ---------------------------------------------------------------
5. Typographie
--------------------------------------------------------------- */
--police:"Figtree", ui-sans-serif, system-ui, sans-serif;
--police-serif:"Instrument Serif", Georgia, serif;
/* Échelle des titres. Chaque cran correspond à un rôle réel dans
la page, pas à une taille abstraite. */
--t-hero:clamp(2.2rem,5vw,4.3rem);
--t-phead:clamp(2.1rem,5vw,4rem);
--t-section:clamp(1.9rem,4.2vw,3.4rem);
--t-cta:clamp(1.8rem,3.6vw,3rem);
--t-porte:clamp(1.7rem,3vw,2.6rem);
--t-formule:clamp(1.6rem,3vw,2.3rem);
--t-carte:clamp(1.25rem,1.9vw,1.6rem);
--t-ligne:clamp(1.15rem,1.9vw,1.5rem);
--t-article:clamp(1.05rem,1.8vw,1.35rem);
--t-prix:clamp(1.9rem,3vw,2.5rem);
--t-prix-formule:clamp(1.5rem,2.6vw,2rem);
--t-chiffre:clamp(2rem,3.4vw,2.8rem);
--t-finisher:clamp(1.3rem,2.9vw,2.3rem);
--t-signature:clamp(1.3rem,2.4vw,2rem);
--t-citation:clamp(1.2rem,2.1vw,1.7rem);
--t-besoin:clamp(1rem,1.7vw,1.3rem);
--t-sous-titre:clamp(1rem,1.5vw,1.2rem);
--t-exergue:1.45rem;
--t-exergue-large:1.35rem;
--t-intro:1.15rem;
/* Interlettrage : le site en utilise deux familles, l'une négative
pour les gros titres, l'autre positive pour les libellés capitales. */
--tracking-titre:-0.018em;
--tracking-serre:-0.025em;
--tracking-libelle:0.14em;
--tracking-sur-titre:0.2em;
--tracking-kicker:0.16em;
/* ---------------------------------------------------------------
6. Espacement
Douze valeurs distinctes de marge supérieure traînaient en ligne
dans le HTML. Elles sont conservées à l'identique, mais nommées :
les rationaliser devient une décision, plus un chantier.
--------------------------------------------------------------- */
--e-10:10px; --e-12:12px; --e-18:18px; --e-20:20px;
--e-22:22px; --e-26:26px; --e-28:28px; --e-30:30px;
--e-32:32px; --e-34:34px; --e-38:38px; --e-44:44px;
/* 26/10 — 116 px en haut ET en bas, c'est 232 px de vide entre deux
sections : un quart d'un écran de portable, sans rien dedans.
Adèle : « y a des espaces super grands ». Ramené à 92. */
--pad-section:clamp(56px,6vw,92px);
--pad-cta:clamp(48px,6vw,84px);
--pad-porte:clamp(28px,3.4vw,52px);
--pad-phead:clamp(38px,5vw,64px);
--gap-split:clamp(28px,5vw,72px);
--h-porte:clamp(440px,54vw,620px);
--h-phead:clamp(340px,42vw,460px);
--h-phead-court:clamp(280px,32vw,380px);
--h-hero:min(100svh,880px);
/* ---------------------------------------------------------------
7. Disposition
--------------------------------------------------------------- */
--largeur-max:1280px;
--gouttiere:36px;
--nav-h:78px;
--rayon-bouton:2px; /* le seul rayon du site : § 9, « rayon à zéro » */
/* ---------------------------------------------------------------
8. Mouvement
--------------------------------------------------------------- */
--transi-entete:.25s ease;
--transi-bouton:.18s ease;
--transi-ligne:.2s ease;
}
/* La gouttière se resserre sur téléphone. Redéfinir le jeton plutôt
que le composant : un seul endroit à connaître. */
@media (max-width:760px){
:root{ --gouttiere:20px; }
}
/* ---------------------------------------------------------------------
POINTS DE RUPTURE
Les variables CSS ne fonctionnent pas dans une media query : la liste
est ici pour mémoire, et doit rester synchronisée avec composants.css.
1080px le menu principal bascule en burger · cartes b4 → 2 colonnes
980px cartes b3 et b2 → 1 colonne
900px colonnes jumelées → 1 colonne · mention verticale masquée
860px piliers → 2 colonnes · colonnes 3 → 1
820px lignes éditoriales et paliers → 1 colonne
800px les deux portes → 1 colonne
760px gouttière à 20px · grille de formule → 1 colonne
720px bandeau de chiffres → 1 colonne
640px articles → 1 colonne
620px cartes b4 → 1 colonne
560px logo réduit
520px ligne à deux champs du formulaire → 1 colonne
480px piliers → 1 colonne
Treize points de rupture pour huit pages, c'est beaucoup. Les
rationaliser déplacerait des pixels : c'est une décision à prendre
séparément, pas un effet de bord de ce lot.
--------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
Très petits écrans (moins de 360 px)
Les tailles de titres ont des minimums fixes, pensés pour 375 px.
Sur 320 px, « D'ACCOMPAGNEMENT » en titre de section dépassait sa
ligne de 48 px. Ici elles suivent la largeur de l'écran, à 95 % de leur
proportion à 375 px — la marge laisse passer un mot de quinze
majuscules. Rien ne change à 360 px et au-dessus.
--------------------------------------------------------------------- */
@media (max-width:359px){
:root{
--t-hero:8.92vw; /* 35.2 px à 375 */
--t-phead:8.51vw; /* 33.6 px à 375 */
--t-section:7.70vw; /* 30.4 px à 375 */
--t-cta:7.30vw; /* 28.8 px à 375 */
--t-porte:6.89vw; /* 27.2 px à 375 */
--t-formule:6.49vw; /* 25.6 px à 375 */
--t-prix:7.70vw; /* 30.4 px à 375 */
--t-chiffre:8.11vw; /* 32.0 px à 375 */
--t-prix-formule:6.08vw; /* 24.0 px à 375 */
--t-finisher:5.27vw; /* 20.8 px à 375 */
}
}
/* =====================================================================
COMPOSANTS — site Adèle Lardinois
=====================================================================
Mêmes sélecteurs, même ordre et mêmes valeurs calculées que le HTML
validé par Adèle : seules les valeurs littérales ont été remplacées
par les jetons de jetons.css. Le § 9 du cahier demande de ne pas
réécrire ce CSS — il n'a pas été réécrit, il a été nommé.
Une seule règle a été ajoutée, signalée en commentaire : elle résout
une collision de spécificité que le HTML rattrapait avec cinq
attributs style=.
===================================================================== */
/* ---------------------------------------------------------------------
NOTE SUR LA GRAISSE 700
La requête Google Fonts ne liste pas le 700 (400, 500, 600, 800, 900).
On pouvait croire que le navigateur remontait au 800 — c'est faux :
Google sert une police variable, et Chrome interpole un vrai 700 sur
l'axe wght. Mesuré : passer les déclarations à 800 déplace 239 377
pixels, et ajouter 0,700 à la requête en déplace 110 248.
Autrement dit, `font-weight:700` produit bien un 700, et c'est ce
qu'Adèle a validé. On ne touche ni au CSS ni à la requête.
Vérifié le 17/09.
--------------------------------------------------------------------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* La taille de référence. Tout le site exprime sa typographie en rem et
sa mise en page en pixels : relever cette seule valeur agrandit les
textes sans déplacer une seule bordure. Sur un grand écran, 16 px
d'origine se lisaient petit — c'est le reproche d'Adèle le 26/10,
« de façon générale, sur tous les onglets ».
Le site, l'espace membre et l'administration en profitent ensemble. */
:root{font-size:16px;}
@media (min-width:1100px){:root{font-size:17px;}}
@media (min-width:1600px){:root{font-size:18px;}}
body{
margin:0; background:var(--craie); color:var(--encre);
font-family:var(--police);
font-size:1rem; line-height:1.65; -webkit-font-smoothing:antialiased;
/* Un mot plus long que sa ligne est coupé au lieu de déborder. Sans
effet tant que tout tient — mais à 320 px, « D'ACCOMPAGNEMENT » en
titre élargissait la page entière de 28 px et poussait le burger
hors de l'écran (mesuré le 19/09). Les titres se saisissent dans
l'admin : le prochain mot long est une question de temps. */
overflow-wrap:break-word;
}
/* Sur les plus petits écrans, la coupure se fait à la française, à une
syllabe (« D'ACCOM-PAGNEMENT »), plutôt qu'à la dernière lettre qui
tient. Réservé à moins de 360 px : au-delà, les retours à la ligne
restent exactement ceux de la maquette validée. */
@media (max-width:359px){
h1, h2, h3, .t{-webkit-hyphens:auto; hyphens:auto;}
}
h1,h2,h3,h4{margin:0;}
p{margin:0 0 16px;}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
.t{
font-weight:900; text-transform:uppercase; line-height:0.95;
letter-spacing:var(--tracking-titre); text-wrap:balance;
}
.serif{font-family:var(--police-serif); font-style:italic; font-weight:400;}
.num{font-variant-numeric:tabular-nums;}
.or{color:var(--orange);}
.wrap{max-width:var(--largeur-max); margin:0 auto; padding-inline:var(--gouttiere);}
/* la gouttière mobile est redéfinie dans jetons.css */
.eyebrow{
font-size:0.7rem; letter-spacing:var(--tracking-sur-titre); text-transform:uppercase; font-weight:700;
color:var(--orange); display:flex; align-items:center; gap:12px; margin-bottom:18px;
}
.eyebrow::before{content:""; width:34px; height:2px; background:var(--orange); flex:none;}
.eyebrow.pale{color:var(--ambre);} .eyebrow.pale::before{background:var(--ambre);}
/* ---------- scenes (placeholders photo) ---------- */
.sprite{position:absolute; width:0; height:0; overflow:hidden;}
.scene{
position:absolute; inset:0; width:100%; height:100%;
/* object-fit:cover rend exactement ce que faisait background-size:cover,
mais sur une vraie — ce qui débloque srcset, le chargement
différé et fetchpriority. */
object-fit:cover; object-position:center;
background-size:cover; background-position:center; background-repeat:no-repeat;
}
.scene-wrap picture{display:contents;}
.scene-wrap{position:absolute; inset:0; overflow:hidden;}
.photo-tag{
position:absolute; left:16px; bottom:16px; z-index:4;
font-size:0.6rem; letter-spacing:0.14em; text-transform:uppercase; font-weight:600;
color:var(--sur-voile); background:var(--voile-etiquette); border:1px solid var(--filet-etiquette);
padding:5px 10px;
/* backdrop-filter retiré au lot 11 : il force une couche de
composition supplémentaire à chaque image, pour un flou de 3 px
derrière un fond déjà opaque à 35 %. Invisible, et coûteux. */
}
.scrim-left{position:absolute; inset:0; z-index:2; background:var(--scrim-gauche);}
.scrim-up{position:absolute; inset:0; z-index:2; background:var(--scrim-bas);}
.scrim-flat{position:absolute; inset:0; z-index:2; background:var(--scrim-plat);}
/* ---------- header ---------- */
header.site{
position:fixed; top:0; left:0; right:0; z-index:50; height:var(--nav-h);
display:flex; align-items:center; transition:background var(--transi-entete), border-color var(--transi-entete);
background:transparent; border-bottom:1px solid transparent;
}
header.site[data-solid="true"]{background:var(--nuit); border-bottom-color:var(--filet-entete);}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%;}
/* flex:none — sans ça, le logo est le premier à céder quand l'en-tête
est à l'étroit : sa largeur tombe à zéro et il disparaît sans bruit.
Constaté le 12/10 en ajoutant le bouton de l'espace membre. */
.brand{flex:none;}
.brand img{height:46px; width:auto;}
@media (max-width:560px){.brand img{height:38px;}}
nav.main{display:flex; gap:18px; align-items:center;}
nav.main a{
font-size:0.76rem; letter-spacing:0.13em; text-transform:uppercase; font-weight:600;
color:var(--sur-nuit-nav); padding:6px 0; border-bottom:2px solid transparent; white-space:nowrap;
}
nav.main a:hover{color:var(--sur-nuit-fort);}
nav.main a.active{color:var(--sur-nuit-fort); border-bottom-color:var(--orange);}
@media (max-width:1200px){nav.main{display:none;}}
/* L'entrée de l'espace membre.
Neuf rubriques dans le menu, il n'y avait pas de place pour une
dixième — et ce n'en est pas une : on ne « visite » pas son espace,
on s'y connecte. D'où un bouton, posé à part, qui se lit comme une
action et non comme une page de plus. */
.lien-espace{
display:inline-flex; align-items:center; gap:8px; flex:none; white-space:nowrap;
padding:9px 16px; border:1px solid var(--filet-bouton); border-radius:2px;
font-size:0.7rem; letter-spacing:0.13em; text-transform:uppercase; font-weight:700;
color:var(--sur-nuit-fort); transition:background var(--transi-bouton), border-color var(--transi-bouton);
}
.lien-espace:hover{background:var(--voile-survol); border-color:var(--sur-nuit-fort);}
.lien-espace svg{width:14px; height:14px; flex:none;}
@media (max-width:1200px){.lien-espace{display:none;}}
/* Dans le menu déroulant, elle se détache du reste par un filet. */
.mobile-nav .lien-espace{
display:inline-flex; align-self:flex-start; margin-top:22px;
font-size:0.8rem; padding:13px 20px; border-color:var(--sur-nuit-fort);
}
.burger{display:none; background:none; border:none; padding:8px; }
.burger span{display:block; width:26px; height:2px; background:var(--sur-nuit-fort); margin:5px 0;}
@media (max-width:1200px){.burger{display:block;}}
/* Le menu déroulant doit pouvoir défiler.
Dix entrées à 1,5 rem sur un écran de 568 px : le contenu dépassait,
et comme rien n'autorisait le défilement, les dernières rubriques
étaient tout simplement inatteignables. Signalé par Adèle le 26/10 —
« quand on sélectionne le menu on ne peut pas scroller ».
`safe center` centre tant que ça tient, et bascule en haut dès que ça
déborde : centré + débordement, le haut de la liste passe au-dessus
de l'écran et devient inaccessible même en défilant. */
.mobile-nav{
position:fixed; inset:0; z-index:49; background:var(--nuit); display:none;
flex-direction:column; gap:6px; padding:92px 32px 48px;
justify-content:center;
justify-content:safe center;
overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
.mobile-nav.open{display:flex;}
.mobile-nav a{
font-weight:900; text-transform:uppercase; font-size:1.5rem; color:var(--sur-nuit-fort);
padding:12px 0; border-bottom:1px solid var(--filet-nuit-doux); letter-spacing:-0.01em;
}
.mobile-nav a.active{color:var(--orange);}
/* Écran court : on resserre plutôt que de faire défiler pour rien. */
@media (max-height:700px){
.mobile-nav{padding:80px 28px 40px;}
.mobile-nav a{font-size:1.25rem; padding:9px 0;}
.mobile-nav .lien-espace{margin-top:16px;}
}
/* ---------- pages ---------- */
.page{display:none;}
.page.active{display:block;}
/* ---------- hero ---------- */
.hero{position:relative; min-height:var(--h-hero); display:flex; align-items:flex-end; overflow:hidden;}
.hero .inner{position:relative; z-index:3; width:100%; padding-block:0 84px; padding-top:calc(var(--nav-h) + 60px);}
.hero h1{font-size:var(--t-hero); color:var(--sur-nuit-fort); max-width:19ch;}
.hero .sub{color:var(--sur-nuit); font-size:var(--t-sous-titre); max-width:44ch; margin-top:26px;}
.hero .sig{display:block; color:var(--sur-nuit-fort); font-size:var(--t-signature); margin-top:26px;}
.hero .actions{display:flex; gap:14px; margin-top:36px; flex-wrap:wrap;}
/* La mention verticale du hero (« Plus loin / Plus lucide / Toujours toi »).
Elle était en blanc translucide : sur une photo claire, elle disparaissait.
Blanc plein et ombre portée, comme la maquette du 22/09 (§ 2.7). */
.hero .side{
position:absolute; right:var(--gouttiere); bottom:84px; z-index:3; text-align:right;
font-size:0.72rem; letter-spacing:0.22em; text-transform:uppercase; line-height:2.1;
color:#fff; font-weight:700; text-shadow:0 1px 12px rgba(9,12,30,.65);
}
@media (max-width:900px){.hero .side{display:none;}}
.btn{
display:inline-flex; align-items:center; gap:10px; padding:16px 26px;
font-size:0.76rem; letter-spacing:0.14em; text-transform:uppercase; font-weight:700;
background:var(--orange); color:var(--sur-nuit-fort); border:2px solid var(--orange); border-radius:var(--rayon-bouton);
transition:background var(--transi-bouton), border-color var(--transi-bouton), color var(--transi-bouton);
}
.btn:hover{background:var(--orange-fonce); border-color:var(--orange-fonce);}
.btn.ghost{background:transparent; border-color:var(--filet-bouton); color:var(--sur-nuit-fort);}
.btn.ghost:hover{background:var(--voile-survol); border-color:var(--sur-nuit-fort);}
.btn.navy{background:var(--nuit); border-color:var(--nuit);}
.btn.navy:hover{background:var(--abysse); border-color:var(--abysse);}
.btn.line{background:transparent; border-color:var(--nuit); color:var(--nuit);}
.btn.line:hover{background:var(--nuit); color:var(--sur-nuit-fort);}
.btn .arw{transition:transform var(--transi-bouton);}
.btn:hover .arw{transform:translateX(4px);}
/* ---------- sections ---------- */
.sec{padding-block:var(--pad-section);}
.sec.craie{background:var(--craie);}
.sec.brume{background:var(--brume);}
.sec.nuit{background:var(--nuit); color:var(--sur-nuit-fort); position:relative; overflow:hidden;}
.sec.nuit p{color:var(--sur-nuit-doux);}
.sec h2.t{font-size:var(--t-section);}
.lead{font-size:1.12rem; max-width:62ch; color:var(--ardoise);}
.sec.nuit .lead{color:var(--sur-nuit-doux);}
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--gap-split); align-items:center;}
@media (max-width:900px){.split{grid-template-columns:1fr;}}
.split.wide-left{grid-template-columns:minmax(0,7fr) minmax(0,5fr);}
@media (max-width:900px){.split.wide-left{grid-template-columns:1fr;}}
.frame{position:relative; aspect-ratio:4/5; overflow:hidden;}
.frame.land{aspect-ratio:16/10;}
.frame .quote{
position:absolute; right:24px; top:30px; z-index:3; color:var(--sur-nuit-fort);
font-size:var(--t-citation); text-align:right; max-width:11ch; line-height:1.25;
}
.frame .quote::after{content:""; display:block; width:40px; height:2px; background:var(--orange); margin:16px 0 0 auto;}
.kw{
display:flex; gap:22px; flex-wrap:wrap; margin-top:30px;
font-size:0.66rem; letter-spacing:0.2em; text-transform:uppercase; font-weight:600; color:var(--ardoise);
}
.sec.nuit .kw{color:var(--sur-nuit-tenu);}
/* piliers */
.pillars{display:grid; grid-template-columns:repeat(4,1fr); margin-top:54px; border-top:1px solid var(--filet-nuit);}
@media (max-width:860px){.pillars{grid-template-columns:1fr 1fr;}}
@media (max-width:480px){.pillars{grid-template-columns:1fr;}}
.pillars > div{padding:28px 30px; border-right:1px solid var(--filet-nuit);}
.pillars > div:first-child{padding-left:0;}
.pillars > div:last-child{border-right:none;}
@media (max-width:860px){.pillars > div:nth-child(2n){border-right:none;} .pillars > div:nth-child(2n+1){padding-left:0;}}
@media (max-width:480px){.pillars > div{border-right:none; border-bottom:1px solid var(--filet-nuit); padding-left:0;}}
.pillars .n{font-size:0.7rem; font-weight:800; color:var(--ambre); letter-spacing:0.1em;}
.pillars h3{font-size:1.15rem; font-weight:900; text-transform:uppercase; margin:10px 0 8px; letter-spacing:-0.01em;}
.pillars p{font-size:0.92rem; margin:0;}
/* deux portes */
.doors{display:grid; grid-template-columns:1fr 1fr; }
@media (max-width:800px){.doors{grid-template-columns:1fr;}}
.door{position:relative; min-height:var(--h-porte); display:flex; align-items:flex-end; overflow:hidden;}
.door .inner{position:relative; z-index:3; padding:var(--pad-porte); width:100%;}
.door h3{font-size:var(--t-porte); color:var(--sur-nuit-fort);}
.door p{color:var(--sur-nuit); max-width:34ch; margin-top:14px; font-size:0.98rem;}
.door .kw{color:var(--sur-nuit-faible); margin-top:22px; gap:18px;}
/* bandeau chiffres */
.facts{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--pierre);}
@media (max-width:720px){.facts{grid-template-columns:1fr;}}
.facts > div{padding:34px 34px; border-right:1px solid var(--pierre);}
.facts > div:first-child{padding-left:0;}
.facts > div:last-child{border-right:none;}
@media (max-width:720px){.facts > div{border-right:none; border-bottom:1px solid var(--pierre); padding-inline:0;}}
.facts .big{font-size:var(--t-chiffre); font-weight:900; letter-spacing:-0.02em; color:var(--nuit);}
.facts .lbl{font-size:0.86rem; color:var(--ardoise); margin-top:6px; max-width:26ch;}
/* bande CTA */
.cta-band{position:relative; overflow:hidden; background:var(--degrade-cta); color:var(--sur-nuit-fort);}
.cta-band .inner{position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:36px; flex-wrap:wrap; padding-block:var(--pad-cta);}
.cta-band h2{font-size:var(--t-cta); max-width:16ch;}
.cta-band .peak{position:absolute; right:-2%; bottom:-14%; width:min(620px,58%); opacity:.17; z-index:1;}
/* footer */
footer.site{background:var(--abysse); color:var(--sur-abysse); padding-block:56px 40px;}
footer.site .top{display:flex; justify-content:space-between; gap:34px; flex-wrap:wrap; align-items:flex-start;}
footer.site img{height:52px;}
footer.site .fnav{display:flex; gap:24px; flex-wrap:wrap; font-size:0.74rem; letter-spacing:0.12em; text-transform:uppercase; font-weight:600;}
footer.site .fnav a:hover{color:var(--sur-nuit-fort);}
footer.site .bottom{margin-top:44px; padding-top:22px; border-top:1px solid var(--filet-pied); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:0.8rem;}
footer.site .sig{color:var(--sur-nuit-fort);}
/* Liens légaux : sur la ligne du copyright, séparés par un point. Sur
téléphone ils passent ensemble à la ligne — sinon le retour à la ligne
tombait au milieu et une ligne commençait par « · ». Mesuré le 19/09 :
ils tiennent sur la ligne jusqu'à 400 px ; 480 (point de rupture déjà
utilisé par le site) laisse de la marge à une mention plus longue. */
footer.site .gauche{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 0;}
footer.site .legaux{display:flex; flex-wrap:wrap; gap:6px 0;}
footer.site .legaux a{text-decoration:underline; text-underline-offset:3px;}
footer.site .legaux a:hover{color:var(--sur-nuit-fort);}
footer.site .legaux a::before{content:"·" / ""; display:inline-block; margin:0 10px; text-decoration:none;}
@media (max-width:480px){
footer.site .legaux{flex-basis:100%;}
footer.site .legaux a:first-child::before{display:none;}
}
/* ---------- page header (pages intérieures) ---------- */
.phead{position:relative; min-height:var(--h-phead); display:flex; align-items:flex-end; overflow:hidden;}
.phead .inner{position:relative; z-index:3; width:100%; padding-block:0 var(--pad-phead); padding-top:calc(var(--nav-h) + 60px);}
.phead h1{font-size:var(--t-phead); color:var(--sur-nuit-fort); max-width:18ch;}
.phead .sub{color:var(--sur-nuit); max-width:52ch; margin-top:18px; font-size:1.02rem;}
/* ---------- lignes éditoriales (offres, listes) ---------- */
.rows{border-top:1px solid var(--pierre);}
.sec.nuit .rows{border-color:var(--filet-nuit);}
.row-item{
display:grid; grid-template-columns:minmax(0,4fr) minmax(0,5fr) auto; gap:32px; align-items:center;
padding:26px 0; border-bottom:1px solid var(--pierre); transition:transform var(--transi-ligne);
}
.sec.nuit .row-item{border-color:var(--filet-nuit);}
.row-item:hover{transform:translateX(10px);}
@media (max-width:820px){.row-item{grid-template-columns:1fr; gap:10px; align-items:start;}}
.row-item h3{font-size:var(--t-ligne); font-weight:900; text-transform:uppercase; letter-spacing:-0.01em;}
.row-item .desc{font-size:0.94rem; color:var(--ardoise);}
.sec.nuit .row-item .desc{color:var(--sur-nuit-discret);}
.row-item .price{font-size:1.2rem; font-weight:900; color:var(--orange); white-space:nowrap; text-align:right;}
/* listes à filets */
.needs{margin:34px 0 0; padding:0; list-style:none; border-top:1px solid var(--pierre);}
.needs li{
padding:18px 0; border-bottom:1px solid var(--pierre);
font-size:var(--t-besoin); font-weight:500; color:var(--encre); max-width:34ch;
}
.sec.nuit .needs{border-color:var(--filet-nuit);} .sec.nuit .needs li{border-color:var(--filet-nuit); color:var(--sur-nuit-vif);}
.needs.compact li{font-size:0.98rem; font-weight:400; color:var(--ardoise); padding:13px 0; max-width:46ch;}
/* Collision de spécificité : `.sec.nuit .needs li` (0,3,1) l'emportait sur
`.needs.compact li` (0,2,1) et imposait --sur-nuit-vif. Le HTML validé
corrigeait le tir avec cinq attributs style=. Cette règle (0,4,1) règle
le conflit là où il se pose, et les styles en ligne disparaissent. */
.sec.nuit .needs.compact li{color:var(--sur-nuit-doux);}
/* ---------- liste pleine largeur (sans photo) ----------
Deux colonnes, un repère orange par ligne, et la phrase de conclusion
qui cesse d'être une colonne de 24 caractères perdue à gauche.
Demandé par Adèle le 26/10 : « tout est mis sur la gauche, ça manque
de lisibilité, mets de la couleur orange ou des points ». */
.liste-large .needs{
display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
column-gap:clamp(32px,4vw,64px); border-top:none; margin-top:28px;
}
.liste-large .needs li{
max-width:none; border-bottom:none; border-top:1px solid var(--pierre);
padding:16px 0 16px 26px; position:relative;
}
/* Le repère : le même trait orange que les listes d'inclusions des
cartes d'offre, pour que le site ne parle pas deux langues. */
.liste-large .needs li::before{
content:""; position:absolute; left:0; top:calc(0.82em + 16px);
width:11px; height:2px; background:var(--orange);
}
.sec.nuit .liste-large .needs li{border-top-color:var(--filet-nuit);}
.liste-large .exergue{
max-width:50ch; margin-top:40px; padding:22px 0 22px 26px;
border-left:3px solid var(--orange);
}
@media (max-width:760px){
.liste-large .needs{grid-template-columns:1fr;}
.liste-large .exergue{padding-left:20px;}
}
/* colonnes 3 (avant/pendant/après) */
.cols3{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--pierre); margin-top:44px;}
@media (max-width:860px){.cols3{grid-template-columns:1fr;}}
.cols3 > div{padding:30px 34px 34px; border-right:1px solid var(--pierre);}
.cols3 > div:first-child{padding-left:0;}
.cols3 > div:last-child{border-right:none;}
@media (max-width:860px){.cols3 > div{border-right:none; border-bottom:1px solid var(--pierre); padding-inline:0;}}
.cols3 h3{font-size:1.1rem; font-weight:900; text-transform:uppercase; letter-spacing:-0.01em; margin-bottom:14px;}
.cols3 ul{margin:0; padding:0; list-style:none;}
.cols3 li{font-size:0.94rem; color:var(--ardoise); padding:6px 0 6px 18px; position:relative;}
.cols3 li::before{content:""; position:absolute; left:0; top:15px; width:8px; height:1px; background:var(--orange);}
/* détail formule */
.formula{border-top:2px solid var(--nuit); padding-top:36px; margin-top:64px;}
.formula .head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:26px;}
.formula h3{font-size:var(--t-formule);}
.formula .price{font-size:var(--t-prix-formule); font-weight:900; color:var(--orange); white-space:nowrap;}
.formula .price small{display:block; font-size:0.72rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--ardoise); text-align:right; margin-top:2px;}
.fgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 52px;}
@media (max-width:760px){.fgrid{grid-template-columns:1fr;}}
.fblock h4{font-size:0.7rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--orange); font-weight:700; margin-bottom:10px;}
.fblock p{font-size:0.96rem; color:var(--ardoise); margin:0;}
.fblock ul{margin:0; padding:0; list-style:none;}
.fblock li{font-size:0.96rem; color:var(--ardoise); padding:7px 0 7px 20px; position:relative; border-top:1px solid var(--pierre);}
.fblock li:first-child{border-top:none;}
.fblock li::before{content:""; position:absolute; left:0; top:17px; width:9px; height:1px; background:var(--orange);}
/* ---------- blocs d'offre ---------- */
.blocks{display:grid; gap:24px; margin-top:52px; align-items:stretch;}
.blocks.b2{grid-template-columns:repeat(2,minmax(0,1fr));}
.blocks.b3{grid-template-columns:repeat(3,minmax(0,1fr));}
.blocks.b4{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:1080px){.blocks.b4{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:980px){.blocks.b3{grid-template-columns:1fr;} .blocks.b2{grid-template-columns:1fr;}}
@media (max-width:620px){.blocks.b4{grid-template-columns:1fr;}}
.blk{
background:var(--sur-nuit-fort); border:1px solid var(--pierre); border-top:4px solid var(--orange);
padding:34px 30px 32px; display:flex; flex-direction:column; position:relative;
}
.sec.nuit .blk{background:var(--nuit-surface); border-color:var(--filet-nuit-doux); color:var(--sur-nuit-fort);}
.sec.nuit .blk .desc, .sec.nuit .blk li{color:var(--sur-nuit-doux);}
.sec.nuit .blk li{border-color:var(--filet-nuit-doux);}
.blk.feat{background:var(--nuit); border-color:var(--nuit); border-top-color:var(--ambre); color:var(--sur-nuit-fort); box-shadow:var(--ombre-carte);}
.blk.feat .desc, .blk.feat li{color:var(--sur-nuit-carte);}
.blk.feat li{border-color:var(--filet-carte);}
.blk.feat li::before{background:var(--ambre);}
.blk .badge{
position:absolute; top:-15px; left:28px; background:var(--ambre); color:var(--nuit);
font-size:0.6rem; letter-spacing:0.16em; text-transform:uppercase; font-weight:800; padding:8px 14px;
}
.blk .kicker{font-size:0.64rem; letter-spacing:0.16em; text-transform:uppercase; font-weight:700; color:var(--orange); margin-bottom:10px;}
.blk.feat .kicker{color:var(--ambre);}
.blk h3{font-size:var(--t-carte); font-weight:900; text-transform:uppercase; letter-spacing:-0.015em; line-height:1.05;}
.blk .for{font-size:0.86rem; color:var(--ardoise); margin-top:10px; min-height:2.6em;}
.blk.feat .for{color:var(--sur-nuit-faible);}
.sec.nuit .blk .for{color:var(--sur-nuit-faible);}
.blk .price{font-size:var(--t-prix); font-weight:900; color:var(--orange); margin:22px 0 2px; letter-spacing:var(--tracking-serre); line-height:1;}
.blk.feat .price{color:var(--ambre);}
.blk .per{font-size:0.64rem; letter-spacing:0.16em; text-transform:uppercase; font-weight:700; color:var(--ardoise);}
/* Le second prix d'une formule qui en a deux : même graisse, moins d'air
au-dessus, pour qu'on lise « deux tarifs » et non « deux formules ». */
.blk .price.second{margin-top:14px;}
.blk.feat .per, .sec.nuit .blk .per{color:var(--sur-nuit-faible);}
.blk ul{list-style:none; margin:26px 0 0; padding:0; flex:1;}
.blk li{font-size:0.92rem; color:var(--ardoise); padding:11px 0 11px 20px; position:relative; border-top:1px solid var(--pierre);}
.blk li:first-child{border-top:none;}
.blk li::before{content:""; position:absolute; left:0; top:21px; width:9px; height:1px; background:var(--orange);}
.blk .act{margin-top:28px;}
.blk .act .btn{width:100%; justify-content:center;}
.blk.feat .act .btn{background:var(--ambre); border-color:var(--ambre); color:var(--nuit);}
.blk.feat .act .btn:hover{background:var(--ambre-clair); border-color:var(--ambre-clair);}
/* ---------- finisher ---------- */
.finisher{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 20px; margin-top:34px;}
.finisher span{font-size:var(--t-finisher); font-weight:900; text-transform:uppercase; letter-spacing:-0.02em; color:var(--nuit);}
.finisher i{color:var(--orange); font-style:normal; font-size:1.4rem; line-height:1;}
.sec.nuit .finisher span{color:var(--sur-nuit-fort);}
.fin-list{margin-top:10px; width:100%;}
.fin-list .r{display:flex; justify-content:space-between; align-items:baseline; gap:18px; padding:15px 0; border-bottom:1px solid var(--pierre);}
.fin-list .r span{font-size:1rem;}
.fin-list .r b{font-size:0.66rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--orange); font-weight:800;}
/* paliers prépa mentale */
.tiers{margin-top:46px; border-top:1px solid var(--pierre);}
.tier{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,5fr) auto; gap:32px; padding:30px 0; border-bottom:1px solid var(--pierre); align-items:start;}
@media (max-width:820px){.tier{grid-template-columns:1fr; gap:14px;}}
.tier .name{font-size:1.4rem; font-weight:900; text-transform:uppercase; letter-spacing:-0.01em;}
.tier .for{font-size:0.82rem; color:var(--ardoise); margin-top:4px;}
.tier dl{margin:0; display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr); gap:12px 26px; align-items:baseline;}
.tier dt{font-size:0.64rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ardoise); font-weight:700; margin:0; white-space:nowrap;}
.tier dd{margin:0; font-size:0.92rem;}
.tier .price{font-size:1.6rem; font-weight:900; color:var(--orange); white-space:nowrap;}
.tier .price small{display:block; font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ardoise); font-weight:600;}
.ast{color:var(--orange); font-weight:700;}
.footnote{margin-top:22px; font-size:0.82rem; color:var(--ardoise); max-width:70ch;}
/* à propos */
.credlist{margin:0; padding:0; list-style:none;}
.credlist li{padding:11px 0; border-top:1px solid var(--pierre); font-size:0.94rem; color:var(--ardoise);}
.credlist li:first-child{border-top:none;}
.credlist li b{color:var(--encre); font-weight:600;}
.restab{width:100%; border-collapse:collapse; margin-top:10px;}
.restab td{padding:13px 0; border-bottom:1px solid var(--pierre); font-size:0.95rem;}
.restab td:last-child{text-align:right; font-weight:800; color:var(--orange);}
/* ---------- portrait (À propos) ---------- */
/* Repris de la maquette. Le cadre porte le rapport et le recadrage ;
l'image, elle, est une .scene comme toutes les photos du site, donc
posée en absolu — d'où le position:relative sur le cadre. */
.portrait{position:relative; margin:0; background:#fff; border:1px solid var(--pierre); overflow:hidden;}
.portrait .cadre{position:relative; aspect-ratio:4/5;}
.portrait .cadre picture{display:contents;}
.portrait .legende{
position:absolute; left:0; right:0; bottom:0; z-index:2;
background:linear-gradient(0deg, rgba(19,23,53,.92) 0%, rgba(19,23,53,.62) 55%, rgba(19,23,53,0) 100%);
color:#fff; padding:30px 26px 24px; text-align:center;
}
.portrait .legende .n{font-size:1.35rem; font-weight:900; text-transform:uppercase; letter-spacing:-.01em;}
.portrait .legende .q{
font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
color:var(--ambre); font-weight:700; margin-top:8px; max-width:none; line-height:1.6;
}
@media (max-width:900px){.portrait{max-width:440px;}}
/* ressources — le blog en deux colonnes : les billets, les récits */
.blog-colonnes{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:clamp(32px, 5vw, 64px); align-items:start;}
.blog-col .eyebrow{margin-bottom:14px;}
.arts{border-top:1px solid var(--pierre);}
.art{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:20px; align-items:center; padding:18px 0; border-bottom:1px solid var(--pierre); transition:transform var(--transi-ligne);}
.art:hover{transform:translateX(10px);}
/* La vignette est un cadre à dimensions fixes ; l'image le remplit en
position absolue, comme toutes les photos du site (.scene). */
.art .couv{position:relative; width:112px; height:84px; flex:none; overflow:hidden; border-radius:3px; background:var(--brume);}
.art .couv picture, .recit .couv picture{display:contents;}
.art .cat{display:block; font-size:0.64rem; letter-spacing:0.16em; text-transform:uppercase; font-weight:700; color:var(--orange); margin-bottom:4px;}
.art h3{font-size:var(--t-article); font-weight:800; text-transform:none; letter-spacing:-0.01em;}
.art .go{color:var(--ardoise); font-size:1.1rem;}
/* Un récit est une pièce longue : il a droit à sa carte, pas à une ligne. */
.recits{display:flex; flex-direction:column; gap:22px;}
.recit{display:block; background:#fff; border:1px solid var(--pierre); border-radius:4px; overflow:hidden; transition:transform var(--transi-ligne), border-color var(--transi-ligne);}
.recit:hover{transform:translateY(-3px); border-color:var(--ardoise);}
.recit .couv{position:relative; display:block; width:100%; aspect-ratio:16/10; overflow:hidden; background:var(--brume);}
.recit .cat{display:block; padding:18px 20px 0; font-size:0.64rem; letter-spacing:0.16em; text-transform:uppercase; font-weight:700; color:var(--orange);}
.recit h3{margin:6px 0 0; padding:0 20px; font-size:var(--t-article); font-weight:800; text-transform:none; letter-spacing:-0.01em; line-height:1.3;}
.recit .chapeau{display:block; padding:10px 20px 0; color:var(--ardoise); font-size:0.92rem; line-height:1.55;}
.recit .go{display:block; padding:14px 20px 20px; color:var(--orange); font-size:0.72rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;}
@media (max-width:900px){
.blog-colonnes{grid-template-columns:1fr;}
}
@media (max-width:640px){
.art{grid-template-columns:auto minmax(0,1fr); gap:14px;}
.art .go{display:none;}
.art .couv{width:72px; height:56px;}
}
/* contact */
form.ct{display:flex; flex-direction:column; gap:16px;}
form.ct .r2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:520px){form.ct .r2{grid-template-columns:1fr;}}
form.ct label{font-size:0.66rem; letter-spacing:0.14em; text-transform:uppercase; font-weight:700; color:var(--ardoise); display:block; margin-bottom:7px;}
form.ct input, form.ct textarea{
width:100%; border:none; border-bottom:2px solid var(--pierre); background:transparent;
padding:10px 0; font-family:inherit; font-size:1rem; color:var(--encre); border-radius:0;
}
form.ct input:focus, form.ct textarea:focus{outline:none; border-bottom-color:var(--orange);}
/* Téléphone en deux champs : l'indicatif garde sa largeur naturelle, le
numéro prend le reste. Rien n'est reformaté pendant la frappe. */
form.ct .tel-groupe{display:flex; gap:12px; align-items:flex-end;}
form.ct .tel-groupe select{
flex:0 0 auto; width:auto; font-size:0.94rem;
}
form.ct .tel-groupe input{flex:1 1 90px; min-width:0;}
/* Les deux listes du formulaire — l'indicatif et le motif — sont réglées
ensemble, sinon elles dépareillent l'une de l'autre autant que du
reste. Même filet, même rythme que les champs texte.
Le chevron remplace le triangle plein d'avant : sur un formulaire fait
de traits fins, un triangle massif posé au bout d'une ligne se voyait
plus que le champ lui-même. */
form.ct select{
width:100%; border:none; border-bottom:2px solid var(--pierre); background:transparent;
padding:10px 26px 10px 0; font-family:inherit; font-size:1rem; line-height:1.3;
color:var(--encre); border-radius:0; cursor:pointer;
appearance:none; -webkit-appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7' fill='none'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%235A6073' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-position:right 2px center; background-repeat:no-repeat;
}
form.ct select:focus{outline:none; border-bottom-color:var(--orange);}
form.ct select:hover{border-bottom-color:var(--ardoise);}
/* Tant que rien n'est choisi, la liste se lit comme un champ vide : même
gris que les indications des autres champs, pas du texte plein. */
form.ct select:has(option[value=""]:checked){color:#757575;}
form.ct select option{color:var(--encre);}
.lien-orange{color:var(--orange); font-weight:600;}
.ctinfo{margin:0; padding:0; list-style:none;}
.ctinfo li{padding:18px 0; border-top:1px solid var(--pierre);}
.ctinfo .k{font-size:0.64rem; letter-spacing:0.14em; text-transform:uppercase; font-weight:700; color:var(--orange); margin-bottom:5px;}
.ctinfo .v{font-size:1.02rem;}
.socials{display:flex; gap:12px; margin-top:26px; flex-wrap:wrap;}
.socials a{border:1px solid var(--pierre); padding:9px 18px; font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; font-weight:600; color:var(--nuit);}
.socials a:hover{border-color:var(--orange); color:var(--orange);}
.note-band{background:var(--nuit); color:var(--sur-nuit-fort); font-size:0.74rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:600; text-align:center; padding:9px 18px;}
.note-band b{color:var(--ambre);}
/* ---------- photographies ----------
Les neuf règles .ph-* ont été supprimées au lot 03.
Elles écrivaient les photos en dur dans la feuille de style, ce qui
rendait impossible leur changement depuis l'administration. Chaque
bloc porte désormais un media_id et son cadrage ; le gabarit écrit
le background-image en ligne (voir scene_html dans inc/rendu.php).
Le repli d'une photo manquante est ci-dessous : un aplat nuit, jamais
une zone vide. */
.scene-vide{background-color:var(--nuit);}
/* ---------------------------------------------------------------------
Volets illustrés (Formation) et affiches (Au-delà du sport)
Repris de la maquette du 22/09. Le point délicat : les lignes de texte
s'alignent d'une carte à l'autre grâce à `subgrid`, et non à des
hauteurs fixes. Deux détails que la maquette signale, et qui se voient
tout de suite s'ils manquent :
- chaque carte déclare grid-template-columns:100%, sinon la deuxième
cale son texte à droite ;
- le repli en une colonne est écrit pour les petits écrans et pour
les navigateurs sans subgrid.
--------------------------------------------------------------------- */
.volets{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:46px;}
.volet{position:relative; overflow:hidden; min-height:clamp(330px,33vw,420px);
display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(24px,2.2vw,30px);}
.volet .scene{transform:scale(1.03); transition:transform .8s ease; filter:saturate(.82) brightness(.96);}
.volet:hover .scene{transform:scale(1.08);}
.volet .voile{position:absolute; inset:0; z-index:2;
background:linear-gradient(0deg, rgba(9,12,30,.93) 0%, rgba(9,12,30,.76) 46%, rgba(9,12,30,.44) 78%, rgba(9,12,30,.24) 100%);}
.volet.attente .voile{background:linear-gradient(0deg, rgba(9,12,30,.95) 0%, rgba(9,12,30,.84) 48%, rgba(9,12,30,.62) 80%, rgba(9,12,30,.46) 100%);}
.volet .dedans{position:relative; z-index:3;}
.volet .n{font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; font-weight:800; color:var(--ambre);}
.volets h3{font-size:1.15rem; font-weight:900; text-transform:uppercase; letter-spacing:-.01em; margin:12px 0 10px; color:#fff;}
.volets p{font-size:.94rem; color:#C2C8E0; margin:0;}
.volets .attente h3{color:#E6E9F5;}
.volets .attente p{color:#98A0C8;}
@media (max-width:860px){.volets{grid-template-columns:1fr;}}
@supports (grid-template-rows:subgrid){
@media (min-width:861px){
.volets{grid-template-rows:minmax(170px,1fr) auto auto auto;}
.volets .volet{grid-row:1 / -1; display:grid; grid-template-rows:subgrid; grid-template-columns:100%;}
.volets .volet .dedans{grid-row:1 / -1; display:grid; grid-template-rows:subgrid; grid-template-columns:100%;}
.volets .volet .n{grid-row:2;}
.volets .volet h3{grid-row:3;}
.volets .volet p{grid-row:4;}
}
}
.oeuvres{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:52px;}
.oeuvre{position:relative; min-height:clamp(540px,66vw,845px); overflow:hidden;
display:flex; flex-direction:column; justify-content:flex-end;}
.oeuvre .scene{transform:scale(1.03); transition:transform .8s ease; filter:saturate(.78) brightness(.95) contrast(1.02);}
.oeuvre:hover .scene{transform:scale(1.09);}
/* Le dégradé du bas porte le texte ; celui du haut assombrit juste assez
pour que le numéro reste lisible sur un ciel clair. */
.oeuvre .voile{position:absolute; inset:0; z-index:2;
background:linear-gradient(0deg, rgba(9,12,30,.94) 0%, rgba(9,12,30,.78) 44%, rgba(9,12,30,.46) 74%, rgba(9,12,30,.20) 100%),
linear-gradient(180deg, rgba(9,12,30,.26) 0%, rgba(9,12,30,.06) 24%, rgba(9,12,30,0) 40%);}
/* Un grain très fin, qui unifie les deux photos. */
.oeuvre .grain{position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.22; mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
background-size:180px 180px;}
.oeuvre .dedans{position:relative; z-index:3; padding:clamp(30px,3vw,46px);}
.oeuvre .num{font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; font-weight:800; color:var(--ambre);
display:flex; align-items:center; gap:12px;}
.oeuvre .num::before{content:""; width:26px; height:2px; background:var(--ambre);}
.oeuvre h3{font-size:clamp(1.7rem,2.8vw,2.4rem); font-weight:900; text-transform:uppercase; letter-spacing:-.02em;
color:#fff; margin-top:14px; line-height:1;}
.oeuvre .citation{font-family:var(--police-serif); font-style:italic; font-size:clamp(1.25rem,2vw,1.6rem);
color:#fff; margin-top:22px; max-width:26ch; line-height:1.3;}
.oeuvre .quoi{font-size:.98rem; color:#C2C8E0; margin-top:18px; max-width:38ch;}
.oeuvre .kw{margin-top:22px; gap:16px; color:#98A0C8; font-size:.62rem;}
.oeuvre .act{margin-top:26px;}
@media (max-width:920px){.oeuvres{grid-template-columns:1fr;}}
@supports (grid-template-rows:subgrid){
@media (min-width:921px){
.oeuvres{grid-template-rows:1fr repeat(6, auto);}
.oeuvres .oeuvre{grid-row:1 / -1; display:grid; grid-template-rows:subgrid; grid-template-columns:100%;
padding:clamp(30px,3vw,46px);}
.oeuvres .oeuvre .dedans{grid-row:1 / -1; display:grid; grid-template-rows:subgrid; grid-template-columns:100%; padding:0;}
.oeuvres .oeuvre .num{grid-row:2;}
.oeuvres .oeuvre h3{grid-row:3;}
.oeuvres .oeuvre .citation{grid-row:4;}
.oeuvres .oeuvre .quoi{grid-row:5;}
.oeuvres .oeuvre .kw{grid-row:6;}
.oeuvres .oeuvre .act{grid-row:7;}
}
}
/* ---------------------------------------------------------------------
Intro — page d'entrée
Reprise de la maquette du 22/09. Elle ne s'affiche que sur l'accueil,
une fois par visite : la rejouer à chaque page serait insupportable.
--------------------------------------------------------------------- */
/* =====================================================================
INTRO — page d'entrée immersive
===================================================================== */
/* Posée hidden dans le HTML : sans JavaScript, elle ne s'affiche pas. */
#intro[hidden]{display:none;}
#intro{position:fixed; inset:0; z-index:999; background:var(--abysse); display:flex; align-items:center; justify-content:center; overflow:hidden; transition:opacity .9s cubic-bezier(.4,0,.2,1), transform .9s cubic-bezier(.4,0,.2,1);}
#intro.sort{opacity:0; transform:scale(1.05); pointer-events:none;}
#intro .fond{position:absolute; inset:0; background-size:cover; background-position:60% center; opacity:.20; animation:introZoom 14s ease-out forwards;}
#intro .halo{position:absolute; width:1400px; height:1400px; right:-420px; top:-520px; background:radial-gradient(circle, rgba(240,82,34,.30) 0%, rgba(240,82,34,0) 62%);}
#intro .halo.b{left:-500px; right:auto; top:auto; bottom:-560px; background:radial-gradient(circle, rgba(77,165,186,.22) 0%, rgba(77,165,186,0) 62%);}
#intro .voute{position:absolute; inset:0; background:radial-gradient(ellipse at center, rgba(15,19,48,0) 40%, rgba(11,14,36,.72) 100%);}
#intro .dedans{position:relative; z-index:3; text-align:center; padding:clamp(52px,9vh,96px) 28px clamp(40px,6vh,64px); width:100%; max-width:960px;}
/* le logo, pièce par pièce */
#intro .logo-anim{position:relative; width:min(560px, 76vw); aspect-ratio:1656/1176; margin:0 auto 48px;}
#intro .logo-anim .p{position:absolute; display:block; opacity:0;}
#intro .montagne{clip-path:inset(100% 0 0 0); animation:mtn 1.1s cubic-bezier(.22,1,.36,1) .15s forwards;}
#intro .adele{animation:glisseD .8s cubic-bezier(.22,1,.36,1) .65s forwards;}
#intro .lardinois{animation:glisseG .85s cubic-bezier(.22,1,.36,1) .9s forwards;}
#intro .kine{animation:monte .7s cubic-bezier(.22,1,.36,1) 1.25s forwards;}
#intro .pastilles{animation:pop .65s cubic-bezier(.34,1.56,.64,1) 1.55s forwards;}
/* le texte */
#intro .filet{width:0; height:2px; background:var(--orange); margin:0 auto 34px; animation:trait .9s cubic-bezier(.22,1,.36,1) 1.9s forwards;}
#intro .slogan{font-family:"Instrument Serif", Georgia, serif; font-style:italic; color:#fff; font-size:clamp(2.1rem,6vw,4.1rem); line-height:1.05; letter-spacing:-.015em; opacity:0; animation:apparait 1s cubic-bezier(.22,1,.36,1) 2.2s forwards;}
#intro .sous{font-size:clamp(1rem,1.9vw,1.25rem); color:#C2C8E0; margin-top:22px; font-weight:400; opacity:0; animation:apparait 1s cubic-bezier(.22,1,.36,1) 2.8s forwards;}
#intro .champs{display:flex; justify-content:center; flex-wrap:wrap; gap:0 26px; margin-top:40px; font-size:.64rem; letter-spacing:.3em; text-transform:uppercase; font-weight:700; color:#7f88b4; opacity:0; animation:apparait 1s ease 3.3s forwards;}
#intro .champs span+span::before{content:"·"; margin-right:26px; color:#4d5687;}
#intro .entrer{margin-top:46px; opacity:0; animation:apparait .9s ease 3.7s forwards; display:inline-flex; align-items:center; gap:14px; cursor:pointer; background:none; border:none; color:#fff; font-family:inherit; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; font-weight:700; padding:14px 4px;}
#intro .entrer .fleche{width:34px; height:34px; border:1px solid #ffffff4d; border-radius:50%; display:grid; place-items:center; transition:background .2s ease, border-color .2s ease; animation:respire 2.4s ease-in-out 4.6s infinite;}
#intro .entrer:hover .fleche{background:var(--orange); border-color:var(--orange);}
#intro .passer{position:absolute; right:30px; bottom:26px; z-index:4; background:none; border:none; color:#8E97C0; font-family:inherit; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600; cursor:pointer; padding:10px; opacity:0; animation:apparait .8s ease 1.6s forwards;}
#intro .passer:hover{color:#fff;}
body.intro-ouverte{overflow:hidden;}
/* Les images du logo arrivent une par une ; le texte suit. Sans ces
keyframes, les pièces restent à opacity:0 et l'écran reste noir —
c'est exactement ce qui s'est passé jusqu'au 23/09. */
@keyframes mtn{
0%{opacity:1; clip-path:inset(100% 0 0 0); transform:translateY(10px) scale(1.04);}
100%{opacity:1; clip-path:inset(0 0 0 0); transform:translateY(0) scale(1);}
}
@keyframes glisseD{from{opacity:0; transform:translateX(34px);} to{opacity:1; transform:none;}}
@keyframes glisseG{from{opacity:0; transform:translateX(-40px);} to{opacity:1; transform:none;}}
@keyframes monte{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;}}
@keyframes pop{from{opacity:0; transform:scale(.72);} to{opacity:1; transform:scale(1);}}
@keyframes trait{to{width:120px;}}
@keyframes apparait{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:none;}}
@keyframes respire{0%,100%{transform:translateY(0);} 50%{transform:translateY(5px);}}
@keyframes introZoom{from{transform:scale(1.14);} to{transform:scale(1.00);}}
@media (max-width:520px){#intro .champs{font-size:.55rem; letter-spacing:.17em; gap:0 14px; flex-wrap:nowrap;} #intro .champs span+span::before{margin-right:14px;}}
@media (max-height:860px){#intro .logo-anim{width:min(440px, 68vw); margin-bottom:34px;} #intro .slogan{font-size:clamp(1.8rem,5vw,3rem);} #intro .entrer{margin-top:32px;}}
@media (max-height:700px){#intro .logo-anim{width:min(330px, 56vw); margin-bottom:24px;} #intro .filet{margin-bottom:24px;} #intro .champs{display:none;} #intro .sous{margin-top:16px;} #intro .entrer{margin-top:24px;}}
@media (prefers-reduced-motion:reduce){#intro .p, #intro .slogan, #intro .sous, #intro .champs, #intro .entrer, #intro .passer{ animation:none !important; opacity:1 !important; transform:none !important; clip-path:none !important; } #intro .filet{animation:none; width:120px;} #intro .fond{animation:none;}}
/* ---------------------------------------------------------------------
Les trois paliers, en bloc de transition (maquette 01)
Une seule carte, trois colonnes séparées d'un filet : on lit une
progression, pas trois produits concurrents.
--------------------------------------------------------------------- */
.bloc-paliers{
background:#fff; border:1px solid var(--pierre); border-top:4px solid var(--orange);
border-radius:4px; padding:clamp(24px, 4vw, 38px);
}
.bloc-paliers .eyebrow{margin-bottom:14px;}
.bloc-paliers .texte{color:var(--ardoise); line-height:1.7; max-width:62ch;}
.bloc-paliers .texte p:last-child{margin-bottom:0;}
.colonnes-paliers{
list-style:none; margin:26px 0; padding:22px 0 0; border-top:1px solid var(--pierre);
display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0;
}
.colonnes-paliers li{padding:0 24px; border-left:1px solid var(--pierre);}
.colonnes-paliers li:first-child{padding-left:0; border-left:none;}
.colonnes-paliers .nom{
font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
color:var(--nuit); margin-bottom:8px;
}
.colonnes-paliers .prix{font-size:1.5rem; font-weight:900; color:var(--orange); line-height:1.1;}
.colonnes-paliers .prix span{font-size:.9rem; font-weight:700;}
.colonnes-paliers .detail{margin-top:6px; font-size:.84rem; color:var(--ardoise); line-height:1.5;}
@media (max-width:720px){
.colonnes-paliers{grid-template-columns:1fr; gap:20px;}
.colonnes-paliers li{padding:0 0 20px; border-left:none; border-bottom:1px solid var(--pierre);}
.colonnes-paliers li:last-child{padding-bottom:0; border-bottom:none;}
}
/* ---------------------------------------------------------------------
Bandeau de logos (page À propos)
Ramenés à une hauteur commune, ils forment une liste.
Ils étaient aussi désaturés — l'idée étant que huit logos de huit
sources se disputent l'attention. Adèle les veut en couleurs : ce
sont ses formations, elles se reconnaissent à leurs couleurs. Le
gris est donc tombé le 27/10.
--------------------------------------------------------------------- */
/* Une seule rangée, quoi qu'il arrive.
Avec six logos, il manquait 17 px : le sixième passait seul à la
ligne (constaté le 27/10). Plutôt que de régler la taille pour six —
ce qu'un septième logo casserait — la rangée ne se coupe plus :
l'écart entre logos se resserre d'abord, puis les logos eux-mêmes
rétrécissent. Testé jusqu'à neuf, toujours sur une ligne.
min-width:0 est indispensable : sans lui, un élément flex refuse de
passer sous la largeur de son contenu et la rangée déborde. */
.logos{list-style:none; margin:34px 0 0; padding:0; display:flex; flex-wrap:nowrap;
align-items:center; gap:34px clamp(20px, 2.6vw, 46px);}
.logos li{display:flex; align-items:center; flex:0 1 auto; min-width:0;}
.logos img{height:88px; width:auto; max-width:100%; object-fit:contain; display:block;
transition:opacity .3s ease;}
/* Un logo cliquable s'éclaire au survol : c'est le seul signe qui reste
une fois la désaturation retirée. */
.logos a img{opacity:.88;}
.logos a:hover img, .logos a:focus-visible img{opacity:1;}
/* Sur fond nuit, un logo sombre disparaîtrait. Il n'y en a pas
aujourd'hui, mais le bloc accepte le fond nuit — la règle reste. */
.sec.nuit .logos img{filter:brightness(1.6);}
@media (max-width:760px){
/* Sur un téléphone, six logos sur une ligne feraient six timbres :
ici le retour à la ligne vaut mieux que la rangée. */
.logos{flex-wrap:wrap; gap:26px 30px; justify-content:center;}
.logos img{height:62px; max-width:190px;}
}
/* Un logo ne clignote pas parce qu'on passe la souris à côté. */
@media (prefers-reduced-motion:reduce){
.logos img{transition:none;}
}
/* ---------------------------------------------------------------------
Flux Instagram (page Blog)
Les vignettes sont rendues par PHP depuis la table instagram_media :
pas de JavaScript, pas de requête supplémentaire, et la grille
s'affiche même si le navigateur bloque les scripts.
--------------------------------------------------------------------- */
/* ---------- blog : flux Instagram ---------- */
.insta-tete{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:26px;}
.insta-tete .rond{width:64px; height:64px; border-radius:50%; flex:none; overflow:hidden; border:2px solid var(--orange); padding:3px; background:var(--craie);}
.insta-tete .rond img{width:100%; height:100%; object-fit:cover; border-radius:50%; display:block;}
.insta-tete .compte{font-size:1.1rem; font-weight:800; color:var(--nuit);}
.insta-tete .compte small{display:block; font-size:.8rem; font-weight:400; color:var(--ardoise); margin-top:3px;}
/* Quatre colonnes par défaut, trois quand le nombre de publications se
divise mieux par trois (data-colonnes, posé par le gabarit). La règle
à deux colonnes de la maquette vivait dans une media query : extraite
sans elle, elle écrasait tout et bloquait la grille à deux colonnes,
même sur un écran de 1440 px. */
.insta-grille{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
.insta-grille[data-colonnes="3"]{grid-template-columns:repeat(3,1fr);}
.insta-case{transition:transform .35s ease;}
.insta-case:hover{transform:translateY(-4px);}
.insta-case:hover .voile{background:rgba(19,23,53,.05);}
.insta-case .voile{transition:background .35s ease;}
.insta-case img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.insta-case .legende{position:absolute; left:0; right:0; bottom:0; z-index:3; padding:44px 14px 12px; font-size:.74rem; line-height:1.35; color:#fff; background:linear-gradient(0deg, rgba(9,12,30,.88) 0%, rgba(9,12,30,0) 100%); opacity:0; transition:opacity .3s ease;}
.insta-case:hover .legende{opacity:1;}
.insta-case .type{position:absolute; right:10px; top:10px; z-index:3; color:#fff; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; text-shadow:0 1px 6px rgba(0,0,0,.7);}
.insta-case{position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--pierre);}
.insta-case .scene{filter:saturate(1.02);}
.insta-case .voile{position:absolute; inset:0; background:rgba(19,23,53,.18);}
.insta-case .marque{position:absolute; left:12px; bottom:10px; z-index:3; color:#fff; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; text-shadow:0 1px 6px rgba(0,0,0,.6);}
@media (max-width:760px){.insta-grille{grid-template-columns:repeat(2,1fr);}}
/* =====================================================================
UTILITAIRES — site Adèle Lardinois
=====================================================================
Remplacent les 35 attributs style= du HTML validé.
Pourquoi ils disparaissent du HTML : un style en ligne échappe au
système, ne se retrouve pas par recherche, et impose 'unsafe-inline'
dans la politique de contenu du .htaccess. Les sortir permet de
resserrer cette politique (lot 13).
Les valeurs sont conservées à l'identique. Les rationaliser — douze
marges supérieures différentes, c'est beaucoup — déplacerait des
pixels : ce sera une décision, pas un effet de bord.
===================================================================== */
/* ---------------------------------------------------------------------
Marges supérieures
--------------------------------------------------------------------- */
.mt-10{margin-top:var(--e-10);}
.mt-12{margin-top:var(--e-12);}
.mt-18{margin-top:var(--e-18);}
.mt-20{margin-top:var(--e-20);}
.mt-22{margin-top:var(--e-22);}
.mt-26{margin-top:var(--e-26);}
.mt-28{margin-top:var(--e-28);}
.mt-30{margin-top:var(--e-30);}
.mt-32{margin-top:var(--e-32);}
.mt-34{margin-top:var(--e-34);}
.mt-38{margin-top:var(--e-38);}
.mt-44{margin-top:var(--e-44);}
/* ---------------------------------------------------------------------
Alignement dans une grille jumelée
--------------------------------------------------------------------- */
.aligne-debut{align-items:flex-start;}
.aligne-centre{align-items:center;}
.aligne-fin{align-items:flex-end;}
/* ---------------------------------------------------------------------
Registres de texte
--------------------------------------------------------------------- */
.texte-doux{color:var(--ardoise); max-width:62ch;}
.texte-ardoise{color:var(--ardoise);}
.intro{font-size:var(--t-intro); max-width:60ch;}
/* Les deux exergues en italique serif : la phrase qui résume une page.
Toujours associées à .serif dans le HTML. */
.exergue{font-size:var(--t-exergue); color:var(--nuit); margin-top:var(--e-28); max-width:24ch;}
.exergue-large{font-size:var(--t-exergue-large); color:var(--nuit); max-width:36ch; margin-top:var(--e-26);}
/* ---------------------------------------------------------------------
Variantes de composants
--------------------------------------------------------------------- */
/* En-tête de page raccourci : Blog et Contact n'ont pas de sous-titre. */
.phead.court{min-height:var(--h-phead-court);}
/* Champ de formulaire posé sur une section nuit.
Sélecteur volontairement porté à 0,2,1 : `form.ct input` vaut 0,1,1 et
impose --pierre à la bordure. Une simple classe (0,1,0) perdait, et la
comparaison d'écrans l'a montrée — 568 px de bordure passés du bleu
translucide au beige, sur la seule page Formations. C'est exactement
ce que l'attribut style= masquait : en ligne, il gagnait sans discuter. */
form.ct .champ-nuit{
color:var(--sur-nuit-fort);
border-bottom-color:var(--filet-champ-nuit);
}
/* ---------------------------------------------------------------------
Accessibilité
--------------------------------------------------------------------- */
/* Le HTML validé n'avait aucun état de focus visible : au clavier, on
ne savait pas où l'on était. Ajout non négociable, et invisible à la
souris — il ne change donc rien à la comparaison d'écrans. */
:focus-visible{
outline:2px solid var(--orange);
outline-offset:3px;
}
/* Respecte le réglage système « réduire les animations ». */
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto;}
*,*::before,*::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
}
}
/* ---------------------------------------------------------------------
Lien d'évitement
Premier élément focalisable de la page : il permet de sauter le menu
au clavier. Hors écran tant qu'il n'a pas le focus, donc sans effet
sur le rendu visuel.
--------------------------------------------------------------------- */
.saut-contenu{
position:absolute; left:-9999px; top:0; z-index:100;
background:var(--nuit); color:var(--sur-nuit-fort);
padding:14px 22px; font-size:0.8rem; font-weight:700;
letter-spacing:var(--tracking-libelle); text-transform:uppercase;
}
.saut-contenu:focus{left:0;}
/* ---------------------------------------------------------------------
Corps d'article
Le seul endroit du site où du HTML vient de la base. La largeur est
bornée à 68 caractères : au-delà, l'œil perd sa ligne.
--------------------------------------------------------------------- */
.article{max-width:68ch;}
.article-date{
font-size:0.72rem; letter-spacing:var(--tracking-libelle); text-transform:uppercase;
font-weight:700; color:var(--ardoise); margin-bottom:var(--e-28);
}
.article h2{font-size:clamp(1.4rem,2.4vw,1.9rem); font-weight:900; color:var(--nuit);
letter-spacing:var(--tracking-titre); margin:var(--e-44) 0 var(--e-12);}
.article h3{font-size:1.15rem; font-weight:800; color:var(--nuit); margin:var(--e-32) 0 var(--e-10);}
.article p{font-size:1.06rem; line-height:1.72; margin:0 0 var(--e-20);}
.article ul, .article ol{margin:0 0 var(--e-20); padding-left:24px;}
.article li{font-size:1.06rem; line-height:1.72; margin-bottom:6px;}
.article blockquote{
margin:var(--e-32) 0; padding-left:var(--e-22); border-left:3px solid var(--orange);
font-family:var(--police-serif); font-size:1.3rem; color:var(--nuit);
}
.article blockquote p{font-size:inherit; font-family:inherit;}
.article a{color:var(--orange-fonce); text-decoration:underline; text-underline-offset:3px;}
.article a:hover{color:var(--orange);}
.article img{margin:var(--e-32) 0; width:100%; height:auto;}
.article strong{font-weight:800; color:var(--nuit);}
/* ---------------------------------------------------------------------
Pages légales
Un texte qu'on consulte plus qu'on ne le lit : sommaire en tête, et
des intertitres qui ne passent pas sous l'en-tête fixe quand on y saute.
--------------------------------------------------------------------- */
.legale h2{scroll-margin-top:110px;}
/* L'en-tête du site est fixe : sans marge de défilement, une ancre
dépose sa cible DERRIÈRE lui. Sur téléphone c'est le titre de la
section qui disparaissait, et on atterrissait sur un champ email
sans savoir à quoi on s'inscrivait. */
#alerte, #message{scroll-margin-top:96px;}
@media (max-width:760px){#alerte, #message{scroll-margin-top:80px;}}
.sommaire{background:var(--brume); padding:var(--e-20) var(--e-26); margin:0 0 var(--e-32);}
.sommaire ol{margin:0; padding-left:22px;}
.sommaire li{font-size:0.98rem; margin-bottom:4px;}
.sommaire a{text-decoration:none;}
.sommaire a:hover{text-decoration:underline;}
/* Une information légale manquante se voit : un trou visible vaut mieux
qu'une mention qui a l'air complète. */
mark.a-completer{background:var(--ambre); color:var(--encre); padding:0 4px; font-weight:700;}
/* ---------------------------------------------------------------------
Formulaires publics
Le champ-piège doit être invisible à l'œil ET au lecteur d'écran, mais
rester dans le document : un robot qui lit le HTML le remplira.
--------------------------------------------------------------------- */
.pas-ici{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.form-retour{
padding:12px 16px; margin-bottom:var(--e-18); font-size:0.94rem;
border-left:3px solid var(--turquoise); background:var(--brume); color:var(--encre);
}
.form-retour.ok{border-left-color:var(--turquoise);}
.form-retour.ko{border-left-color:var(--orange); background:var(--craie);}
.mention-rgpd{
font-size:0.78rem; color:var(--ardoise); line-height:1.5;
margin-top:var(--e-12); max-width:52ch;
}
.mention-rgpd.sur-nuit{color:var(--sur-nuit-faible);}
/* ---------------------------------------------------------------------
Questions fréquentes
natif : le contenu reste dans le HTML même replié, donc
lisible par un moteur. Un accordéon en JavaScript ne le serait pas.
--------------------------------------------------------------------- */
.faq{border-top:1px solid var(--pierre); margin-top:var(--e-34);}
.sec.nuit .faq{border-color:var(--filet-nuit);}
.faq-item{border-bottom:1px solid var(--pierre);}
.sec.nuit .faq-item{border-color:var(--filet-nuit);}
.faq-item summary{
list-style:none; cursor:pointer; padding:var(--e-22) 48px var(--e-22) 0;
font-size:var(--t-besoin); font-weight:600; color:var(--encre);
position:relative;
}
/* Le texte est borné, pas le cadre : sinon le + se colle à la fin de la
question au lieu de tenir le bord droit de la section. */
.faq-item summary > span.q{display:block; max-width:52ch;}
.sec.nuit .faq-item summary{color:var(--sur-nuit-vif);}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:focus-visible{outline:2px solid var(--orange); outline-offset:2px;}
.faq-plus{position:absolute; right:4px; top:50%; width:14px; height:2px;
background:var(--orange); transform:translateY(-50%);}
.faq-plus::after{content:""; position:absolute; inset:0; background:var(--orange);
transform:rotate(90deg); transition:transform .18s ease;}
.faq-item[open] .faq-plus::after{transform:rotate(0deg);}
.faq-reponse{padding:0 0 var(--e-26); max-width:62ch;}
.faq-reponse p{color:var(--ardoise); margin:0 0 var(--e-12);}
.sec.nuit .faq-reponse p{color:var(--sur-nuit-doux);}
/* ---------------------------------------------------------------------
Passe mobile du 19/09
Mesurée dans un téléphone émulé (outils/pixel/mobile.py), pas à l'œil.
--------------------------------------------------------------------- */
/* Zones de toucher. Le rembourrage agrandit la cible, la marge négative
l'annule dans la mise en page : le doigt a 43 px, le dessin ne bouge
pas d'un pixel. Les liens du pied de page faisaient 19 px de haut. */
footer.site .fnav a,
footer.site .legaux a{padding-block:12px; margin-block:-12px;}
/* Le burger passe de 42 à 44 px sans que l'icône se déplace. */
.burger{padding:9px; margin:-1px;}
/* Sur écran tactile, un champ fait au moins 44 px de haut
(recommandation Apple ; ils en faisaient 41). */
@media (pointer:coarse){
form.ct input, form.ct .tel-groupe select, .champ-nuit{min-height:44px;}
/* Le sélecteur d'indicatif était à 15 px : Safari zoomait au toucher.
Le sélecteur doit être aussi précis que la règle de base
(form.ct .tel-groupe select), sinon il perd — une media query
n'ajoute aucune spécificité. */
form.ct .tel-groupe select{font-size:16px;}
}
@media (max-width:480px){
/* Plancher de lecture : 11 px, le minimum d'Apple. Dix styles de la
charte descendaient à 9,6–10,9 px ; ils rejoignent la taille des
sur-titres (0,7rem). Au-delà de 480 px, rien ne change. */
.photo-tag, .blk .badge, .hero .side, .kw, .blk .kicker, .blk .per,
.fin-list .r b, .tier dt, .tier .price small, .art .cat,
form.ct label, .ctinfo .k,
/* ajoutés le 23/09 avec les volets et les affiches */
.volet .n, .oeuvre .num, .oeuvre .kw{font-size:0.7rem;}
/* Le sommaire des pages légales : une ligne par entrée, au doigt. */
.sommaire li{margin-bottom:0;}
.sommaire a{display:block; padding:10px 0;}
}