/* =========================================================================
M2.AGENCY, systeme visuel « Shapes »
Grammaire relevee sur le theme Shapes (Shopify), copie locale claude code/shapes :
· titrage Prompt 900 en CAPITALES
· texte Inter 500 / 700
· bordures noires 2px
· ombres DURES decalees 4px, aucun flou ← la signature
· boutons pill (push-btn : la surface s'enfonce dans son ombre au survol)
TROIS UNIVERS, une seule grammaire. Chaque page declare sa famille sur
et tout le reste suit par variables, on ne code jamais une couleur
en dur dans une page :
.u-entreprise sobre navy + gris, aucun aplat vif
.u-particulier colore vert acide + jaune, aplats francs
.u-apporteur melange base navy sobre, accents verts vifs
========================================================================= */
/* Une seule police, en variable : Inter couvre 400 a 700 dans un fichier de
48 Ko, la ou l'ancien trio Prompt + Inter 500 + Inter 700 en pesait 105.
Auto-hebergee : aucune requete vers un serveur tiers, la page mentions
legales peut continuer a dire qu'il n'y en a aucune. */
/* Inter Tight pour le titrage, Inter pour le texte. La reference nomme
explicitement « Inter Tight » : c'est une version plus etroite d'Inter,
qui serre les grands titres sans les ecraser. Les deux sont variables,
45 et 48 Ko, auto-hebergees : aucune requete vers un serveur tiers. */
/* --- Les polices ---------------------------------------------------------
Titrage : JOST. C'est la reprise libre de la Futura, la geometrique de 1927
que les maisons de luxe utilisent depuis quatre-vingts ans, de Vuitton a
Supreme. Cercles parfaits, fut constant, aucune fioriture : elle est classe
par la construction, pas par l'ornement.
Texte : ARCHIVO, grotesque americain neutre, proche des Helvetica utilisees
par les grandes maisons pour le corps de texte.
Les deux sont variables et auto-hebergees : 60 Ko en tout, aucune requete
vers un serveur tiers, la page mentions legales reste vraie. */
@font-face {
font-family: "Jost";
src: url("../fonts/jost-var.woff2") format("woff2-variations"),
url("../fonts/jost-var.woff2") format("woff2");
font-weight: 300 700; font-style: normal; font-display: swap;
}
/* SYNE, uniquement pour le nom de l'agence. Dessinee pour la Synesthesie,
centre d'art contemporain, elle est utilisee par des institutions
culturelles : contreformes carrees, jambages courts, un dessin qu'on ne
voit sur aucun site de logiciel. Le chiffre 2 y est dessine a hauteur de
capitale, ce qui compte pour un nom qui en contient un. 34 Ko, chargee
pour un seul mot. */
@font-face {
font-family: "Syne";
src: url("../fonts/syne-var.woff2") format("woff2-variations"),
url("../fonts/syne-var.woff2") format("woff2");
font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Archivo";
src: url("../fonts/archivo-var.woff2") format("woff2-variations"),
url("../fonts/archivo-var.woff2") format("woff2");
font-weight: 300 700; font-style: normal; font-display: swap;
}
:root {
/* --- noir neutre --------------------------------------------------
Ecart RVB nul, comme sur la reference : le gris ne tire vers rien. */
--fond: #0A0A0B; /* fond de page */
--paper: #131315; /* surfaces : cartes, champs */
--gris: #191919; /* remplissage discret */
--gris-2: #202022; /* un cran au-dessus */
--ink: #F4F4F5; /* texte principal */
--ink-2: #A8A8AE; /* texte secondaire */
--ink-3: #7C7C84; /* libelles */
--trait: #242426;
--trait-fort: #34343A;
/* --- la lueur -----------------------------------------------------
C'EST elle la couleur du site. Un halo tres flou en haut de page,
violet vers rose vers ambre. Aucun aplat colore ailleurs : c'est
cette retenue qui donne le rendu premium de la reference. */
--halo-1: rgba(226, 214, 196, .30); /* blanc chaud, lumiere de studio */
--halo-2: rgba(198, 176, 148, .20); /* ambre tres pale */
--halo-3: rgba(150, 140, 130, .12); /* gris chaud */
/* Quatre variantes de teinte pour les quatre univers. La lueur reste la
meme famille, seul l'angle chromatique glisse. */
--u-halo-1: var(--halo-1);
--u-halo-2: var(--halo-2);
/* --- l'appui clair ------------------------------------------------
Les boutons principaux sont CLAIRS sur la reference, pas colores.
Le contraste vient de la valeur, pas de la teinte. */
--clair: #EDEDEE;
--clair-txt: #0C0C0D;
--heading: "Jost", "Futura", "Century Gothic", "Avenir Next", sans-serif;
--body: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
--bord: 1px;
--radius: 14px;
--radius-s: 10px;
--ombre: 0 1px 2px rgba(0, 0, 0, .6);
--ombre-h: 0 10px 30px rgba(0, 0, 0, .6);
--lueur: 0 1px 0 rgba(255,255,255,.5) inset, 0 6px 20px rgba(0,0,0,.5);
/* L'accent sert au texte : prix, liens, surtitres. Il reste clair et
sobre, la couleur etant portee par la lueur. */
--accent: var(--ink);
--accent-txt: var(--clair-txt);
--accent-doux: var(--gris);
--accent-2: var(--ink);
--vif: var(--ink);
--vif-txt: var(--clair-txt);
--vif-doux: rgba(244, 244, 245, .14);
}
/* --------------------------------------------------- les 4 univers
Seule la teinte de la lueur change, dans la meme famille. */
/* Une seule lumiere pour les quatre univers : ce qui distingue une page
d'une autre, c'est la photo, pas un changement de teinte. */
.u-entreprise, .u-particulier, .u-evenement, .u-apporteur {
--u-halo-1: rgba(226, 214, 196, .26); --u-halo-2: rgba(198, 176, 148, .16);
}
:root { color-scheme: dark; }
*, *::before, *::after { box-sizing: border-box; }
/* ------------------------------------------- verrou anti-debordement
Sur telephone, il suffit d'un mot long, d'une grille trop large ou d'une
ombre portee pour que la page glisse lateralement et rogne le contenu au
bord droit. Trois garde-fous, poses une fois pour tout le site :
1. la page ne peut pas defiler horizontalement ;
2. les enfants de grille et de flex ont le droit de retrecir
(par defaut min-width vaut auto, et ils refusent de le faire) ;
3. les mots trop longs se coupent au lieu de pousser leur conteneur.
------------------------------------------------------------------- */
html {
-webkit-text-size-adjust: 100%;
overflow-x: hidden;
}
body {
margin: 0;
max-width: 100%;
overflow-x: hidden;
background: var(--fond);
color: var(--ink);
font: 400 16px/1.6 var(--body);
letter-spacing: -.011em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 2. les conteneurs qui participent a une grille ou a un flex */
.wrap, .wrap > *, .section, .duo, .collab, .teaser,
.lignes, .ligne, .formules, .formule,
.field, .field-row, .acc, .acc-item, .pli, .pli-corps,
.trio > *, .choix, .galerie, .vignette {
min-width: 0;
}
/* La tuile du portfolio, elle seule : c'est en visant « .vignette » que
j'avais ecrase le verrou ci-dessus, et couvert tout le site de boites. */
.vignette {
break-inside: avoid;
-webkit-column-break-inside: avoid;
margin: 0 0 8px;
border-radius: 16px;
overflow: hidden;
background: #111;
cursor: zoom-in;
transition: transform .2s ease;
}
/* 3. rien ne pousse le conteneur : ni un mot long, ni une URL, ni un email */
p, li, h1, h2, h3, .ligne-nom, .ligne-desc, .formule-nom, .formule-desc,
.acc-head, .pli-tete, .info, .legal {
overflow-wrap: anywhere;
word-break: normal;
}
/* Les champs de saisie debordent facilement leur colonne sur telephone. */
input, select, textarea { max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: clamp(16px, 3vw, 32px); }
/* --------------------------------------------------------------- titrage
Casse normale, pas de capitales : c'est le changement qui pese le plus
lourd dans la perception. Des capitales en graisse noire, c'est une
affiche ; une casse normale serree, c'est un site de service.
Le crenage se resserre a mesure que le corps grandit. */
.tt {
font-family: var(--heading);
font-weight: 500;
text-transform: none;
line-height: 1.1;
letter-spacing: -.018em;
}
.tt-xl { font-size: clamp(36px, 6vw, 70px); letter-spacing: -.028em; font-weight: 500; }
.tt-l { font-size: clamp(26px, 3.4vw, 42px); letter-spacing: -.022em; font-weight: 500; }
.tt-m { font-size: clamp(19px, 2.1vw, 24px); letter-spacing: -.016em; font-weight: 500; }
/* Le surtitre reste en capitales : petit, espace, en gris. C'est le seul
endroit ou les capitales restent modernes. */
.tt-s {
font-family: var(--body);
font-size: 12px; font-weight: 600;
text-transform: uppercase; letter-spacing: .08em;
color: var(--ink-3);
line-height: 1.4;
}
/* -------------------------------------------------------------- en-tete */
.bar {
border-bottom: var(--bord) solid var(--trait);
background: rgba(10, 10, 11, .82);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
position: sticky; top: 0; z-index: 40;
}
/* Trois colonnes, celle de gauche vide : le logo tombe au centre optique
quelle que soit la longueur du menu. */
.bar-in {
min-height: 88px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: clamp(24px, 5vw, 64px);
padding-block: 14px;
}
.bar-vide { display: block; }
.bar .logo { justify-self: center; text-align: center; }
.logo {
font-family: var(--heading); font-weight: 600;
font-size: clamp(21px, 2.3vw, 27px);
font-weight: 500; letter-spacing: -.02em; line-height: 1;
}
.bar nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); }
.bar nav a {
font-weight: 500; font-size: clamp(15px, 1.5vw, 17px);
letter-spacing: -.01em;
color: var(--ink-2);
transition: color .18s ease;
}
.bar nav a:hover, .bar nav a[aria-current="page"] { color: var(--ink); }
/* Sous 560px le menu ne tient plus a cote d'un logo centre : on empile,
logo puis menu, les deux centres. La barre grandit d'environ 26px, pris
en compte dans le calcul de hauteur de l'accueil. */
@media (max-width: 560px) {
.bar-in {
flex-direction: column;
justify-items: center;
gap: 7px;
padding-block: 11px;
}
.bar-vide { display: block; }
.bar nav { justify-self: center; gap: 18px; }
.bar nav a { font-size: 14px; }
}
/* --------------------------------------------------------------- boutons
Plus d'ombre dure ni d'enfoncement : un bouton plein qui s'eclaircit,
un bouton secondaire cercle d'un filet fin. Rayon moyen plutot que pill
integral, qui commencait a dater. */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 48px; padding: 0 22px;
font-family: var(--heading); font-weight: 500;
font-size: 15px; letter-spacing: -.011em; line-height: 1;
border: var(--bord) solid transparent;
border-radius: 999px;
background: var(--paper); color: var(--ink);
background: var(--paper);
border-color: var(--trait-fort);
box-shadow: var(--ombre);
transition: background .16s ease, border-color .16s ease,
box-shadow .16s ease, transform .16s ease;
}
.btn:hover { background: var(--gris-2); border-color: var(--trait-fort); box-shadow: var(--ombre-h); transform: translateY(-1px); }
.btn:active { transform: translateY(0); box-shadow: var(--ombre); }
/* Le bouton principal est CLAIR, pas colore : sur la reference le contraste
vient de la valeur, jamais de la teinte. Forme pill, legere brillance en
haut, comme un galet. */
.btn-accent,
.btn-accent-2,
.btn-noir {
background: linear-gradient(180deg, #FBFBFC, var(--clair));
color: var(--clair-txt);
border-color: transparent;
box-shadow: var(--lueur);
font-weight: 500;
}
.btn-accent:hover,
.btn-accent-2:hover,
.btn-noir:hover { background: linear-gradient(180deg, #FFFFFF, #E2E2E4); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* Lien souligne */
.lien {
border-bottom: 1px solid var(--trait-fort); padding-bottom: 1px;
font-weight: 500; transition: border-color .16s ease;
}
.lien:hover { border-bottom-color: var(--ink); }
/* ---------------------------------------------------------------- cartes */
/* Une arete claire d'un pixel en haut : c'est ce qui fait qu'une carte
parait posee sur le fond plutot que decoupee dedans. */
.bloc, .formule, .pli, .acc, .lignes, .collab-carte {
position: relative;
}
.bloc::after, .formule::after, .pli::after,
.acc::after, .lignes::after, .collab-carte::after {
content: "";
position: absolute; inset: 0 0 auto 0; height: 1px;
border-radius: var(--radius) var(--radius) 0 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.07) 22%,
rgba(255,255,255,.07) 78%, transparent);
pointer-events: none;
}
.bloc {
border: var(--bord) solid var(--trait);
border-radius: var(--radius);
background: var(--paper);
box-shadow: var(--ombre);
}
/* Bandeaux pleine largeur, tous cales sur la famille de la page */
.bandeau {
border-block: var(--bord) solid var(--trait);
padding: clamp(40px, 6vw, 84px) 0;
}
/* Le premier bandeau d'une page ouvre plus haut : rien au-dessus de lui ne
justifie de repousser le titre au tiers de l'ecran. */
.bandeau:first-of-type {
padding-top: clamp(14px, 2vw, 28px);
}
/* L'ouverture de page porte la lueur. Deux halos radiaux tres flous,
poses derriere le contenu : c'est la seule couleur de la page.
`overflow: hidden` empeche le halo de deborder sur la section suivante. */
.bandeau-accent {
position: relative;
overflow: hidden;
background: var(--fond);
color: var(--ink);
border-block-color: transparent;
isolation: isolate;
}
.bandeau-accent::before {
content: "";
position: absolute;
top: -62%; left: 50%;
width: min(1200px, 140%); aspect-ratio: 1 / .58;
transform: translateX(-50%);
background:
radial-gradient(ellipse 46% 52% at 38% 46%, var(--u-halo-1), transparent 68%),
radial-gradient(ellipse 44% 46% at 62% 40%, var(--u-halo-2), transparent 66%);
/* La lueur s'eteint AVANT d'atteindre le bas du bandeau : sans ce masque,
`overflow: hidden` la tranchait net et laissait une ligne franche. */
-webkit-mask-image: linear-gradient(to bottom, #000 42%, transparent 88%);
mask-image: linear-gradient(to bottom, #000 42%, transparent 88%);
pointer-events: none;
z-index: -1;
}
.bandeau-accent .tt-s { color: var(--ink-2); }
/* Le bandeau de collaboration respire moins : c'est une offre secondaire,
elle ne doit pas peser autant qu'une section principale. */
.bandeau-collab { padding-block: clamp(22px, 3vw, 38px); }
/* La bande de fond disparait : elle ne se distinguait pas du fond de page
et fabriquait des frontieres molles. Il ne reste que l'espacement. */
.bandeau-doux { background: transparent; border-color: transparent; }
.bandeau-gris { background: transparent; border-color: transparent; }
.bandeau-noir { background: var(--gris-2); color: var(--ink); border-color: transparent; }
/* Sur fond accent fonce, la bordure des boutons doit rester lisible */
/* ------------------------------------------------------- lignes tarifaires */
/* Le tableau tarifaire vit dans une carte quand il est seul ; dans un pli
il herite deja de la surface. */
.lignes {
background: var(--paper);
border: var(--bord) solid var(--trait);
border-radius: var(--radius);
padding-inline: clamp(18px, 2.4vw, 30px);
box-shadow: var(--ombre);
}
.ligne:last-child { border-bottom: 0; }
.pli .lignes {
background: transparent; border: 0; border-radius: 0;
padding-inline: 0; box-shadow: none;
}
.pli .ligne:first-child { border-top: var(--bord) solid var(--trait); }
.ligne {
display: grid; grid-template-columns: 1fr auto;
align-items: center; gap: 16px 24px;
padding: clamp(20px, 2.4vw, 28px) clamp(0px, 1vw, 14px);
border-bottom: var(--bord) solid var(--trait);
transition: background .16s ease;
}
.ligne:hover { background: var(--accent-doux); }
/* Les lignes sont des liens : on le signale par une fleche qui avance. */
a.ligne { cursor: pointer; }
a.ligne .ligne-nom::after {
content: " ";
color: var(--accent);
opacity: 0;
display: inline-block;
transition: opacity .16s ease, transform .16s ease;
transform: translateX(-4px);
}
a.ligne:hover .ligne-nom::after { opacity: 1; transform: translateX(0); }
.ligne-nom { font-family: var(--heading); font-weight: 600; font-size: clamp(16px, 1.9vw, 19px); letter-spacing: -.02em; line-height: 1.25; }
.ligne-desc { font-size: 14px; margin-top: 4px; color: var(--ink-2); }
.ligne-prix {
font-family: var(--heading); font-weight: 600;
font-size: clamp(19px, 2.2vw, 24px);
letter-spacing: -.02em;
line-height: 1.15; white-space: nowrap;
font-variant-numeric: tabular-nums lining-nums;
font-feature-settings: "tnum" 1, "lnum" 1;
}
.ligne-prix .des { font-family: var(--body); font-weight: 500; font-size: 12px; color: var(--ink-3); display: block; }
/* --------------------------------------------------- formules en cartes */
/* Presentation reservee a PARTICULIER : la ou entreprise aligne un tableau
sobre, particulier assume des cartes qui alternent les aplats.
C'est la meme grammaire, bordure, ombre dure, mais coloree. */
.formules {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: clamp(12px, 1.6vw, 18px);
}
.formule {
display: flex; flex-direction: column;
padding: clamp(20px, 2.2vw, 26px);
background: var(--paper);
border: var(--bord) solid var(--trait);
border-radius: var(--radius);
box-shadow: var(--ombre);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.formule:hover {
transform: translateY(-2px);
box-shadow: var(--ombre-h);
border-color: var(--trait-fort);
}
/* Toutes les cartes sont blanches : c'est la grille et l'espace qui
structurent, plus l'aplat colore. La couleur ne sert qu'au prix. */
.formule-prix { color: var(--ink); }
.formule-nom {
font-family: var(--heading); font-weight: 600;
font-size: clamp(16px, 1.8vw, 18px);
letter-spacing: -.02em; line-height: 1.25;
}
.formule-desc { font-size: 13.5px; line-height: 1.5; margin-top: 6px; color: var(--ink-2); }
.formule-prix {
font-family: var(--heading); font-weight: 600;
font-size: clamp(22px, 2.6vw, 28px);
letter-spacing: -.025em;
line-height: 1.15;
font-variant-numeric: tabular-nums lining-nums;
font-feature-settings: "tnum" 1, "lnum" 1;
margin-top: auto; padding-top: 16px;
}
.formule-prix .des {
font-family: var(--body); font-weight: 500; font-size: 12px;
color: var(--ink-3); display: block; letter-spacing: 0; margin-bottom: 2px;
}
/* Telephone : deux colonnes plutot qu'une. Avec huit formules, la colonne
unique faisait defiler plus de deux ecrans rien que pour les tarifs. */
@media (max-width: 620px) {
.formules { grid-template-columns: 1fr 1fr; gap: 10px; }
.formule { padding: 13px 12px; }
.formule-nom { font-size: 15px; }
.formule-desc { font-size: 11.5px; line-height: 1.4; margin-top: 5px; }
.formule-prix { font-size: 22px; margin-top: 11px; padding-top: 9px; }
.formule-prix .des { font-size: 9.5px; }
.formule-lien { font-size: 11px; margin-top: 9px; }
}
.formule-lien {
margin-top: 11px;
font-family: var(--heading); font-weight: 500;
font-size: 14px; color: var(--accent);
align-self: flex-start;
}
.formule-lien::after { content: ""; }
/* ------------------------------------------------------- section pliable */
/* Une section entiere derriere un clic. Sur des pages qui alignent douze
prestations puis cinq questions, tout afficher d'emblee noie le visiteur :
il ne lit rien. Ici il ouvre ce qui l'interesse.
Meme mecanique que l'accordeon (grid 0fr -> 1fr), memes deux pieges evites :
min-height:0 sur l'element de grille, et padding anime avec la ligne. */
/* Le pli est une CARTE, plus une ligne nue. Sur un fond sombre uniforme,
deux filets horizontaux ne suffisent pas a signaler qu'on peut cliquer :
il faut une surface. */
.pli {
background: var(--paper);
border: var(--bord) solid var(--trait);
border-radius: var(--radius);
padding-inline: clamp(18px, 2.4vw, 30px);
box-shadow: var(--ombre);
transition: border-color .18s ease, background .18s ease;
}
.pli:hover { border-color: var(--trait-fort); }
.pli[data-open="true"] { background: var(--gris); border-color: var(--trait-fort); }
.pli + .pli { margin-top: clamp(12px, 1.6vw, 18px); }
.pli-tete {
width: 100%;
display: flex; align-items: center; justify-content: space-between; gap: 20px;
padding: clamp(20px, 2.4vw, 26px) 0;
font-family: var(--heading); font-weight: 600;
font-size: clamp(19px, 2.4vw, 26px);
text-align: left; line-height: 1.2;
letter-spacing: -.028em;
background: none; border: 0; color: inherit; cursor: pointer;
transition: color .16s ease;
}
.pli-tete:hover { color: var(--ink); }
.pli-tete .compte {
font-family: var(--body); font-weight: 500;
font-size: 13px; color: var(--ink-3);
white-space: nowrap; margin-left: auto; margin-right: 4px;
}
/* Le « + » devient un chevron dans une pastille : plus discret, et le sens
de l'action se lit sans texte. */
.pli-tete .signe {
flex: 0 0 auto;
width: 32px; height: 32px;
display: grid; place-items: center;
border: var(--bord) solid var(--trait-fort);
border-radius: 999px;
font-size: 18px; line-height: 1;
color: var(--ink-2);
transition: transform .24s ease, background .16s ease, color .16s ease;
}
.pli-tete:hover .signe { background: var(--gris); color: var(--ink); }
.pli[data-open="true"] .pli-tete .signe { transform: rotate(45deg); }
.pli-corps {
display: grid; grid-template-rows: 0fr;
transition: grid-template-rows .3s ease;
}
.pli[data-open="true"] .pli-corps { grid-template-rows: 1fr; }
.pli-corps > * {
overflow: hidden;
min-height: 0;
padding-bottom: 0;
transition: padding-bottom .3s ease;
}
.pli[data-open="true"] .pli-corps > * { padding-bottom: clamp(20px, 3vw, 32px); }
/* ------------------------------------------------------------ accordeon */
/* Pilote par app.js : .acc-item[data-open] + .acc-head[aria-expanded]. */
/* Meme logique pour l'accordeon autonome : une carte, pas une liste
flottante. A l'interieur d'un pli il redevient transparent (voir plus bas). */
.acc {
background: var(--paper);
border: var(--bord) solid var(--trait);
border-radius: var(--radius);
padding-inline: clamp(18px, 2.4vw, 30px);
box-shadow: var(--ombre);
}
.acc-item:last-child { border-bottom: 0; }
/* Un accordeon DANS un pli : la carte est deja portee par le pli, on ne
l'empile pas une seconde fois. */
.pli .acc {
background: transparent;
border: 0;
border-radius: 0;
padding-inline: 0;
box-shadow: none;
}
.pli .acc-item:first-child { border-top: var(--bord) solid var(--trait); }
.acc-item { border-bottom: var(--bord) solid var(--trait); }
.acc-head {
width: 100%;
display: flex; align-items: center; justify-content: space-between; gap: 18px;
padding: 24px 0;
font-family: var(--heading); font-weight: 500;
font-size: clamp(15px, 1.7vw, 17px);
text-align: left; line-height: 1.4;
letter-spacing: -.015em;
background: none; border: 0; color: inherit; cursor: pointer;
transition: color .16s ease;
}
.acc-head:hover { color: var(--ink); }
.acc-head::after {
content: "+";
flex: 0 0 auto;
font-size: 20px; line-height: 1;
color: var(--ink-3);
transition: transform .22s ease, color .16s ease;
}
.acc-head:hover::after { color: var(--ink); }
.acc-item[data-open="true"] .acc-head::after { transform: rotate(45deg); }
/* Repli par grid-template-rows 0fr -> 1fr.
DEUX pieges, les deux payes ici :
1. un element de grille a min-height:auto par defaut et REFUSE de descendre
sous la hauteur de son contenu, sans min-height:0 la reponse reste
visible et deborde par-dessus la question suivante ;
2. le padding n'est pas clippe par overflow:hidden, laisse en place il
maintient 20px de bavure a l'etat ferme. On l'anime avec la ligne. */
.acc-panel {
display: grid; grid-template-rows: 0fr;
transition: grid-template-rows .28s ease;
}
.acc-item[data-open="true"] .acc-panel { grid-template-rows: 1fr; }
.acc-panel > * {
overflow: hidden;
min-height: 0;
padding-bottom: 0;
transition: padding-bottom .28s ease;
}
.acc-item[data-open="true"] .acc-panel > * { padding-bottom: 20px; }
.acc-panel p { font-size: 15px; line-height: 1.65; max-width: 68ch; color: var(--ink-2); }
/* --------------------------------------------------------- roulette (iOS) */
/* Selecteur a molette, identique au tambour de l'accueil : la liste defile,
l'option visee vient se caler au centre, les voisines s'inclinent et se
compriment. Le defilement et le calage sont NATIFS (overflow + scroll-snap),
seul l'habillage est calcule dans app.js.
La valeur choisie vit dans un : pour le formulaire,
c'est un champ comme un autre. */
/* Une ligne sur deux dans une teinte differente : c'est ce qui donne la
sensation de rotation quand le tambour tourne. On prend --gris-2 et non
--gris : sur les pages sans famille, --accent-doux vaut deja --gris et les
deux teintes se confondraient. */
/* L'option au centre s'allume en pleine couleur. La classe est posee par
app.js a chaque image, donc l'allumage suit le doigt sans retard. */
/* La bande centrale marque la selection, comme le lisere d'iOS. */
/* Indice de defilement, permanent comme sur l'accueil. */
/* ------------------------------------------------ choix de seance (cartes) */
/* Remplace un