/* ==========================================================================
Edudomia — site vitrine
Système de design. Aucune dépendance externe.
Couleurs alignées sur lib/core/theme.dart de l'application.
========================================================================== */
/* ---------- Polices (self-hébergées, sous-ensemble latin) ---------- */
@font-face {
font-family: 'Jakarta';
src: url('../fonts/jakarta-400.woff2') format('woff2');
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Jakarta';
src: url('../fonts/jakarta-600.woff2') format('woff2');
font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Jakarta';
src: url('../fonts/jakarta-800.woff2') format('woff2');
font-weight: 800; font-style: normal; font-display: swap;
}
/* ---------- Jetons ---------- */
:root {
/* Marque */
--violet: #5B1FD9;
--violet-fonce: #4716B3;
--violet-nuit: #1B0B4B;
--violet-clair: #9E7BF0;
--violet-pale: #EDE6FB;
--lavande: #F3EFFB;
--ciel: #3DB7FD; /* le point du i du logo */
--ciel-lisible: #0C6FB0; /* meme famille que #3DB7FD, mais le blanc y passe a 5,36 */
--lilas-clair: #F0EAFD; /* surtitre violete sur ce bleu : 4,57 */
--bleu-nuit: #0A6698; /* fond de la section « Votre espace » */
/* Aplats francs, calculés depuis #3DB7FD sur blanc. Aucun dégradé :
une section a une couleur, pas une transition. */
--ciel-pale: #D5EFFE;
--azur: #E6F6FF;
--azur-2: #D5EFFE;
--azur-3: #BFE6FD;
--ciel-bord: rgba(61, 183, 253, .45);
--vert: #2FBF71;
--vert-pale: #E2F7EC;
/* Neutres */
--encre: #0E0D1A;
--gris: #5F5C70; /* 6.2:1 sur blanc — lisible */
--gris-clair: #E7E4F0;
--blanc: #FFFFFF;
--coquille: #FAF9FD;
--gris-doux: #F7F7FA; /* fonds de section neutres */
/* Rayons */
--r-sm: 10px;
--r: 16px;
--r-lg: 24px;
--r-xl: 32px;
--pilule: 999px;
/* Ombres — diffuses, jamais dures */
--ombre-sm: 0 1px 2px rgba(14,13,26,.04), 0 2px 8px rgba(14,13,26,.04);
--ombre: 0 2px 4px rgba(14,13,26,.03), 0 12px 32px rgba(14,13,26,.07);
--ombre-lg: 0 4px 8px rgba(14,13,26,.04), 0 24px 64px rgba(14,13,26,.10);
--ombre-violet: 0 8px 24px rgba(91,31,217,.24);
/* Rythme */
--gouttiere: clamp(20px, 5vw, 40px);
--largeur: 1200px;
--section: clamp(64px, 9vw, 128px);
/* Mouvement — calé sur la référence : court, doux, jamais spectaculaire */
--sortie: cubic-bezier(.16, 1, .3, 1);
--doux: cubic-bezier(.4, 0, .2, 1);
--t-micro: .15s;
--t-court: .28s;
--t-reveal: .62s;
}
/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 96px;
}
body {
margin: 0;
font-family: 'Jakarta', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
font-size: 17px;
line-height: 1.6;
color: var(--encre);
background: var(--blanc);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
/* Pas d'overflow-x: hidden ici : un overflow non visible sur un ancêtre
neutralise position: sticky sur toute la page. Le débordement est
maîtrisé au cas par cas (vérifié de 360 à 1920 px). */
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--violet); color: #fff; }
:focus-visible {
outline: 3px solid var(--ciel);
outline-offset: 3px;
border-radius: 4px;
}
/* ---------- Échelle typographique ----------
Tracking serré et interlignage compact sur les titres : c'est ce qui
donne l'allure « éditoriale » plutôt que « site web par défaut ». */
h1, h2, h3, h4 {
margin: 0;
font-weight: 800;
line-height: 1.06;
letter-spacing: -0.035em;
text-wrap: balance;
}
h1 { font-size: 2.6rem; font-size: clamp(2.6rem, 6.2vw, 4.4rem); }
h2 { font-size: 2rem; font-size: clamp(2rem, 4.4vw, 3.1rem); }
h3 { font-size: 1.25rem; font-size: clamp(1.25rem, 2vw, 1.55rem); letter-spacing: -0.025em; }
h4 { font-size: 1.06rem; letter-spacing: -0.015em; }
p { margin: 0; text-wrap: pretty; }
h1 + .chapo, h2 + .chapo, h3 + .chapo { margin-top: 18px; }
.surtitre {
display: inline-block;
line-height: 1.5;
font-size: .76rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--violet);
}
.chapo {
font-size: 1.02rem; font-size: clamp(1.02rem, 1.5vw, 1.16rem);
color: var(--gris);
max-width: 60ch;
}
.accent { color: var(--violet); }
/* Le point du i, repris du logo : un aplat de ciel sur un mot clé */
.pointe { color: inherit; }
.pointe::after {
/* Le point du logo est rond ; celui de la police est carré. */
content: '';
display: inline-block;
width: .15em; height: .15em;
margin-left: .07em;
border-radius: 50%;
background: var(--ciel);
vertical-align: baseline;
}
/* ---------- Structure ---------- */
.enveloppe {
width: 100%;
max-width: var(--largeur);
margin-left: auto; margin-right: auto; margin-inline: auto;
padding-left: var(--gouttiere); padding-right: var(--gouttiere); padding-inline: var(--gouttiere);
}
.section { padding-top: var(--section); padding-bottom: var(--section); padding-block: var(--section); }
.section--pale { background: var(--coquille); }
.section--lavande { background: var(--lavande); }
.section--azur { background: var(--azur); }
.section--gris { background: var(--gris-doux); }
.tete { max-width: 44rem; margin-bottom: 36px; margin-bottom: clamp(36px, 5vw, 60px); }
.tete .surtitre { margin-bottom: 14px; }
.tete .chapo { margin-top: 18px; }
.tete--centre { margin-left: auto; margin-right: auto; margin-inline: auto; text-align: center; }
.tete--centre .chapo { margin-left: auto; margin-right: auto; margin-inline: auto; }
.grille { display: grid; gap: 16px; gap: clamp(16px, 2vw, 24px); }
.grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
.grille--3, .grille--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
.grille--2, .grille--3, .grille--4 { grid-template-columns: 1fr; }
}
/* ---------- Boutons ---------- */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 15px 26px;
border-radius: var(--pilule);
font-weight: 700;
font-size: .97rem;
letter-spacing: -0.01em;
transition: transform var(--t-micro) var(--doux),
box-shadow var(--t-court) var(--doux),
background-color var(--t-court) var(--doux),
color var(--t-court) var(--doux);
will-change: transform;
}
.btn svg { flex: none; transition: transform var(--t-court) var(--sortie); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn--plein {
background: var(--violet);
color: #fff;
box-shadow: var(--ombre-violet);
}
.btn--plein:hover { background: var(--violet-fonce); transform: translateY(-2px); }
.btn--clair {
background: #fff;
color: var(--encre);
box-shadow: var(--ombre-sm);
}
.btn--clair:hover { transform: translateY(-2px); box-shadow: var(--ombre); }
.btn--contour {
border: 1.5px solid var(--gris-clair);
color: var(--encre);
}
.btn--contour:hover { border-color: var(--violet); color: var(--violet); }
.btn--nu { padding-left: 4px; padding-right: 4px; padding-inline: 4px; color: var(--encre); font-weight: 700; }
.btn--nu:hover { color: var(--violet); }
.btn--large { width: 100%; justify-content: center; }
/* ---------- Cartes ---------- */
.carte {
background: #fff;
border: 1px solid var(--gris-clair);
border-radius: var(--r-lg);
padding: 22px; padding: clamp(22px, 2.6vw, 32px);
transition: transform var(--t-court) var(--sortie),
box-shadow var(--t-court) var(--doux),
border-color var(--t-court) var(--doux);
}
.carte:hover {
transform: translateY(-4px);
box-shadow: var(--ombre);
border-color: transparent;
}
.carte h3 { margin-bottom: 10px; }
.carte p { color: var(--gris); font-size: .98rem; }
.carte__num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px; height: 44px;
margin-bottom: 20px;
border-radius: 14px;
background: var(--violet-pale);
color: var(--violet);
font-weight: 800;
font-size: .95rem;
}
.carte__num--ciel { background: var(--ciel-pale); color: #0B6FA8; }
.carte__num--vert { background: var(--vert-pale); color: #1B7A47; }
.section--nuit .carte {
background: #fff;
border-color: transparent;
color: var(--encre);
}
.section--nuit .carte p { color: var(--gris); }
.section--nuit .carte:hover { background: #fff; }
/* ---------- Annonce du hero ----------
Plus de conteneur blanc : seule la pastille « Nouveau » reste colorée,
le reste se pose directement sur la photo. */
.annonce {
display: flex;
align-items: center;
gap: 10px;
font-size: .92rem;
font-weight: 700;
color: var(--encre);
letter-spacing: -.01em;
}
.annonce span {
padding: 5px 12px;
border-radius: var(--pilule);
background: var(--ciel);
/* Sur ce bleu, du blanc tomberait à 1,9 de contraste : on écrit en nuit. */
color: var(--violet-nuit);
font-size: .74rem;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
/* ---------- Badge pilule ---------- */
.badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 7px 7px 7px 16px;
border-radius: var(--pilule);
background: #fff;
border: 1px solid var(--gris-clair);
box-shadow: var(--ombre-sm);
font-size: .87rem;
font-weight: 600;
color: var(--gris);
}
.badge strong {
padding: 4px 12px;
border-radius: var(--pilule);
background: var(--violet);
color: #fff;
font-size: .76rem;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
}
/* ---------- Mouvement ----------
Un seul geste, réutilisé partout : monter de quelques pixels en
apparaissant. Court, discret, jamais spectaculaire. */
[data-reveal] {
opacity: 0;
transform: translateY(14px) scale(.988);
transition: opacity var(--t-reveal) var(--sortie),
transform var(--t-reveal) var(--sortie);
transition-delay: var(--retard, 0ms);
}
[data-reveal].est-visible {
opacity: 1;
transform: none;
}
/* Tout se fige si l'utilisateur le demande. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
[data-reveal] { opacity: 1; transform: none; }
}
/* ==========================================================================
Composants
========================================================================== */
/* ---------- En-tête flottant ---------- */
.entete {
position: fixed;
top: 14px; right: 0; bottom: auto; left: 0; inset: 14px 0 auto;
z-index: 100;
padding-left: var(--gouttiere); padding-right: var(--gouttiere); padding-inline: var(--gouttiere);
}
.entete__barre {
display: flex;
align-items: center;
gap: 20px;
max-width: var(--largeur);
margin-left: auto; margin-right: auto; margin-inline: auto;
padding: 9px 9px 9px 20px;
border-radius: var(--pilule);
/* Verre : le fond reste largement visible, c'est le flou qui rend le
texte lisible, pas l'opacité. */
background: rgba(255,255,255,.46);
-webkit-backdrop-filter: saturate(190%) blur(22px);
backdrop-filter: saturate(190%) blur(22px);
border: 1px solid rgba(255,255,255,.55);
box-shadow: 0 1px 2px rgba(14,13,26,.04), 0 10px 34px rgba(14,13,26,.07);
transition: box-shadow var(--t-court) var(--doux), background-color var(--t-court) var(--doux);
}
/* Une fois la page défilée, on remonte un peu l'opacité : le contenu qui
passe dessous est plus contrasté que la photo du hero. */
.entete--posee .entete__barre {
background: rgba(255,255,255,.72);
box-shadow: 0 2px 6px rgba(14,13,26,.05), 0 14px 40px rgba(14,13,26,.10);
}
/* Sans backdrop-filter, la transparence rendrait la barre illisible. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.entete__barre { background: rgba(255,255,255,.93); }
}
.logo { display: flex; align-items: center; flex: none; }
/* Sans `flex: none`, le logo est la seule boîte compressible de la
barre : à 1000 px il descendait à 32 px de large, illisible. */
.logo img { height: 38px; width: auto; flex: none; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a {
position: relative;
/* Un libellé de menu ne se coupe jamais : quand la place manquait, le
flex repliait « Trouver un prof » sur deux lignes et la barre entière
passait de 68 à 91 px de haut, en sautant d'une largeur à l'autre. */
white-space: nowrap;
padding: 9px 15px;
border-radius: var(--pilule);
font-size: .93rem;
font-weight: 700;
color: #383545;
transition: color var(--t-micro) var(--doux), background-color var(--t-micro) var(--doux);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--encre); background: rgba(255,255,255,.7); }
.entete__actions {
display: flex;
align-items: center;
gap: 8px;
/* Sur mobile la navigation disparaît : sans cela, les actions viendraient
se coller au logo au lieu de rester à droite. */
margin-left: auto;
}
.entete__actions .btn { padding: 12px 20px; font-size: .92rem; white-space: nowrap; }
/* Accès direct à l'espace client sur mobile : sans lui, le seul chemin vers
la connexion passait par le menu burger. */
.entete__compte {
display: none;
width: 44px; height: 44px;
border-radius: 50%;
place-items: center;
background: var(--lavande);
color: var(--encre);
transition: background-color var(--t-micro) var(--doux), color var(--t-micro) var(--doux);
}
.entete__compte:hover { background: var(--violet-pale); color: var(--violet); }
.burger {
display: none;
/* flex-direction: column est indispensable : sans lui les trois barres
s'alignent côte à côte au lieu de s'empiler. */
flex-direction: column;
width: 44px; height: 44px;
border-radius: 50%;
align-items: center;
justify-content: center;
background: var(--azur-2);
transition: background-color var(--t-micro) var(--doux);
}
.burger:hover { background: var(--ciel-pale); }
.burger span {
display: block;
width: 17px; height: 1.8px;
background: var(--encre);
border-radius: 2px;
transition: transform var(--t-court) var(--sortie), opacity var(--t-micro) linear;
}
.burger span + span { margin-top: 4.5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.3px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.3px) rotate(-45deg); }
.menu-mobile {
display: none;
max-width: var(--largeur);
margin: 8px auto 0;
padding: 14px;
border-radius: var(--r-lg);
background: #fff;
border: 1px solid var(--gris-clair);
box-shadow: var(--ombre-lg);
}
.menu-mobile a {
display: block;
padding: 13px 16px;
border-radius: var(--r-sm);
font-weight: 600;
}
.menu-mobile a:hover { background: var(--lavande); }
.menu-mobile .btn { margin-top: 8px; }
@media (max-width: 940px) {
.nav, .entete__actions .btn--nu { display: none; }
.entete__compte { display: grid; }
.burger { display: flex; }
.menu-mobile[data-ouvert="true"] { display: block; }
}
@media (max-width: 620px) {
/* Le CTA est repris dans le menu et dans le hero : inutile de le garder ici. */
.entete__actions .btn--plein { display: none; }
.entete__barre { padding-left: 18px; }
}
/* ---------- Hero — pleine hauteur d'écran ---------- */
.hero {
position: relative;
/* svh, pas vh : sur mobile, vh compte la barre d'adresse rétractée et
découpe le bas du hero au chargement. */
min-height: 100svh;
display: flex;
align-items: center;
padding-top: 104px; padding-top: clamp(104px, 13vh, 150px);
padding-bottom: 48px; padding-bottom: clamp(48px, 8vh, 96px);
overflow: hidden;
background: var(--blanc);
}
/* Repli pour les navigateurs sans unités dynamiques. */
@supports not (height: 100svh) {
.hero { min-height: 100vh; }
}
.hero__fond {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0; inset: 0;
z-index: 0;
}
.hero__fond img {
width: 100%; height: 100%;
object-fit: cover;
object-position: 88% 50%; /* pousse le recadrage à droite : la gauche reste au voile */
}
/* Tant qu'il n'y a pas de photo : un aplat de marque. */
.hero__fond--attente { background: var(--azur); }
.hero__fond--attente .visuel__attente { top: 0; right: 0; bottom: 0; left: auto; inset: 0 0 0 auto; width: 44%; width: min(44%, 420px); }
/* Le voile : blanc franc à gauche, transparent à droite. C'est lui qui
rend le texte lisible quelle que soit la photo déposée. */
.hero__voile {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0; inset: 0;
z-index: 1;
/* Calé sur la photo : blanc franc là où passe le texte (jusqu'à ~42 %),
puis retrait rapide pour laisser les visages lisibles. */
background: linear-gradient(
96deg,
rgba(255,255,255,.94) 0%,
rgba(255,255,255,.91) 32%,
rgba(255,255,255,.86) 46%,
rgba(255,255,255,.66) 56%,
rgba(255,255,255,.30) 70%,
rgba(255,255,255,.06) 86%,
rgba(255,255,255,0) 100%
);
pointer-events: none;
}
.hero .enveloppe { position: relative; z-index: 2; }
.hero__grille {
display: grid;
grid-template-columns: minmax(0, 545px) 1fr;
gap: 32px; gap: clamp(32px, 5vw, 72px);
align-items: center;
width: 100%;
}
/* Sans min-width: 0, un enfant en width: max-content — le ruban — force la
colonne à s'élargir et déborde de l'écran au lieu d'être contraint. */
.hero__grille > * { min-width: 0; }
.hero h1 { margin: 22px 0 20px; }
/* Voile plus transparent : le gris de corps n'y suffit plus, le chapô du
hero passe en encre. */
.hero .chapo { max-width: 46ch; color: var(--encre); font-size: 1.02rem; }
.hero__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 20px;
margin-top: 32px;
}
/* ---------- Ruban de mentions ----------
Une seule ligne, jamais de retour : si le contenu dépasse la largeur, il
défile en boucle. Le défilement n'est armé par le script que lorsqu'il y
a vraiment débordement — inutile de faire bouger trois mots qui tiennent. */
.ruban {
width: 100%;
margin-top: 28px;
overflow: hidden;
/* Les bords s'estompent : une mention coupée net trahirait le procédé. */
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
/* Sans débordement, pas de masque : le premier mot ne doit pas pâlir. */
.ruban:not([data-defile-actif="true"]) {
-webkit-mask-image: none;
mask-image: none;
}
.ruban__piste {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 26px;
width: max-content;
font-size: .9rem;
font-weight: 600;
color: var(--gris);
}
.ruban__piste li {
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.ruban__piste li sup { font-size: .62em; vertical-align: super; }
.ruban__piste svg { color: var(--violet); flex: none; }
/* Séparateur entre les mentions, sauf avant la première. */
.ruban__piste li + li::before {
content: '';
width: 4px; height: 4px;
margin-right: 18px;
border-radius: 50%;
background: var(--ciel-bord);
flex: none;
}
/* Armé par le script uniquement si la ligne déborde. La piste est alors
dupliquée, d'où la translation de moitié exactement : la boucle est
invisible. */
.ruban[data-defile-actif="true"] .ruban__piste {
animation: ruban-defile var(--duree, 22s) linear infinite;
}
.ruban[data-defile-actif="true"]:hover .ruban__piste,
.ruban[data-defile-actif="true"]:focus-within .ruban__piste {
animation-play-state: paused;
}
@keyframes ruban-defile {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
.preuves__cadre { overflow-x: auto; scrollbar-width: none; }
.preuves__cadre::-webkit-scrollbar { display: none; }
.preuves__piste { transition: none; }
.ruban[data-defile-actif="true"] .ruban__piste { animation: none; }
.ruban { overflow-x: auto; scrollbar-width: none; }
.ruban::-webkit-scrollbar { display: none; }
}
/* Écran court (petit téléphone, ou paysage) : le contenu du hero dépassait
la hauteur d'écran. On le compacte plutôt que de le laisser déborder. */
@media (max-height: 700px) {
.hero { padding-top: 92px; padding-bottom: 32px; }
.hero h1 { font-size: 1.9rem; font-size: clamp(1.9rem, 6.4vw, 2.5rem); margin: 16px 0 14px; }
.hero__actions { margin-top: 22px; }
.ruban { margin-top: 18px; }
}
/* Sous 980 px, un voile latéral ne suffit plus : la photo occupe toute la
largeur derrière le texte. Le dégradé passe donc à la verticale. */
@media (max-width: 980px) {
.hero__grille { grid-template-columns: 1fr; }
.hero__voile {
background: linear-gradient(
180deg,
rgba(255,255,255,.92) 0%,
rgba(255,255,255,.88) 54%,
rgba(255,255,255,.78) 78%,
rgba(255,255,255,.48) 92%,
rgba(255,255,255,.18) 100%
);
}
.hero__fond img { object-position: 60% 30%; }
.ruban__piste { color: var(--encre); }
.hero__fond--attente .visuel__attente { top: auto; right: 0; bottom: 8%; left: 0; inset: auto 0 8% 0; width: auto; }
}
/* Carte de recherche */
.recherche {
padding: 22px;
border-radius: var(--r-xl);
background: #fff;
border: 1px solid var(--gris-clair);
box-shadow: var(--ombre-lg);
}
.recherche__titre { font-size: 1.02rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 4px; }
.recherche__note { font-size: .86rem; color: var(--gris); margin-bottom: 18px; }
.champ { margin-bottom: 12px; }
.champ label {
display: block;
margin-bottom: 7px;
font-size: .8rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--gris);
}
.champ select, .champ input {
width: 100%;
padding: 14px 16px;
border: 1.5px solid var(--gris-clair);
border-radius: var(--r);
background: var(--coquille);
font: inherit;
font-size: .97rem;
color: var(--encre);
transition: border-color var(--t-micro) var(--doux), background-color var(--t-micro) var(--doux);
appearance: none;
}
.champ select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235F5C70' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 42px;
}
.champ select:focus, .champ input:focus { outline: none; border-color: var(--violet); background: #fff; }
/* ---------- Hero sur téléphone : photo verticale, sans voile ----------
Le voile blanc est retiré : la photo cadrée en portrait se suffit. Mais
le tiers supérieur n'est pas uniformément clair — mesuré sur l'image :
luminance moyenne élevée, avec des creux (rideau, étagère) où du texte
encre nu tombe à 1,9 de contraste. D'où un halo blanc porté par les
lettres elles-mêmes : il rattrape ces creux sans poser de bloc de
couleur par-dessus la photo. */
@media (max-width: 720px) {
.hero {
/* La colonne occupe toute la hauteur : le titre reste en haut, le champ
d'appel descend en bas de l'écran. Entre les deux, une marge
automatique — c'est elle qui dégage les visages de la photo. */
align-items: stretch;
padding-top: 96px; padding-top: clamp(96px, 15vh, 132px);
padding-bottom: 18px; padding-bottom: clamp(18px, 4vh, 34px);
}
.hero:not(.hero--prof) .hero__grille { align-content: stretch; }
.hero:not(.hero--prof) .hero__grille > div {
display: flex;
flex-direction: column;
min-height: 100%;
}
/* Le chapô pousse tout ce qui suit vers le bas. */
.hero:not(.hero--prof) .chapo { margin-bottom: auto; }
/* Le ruban de mentions se place juste au-dessus du champ d'appel. */
.hero:not(.hero--prof) .ruban { order: 2; margin: 0 0 14px; }
.quete { order: 3; margin: 0; }
/* Le voile revient, vertical et volontairement discret : il assied le
texte sans effacer la photo, le halo des lettres faisant le reste. */
.hero__voile {
display: block;
background: linear-gradient(
180deg,
rgba(255,255,255,.90) 0%,
rgba(255,255,255,.86) 32%,
rgba(255,255,255,.66) 54%,
rgba(255,255,255,.30) 76%,
rgba(255,255,255,0) 100%
);
}
.hero__fond img { object-position: 50% 50%; }
.hero__grille { align-items: start; }
.annonce {
text-shadow: 0 1px 2px rgba(255,255,255,.9), 0 0 18px rgba(255,255,255,.8);
}
.hero h1 {
color: var(--encre);
font-size: 2.1rem; font-size: clamp(2.1rem, 9.2vw, 2.9rem);
margin: 18px 0 14px;
text-shadow: 0 1px 2px rgba(255,255,255,.9), 0 0 22px rgba(255,255,255,.8);
}
.hero h1 .accent { color: var(--violet-fonce); }
.hero .chapo {
/* Le gris ne tient pas sur photo : on passe à l'encre. */
color: var(--encre);
font-weight: 500;
font-size: .95rem;
line-height: 1.52;
max-width: 40ch;
text-shadow: 0 1px 2px rgba(255,255,255,.9), 0 0 20px rgba(255,255,255,.8);
}
.hero__actions { margin-top: 26px; }
/* Le lien secondaire tombait sur le visage de l'enseignant : sur cette
photo, un texte sans fond n'a pas sa place au-delà du premier tiers.
« Comment ça marche » reste accessible par la navigation. */
.hero__actions .btn--nu { display: none; }
/* Sur la photo, le ruban a besoin du même halo que le reste. */
.ruban__piste {
color: var(--encre);
font-size: .86rem;
text-shadow: 0 1px 2px rgba(255,255,255,.9), 0 0 16px rgba(255,255,255,.8);
}
.ruban__piste li + li::before { background: rgba(14,13,26,.28); }
}
/* ---------- Bande de confiance ----------
Fond blanc, aucune boîte : des mentions séparées par des filets fins.
Le défilement avance d'un cran à la fois — la file glisse d'un élément,
marque un temps, recommence. */
.preuves {
background: #fff;
border-bottom: 1px solid var(--gris-clair);
padding-top: 22px; padding-bottom: 22px; padding-block: clamp(22px, 3.4vw, 38px);
}
.preuves__cadre { overflow: hidden; }
.preuves__piste {
display: flex;
flex-wrap: nowrap;
align-items: center;
width: max-content;
/* La translation est posée par le script, cran par cran. */
transition: transform .62s var(--sortie);
}
/* Sans défilement, les mentions se répartissent sur toute la largeur. */
.preuves__cadre:not([data-pas="true"]) .preuves__piste { width: 100%; }
.preuves__cadre:not([data-pas="true"]) .preuve { flex: 1 1 0; }
.preuve {
flex: 0 0 auto;
display: flex;
align-items: baseline;
gap: 10px;
padding: 4px 20px; padding: 4px clamp(20px, 3vw, 40px);
min-width: 200px;
}
/* Le filet de séparation, fin et discret. */
.preuve + .preuve { border-left: 1px solid var(--gris-clair); }
.preuve__chiffre {
font-size: 1.35rem; font-size: clamp(1.35rem, 2vw, 1.7rem);
font-weight: 800;
letter-spacing: -.035em;
line-height: 1;
color: var(--violet);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.preuve__chiffre sup { font-size: .5em; vertical-align: super; }
.preuve__libelle {
font-size: .87rem;
font-weight: 600;
color: var(--gris);
line-height: 1.3;
}
@media (max-width: 620px) {
.preuve { min-width: 0; padding-left: 18px; padding-right: 18px; padding-inline: 18px; }
.preuve__libelle { font-size: .82rem; }
}
/* ---------- Étapes ---------- */
.etape { position: relative; }
.etape__fil {
position: absolute;
top: 22px; left: 56px; right: -24px;
height: 1.5px;
background: repeating-linear-gradient(90deg, var(--gris-clair) 0 7px, transparent 7px 14px);
}
.etape:last-child .etape__fil { display: none; }
@media (max-width: 900px) { .etape__fil { display: none; } }
/* ---------- Matières ---------- */
.matiere {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 22px;
border-radius: var(--r);
background: #fff;
border: 1px solid var(--gris-clair);
font-weight: 700;
transition: transform var(--t-micro) var(--sortie), border-color var(--t-micro) var(--doux), box-shadow var(--t-court) var(--doux);
}
.matiere:hover { transform: translateY(-3px); border-color: var(--violet); box-shadow: var(--ombre); }
.matiere span { font-size: .88rem; font-weight: 600; color: var(--gris); }
.carte .tarif, .tarif {
display: flex;
align-items: baseline;
gap: 6px;
font-size: 1.7rem; font-size: clamp(1.7rem, 3vw, 2.2rem);
font-weight: 800;
letter-spacing: -.035em;
color: var(--encre);
}
.tarif small { font-size: .92rem; font-weight: 600; color: var(--gris); letter-spacing: 0; }
/* ---------- Témoignages ---------- */
.avis { display: flex; flex-direction: column; gap: 18px; height: 100%; }
.avis__texte { font-size: 1.02rem; line-height: 1.62; }
.avis__pied { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.avis__pastille {
width: 42px; height: 42px;
border-radius: 50%;
background: var(--violet-pale);
color: var(--violet);
display: grid;
place-items: center;
font-weight: 800;
flex: none;
}
.avis__nom { font-weight: 700; font-size: .95rem; }
.avis__role { font-size: .85rem; color: var(--gris); }
.etoiles { display: flex; gap: 3px; color: #F5A524; }
/* ---------- FAQ ---------- */
.faq { max-width: 46rem; margin-left: auto; margin-right: auto; margin-inline: auto; }
.faq details {
border-bottom: 1px solid var(--gris-clair);
}
.faq summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 22px 4px;
font-weight: 700;
font-size: 1.03rem;
letter-spacing: -.015em;
cursor: pointer;
list-style: none;
transition: color var(--t-micro) var(--doux);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--violet); }
.faq summary::after {
content: '';
flex: none;
width: 11px; height: 11px;
border-right: 2.2px solid var(--gris);
border-bottom: 2.2px solid var(--gris);
transform: rotate(45deg) translateY(-3px);
transition: transform var(--t-court) var(--sortie);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq details[open] summary { color: var(--violet); }
.faq__corps { padding: 0 4px 24px; color: var(--gris); max-width: 62ch; }
/* ---------- Bandeau CTA ---------- */
.bandeau {
position: relative;
padding: 40px; padding: clamp(40px, 6vw, 72px);
border-radius: var(--r-xl);
/* Dégradé conservé : c'est l'exception voulue avec les voiles du hero. */
background: linear-gradient(135deg, var(--violet) 0%, #3A1BB0 46%, #0E2A6B 78%, var(--violet-nuit) 100%);
color: #fff;
overflow: hidden;
text-align: center;
}
.bandeau::before {
content: '';
position: absolute;
top: -40%; right: -12%;
width: 34rem; height: 34rem;
border-radius: 50%;
pointer-events: none;
}
.bandeau > * { position: relative; }
.bandeau p { color: rgba(255,255,255,.8); margin: 16px auto 30px; max-width: 48ch; }
/* ---------- Devenir prof ---------- */
.prof-bloc {
display: grid;
grid-template-columns: 1.05fr .95fr;
align-items: stretch;
border-radius: var(--r-xl);
background: var(--ciel-pale);
/* Surtout pas `overflow: hidden` ici : ça ferait du bloc un conteneur de
défilement, et la timeline de parallaxe du panneau photo, mesurée dans
son plus proche scrollport, resterait figée à 50 %. C'est le panneau
lui-même qui porte l'arrondi, côté extérieur. */
}
.prof-bloc__texte {
padding: 28px; padding: clamp(28px, 4vw, 56px);
border-radius: var(--r-xl) 0 0 var(--r-xl);
background: inherit;
}
@media (max-width: 860px) {
.prof-bloc__texte { border-radius: var(--r-xl) var(--r-xl) 0 0; }
}
/* La photo occupe sa moitié entièrement : aucun écart avec le bloc. */
.prof-bloc__photo {
position: relative;
min-height: 100%;
overflow: hidden;
border-radius: 0 var(--r-xl) var(--r-xl) 0;
background: var(--violet-pale);
box-shadow: inset 0 0 0 1px rgba(91, 31, 217, .10);
}
.prof-bloc__photo img {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
@media (max-width: 860px) {
.prof-bloc { grid-template-columns: 1fr; }
/* Le portrait est un 4:5. Le recadrer en 4:3 coupait la tête : on garde
son format d'origine, et rien n'est perdu. Empilé, le panneau arrondit
ses coins du bas et non ceux de droite. */
.prof-bloc__photo {
aspect-ratio: 4 / 5;
min-height: 0;
border-radius: 0 0 var(--r-xl) var(--r-xl);
}
}
/* Mentions sans boîte : une coche, un mot. */
.puces {
display: flex;
flex-direction: column;
gap: 11px;
margin-top: 24px;
}
.puces li {
display: flex;
align-items: center;
gap: 10px;
font-size: .93rem;
font-weight: 600;
}
.puces svg { flex: none; color: var(--ciel); }
/* ---------- Emplacements d'images ----------
Chaque bloc porte son ratio. Pour remplacer : déposer le fichier au nom
indiqué dans site/assets/img/ et échanger la div contre une ![]()
portant les mêmes width/height. Voir site/README.md. */
.visuel {
position: relative;
border-radius: var(--r-xl);
overflow: hidden;
background: var(--ciel-pale);
box-shadow: var(--ombre-lg);
}
.visuel img { width: 100%; height: 100%; object-fit: cover; }
.visuel--4x3 { aspect-ratio: 4 / 3; }
.visuel--1x1 { aspect-ratio: 1 / 1; }
/* `margin-inline: auto` seul fait passer la boite en largeur fit-content :
comme le seul enfant est en position absolue, elle tombait a 0 px et le
visuel disparaissait. La largeur est donc explicite, et c'est max-width
qui borne la hauteur via le ratio. */
.visuel--3x4 { aspect-ratio: 3 / 4; width: 100%; max-width: 465px; margin-left: auto; margin-right: auto; margin-inline: auto; }
.visuel--16x9 { aspect-ratio: 16 / 9; }
.visuel__attente {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0; inset: 0;
display: grid;
place-content: center;
gap: 6px;
text-align: center;
padding: 24px;
color: var(--violet);
}
.visuel__attente strong { font-size: .95rem; }
.visuel__attente span { font-size: .82rem; color: var(--gris); }
/* ---------- Pied de page ---------- */
.pied {
background: var(--violet);
color: rgba(255,255,255,.84); /* 0,68 tombait à 4,39 sur ce violet */
padding-top: 52px; padding-bottom: 32px; padding-block: clamp(52px, 7vw, 80px) 32px;
font-size: .93rem;
}
.pied__grille {
display: grid;
grid-template-columns: 1.5fr repeat(3, 1fr);
gap: 28px; gap: clamp(28px, 4vw, 48px);
padding-bottom: 44px;
}
@media (max-width: 860px) { .pied__grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pied__grille { grid-template-columns: 1fr; } }
.pied img { height: 26px; margin-bottom: 18px; }
.pied h4 { color: #fff; margin-bottom: 16px; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
.pied li + li { margin-top: 11px; }
.pied a { transition: color var(--t-micro) var(--doux); }
.pied a:hover { color: #fff; }
.pied__bas {
display: flex;
flex-wrap: wrap;
gap: 12px 24px;
justify-content: space-between;
padding-top: 26px;
border-top: 1px solid rgba(255,255,255,.22);
font-size: .86rem;
}
/* ---------- Lien d'évitement ---------- */
.evitement {
position: absolute;
left: -9999px;
z-index: 200;
}
.evitement:focus {
left: 50%;
top: 12px;
transform: translateX(-50%);
padding: 12px 22px;
background: var(--violet);
color: #fff;
border-radius: var(--pilule);
font-weight: 700;
}
/* ==========================================================================
Pile de cartes (section « Pourquoi Edudomia »)
L'intro reste au top pendant que les cartes viennent se poser les unes
sur les autres, chacune un cran plus bas — d'où l'impression de plan
incliné — et légèrement de travers, comme une pile faite à la main.
Aucun JavaScript : uniquement position: sticky et un top croissant.
========================================================================== */
.pile__grille {
display: grid;
grid-template-columns: .88fr 1.12fr;
gap: 32px; gap: clamp(32px, 5vw, 72px);
/* Surtout PAS align-items: start ici : un grid item non étiré fait
exactement la hauteur de son contenu, et un enfant sticky n'a alors
aucune course sur laquelle coller. La colonne doit s'étirer sur toute
la hauteur de la pile. */
}
.pile__col { min-height: 100%; }
.pile__intro {
position: sticky;
top: 50%;
transform: translateY(-50%);
}
.pile__intro .visuel { margin-top: 32px; }
@media (max-height: 720px) {
.pile__intro { top: 100px; top: clamp(100px, 13vh, 140px); transform: none; }
}
/* Seuil mesuré, pas estimé. L'intro collée fait 501 px avec la photo ;
au-dessus de 620 px de fenêtre elle tient entièrement à l'écran (à
640 px : haut 100, bas 601). Le seuil précédent était à 860 px, ce qui
escamotait la photo sur à peu près tous les portables — une fenêtre de
navigateur sur un MacBook fait ~740 px de haut. */
@media (max-height: 620px) {
.pile__intro .visuel { display: none; }
}
.pile__liste {
/* Un peu d'air après la dernière carte : la section suivante vient
ensuite pousser la pile hors de l'écran. */
padding-bottom: 40px; padding-bottom: clamp(40px, 8vh, 90px);
}
.pile__item {
position: sticky;
/* Le décalage entre deux cartes posées : c'est lui qui dessine l'escalier. */
--marche: 18px;
--ancre: clamp(130px, calc(50vh - 168px), 260px);
top: calc(var(--ancre) + var(--rang, 0) * var(--marche));
}
.pile__item:nth-child(1) { --rang: 0; }
.pile__item:nth-child(2) { --rang: 1; }
.pile__item:nth-child(3) { --rang: 2; }
.pile__item:nth-child(4) { --rang: 3; }
.pile__item:nth-child(5) { --rang: 4; }
.pile__item:nth-child(6) { --rang: 5; }
/* La distance de défilement entre deux cartes. */
.pile__item + .pile__item { margin-top: 140px; margin-top: clamp(140px, 24vh, 260px); }
.carte--pile {
position: relative;
overflow: hidden;
background: #fff;
box-shadow: var(--ombre-lg);
border: 1px solid rgba(14, 13, 26, .07);
transform: rotate(var(--gite, 0deg));
transform-origin: 50% 100%;
transition: transform var(--t-court) var(--sortie), box-shadow var(--t-court) var(--doux);
}
/* Les gîtes sont volontairement irrégulières : une pile alignée au degré
près ne ressemble pas à une pile. */
.pile__item:nth-child(1) .carte--pile { --gite: -1.5deg; }
.pile__item:nth-child(2) .carte--pile { --gite: 1.1deg; }
.pile__item:nth-child(3) .carte--pile { --gite: -0.6deg; }
.pile__item:nth-child(4) .carte--pile { --gite: 1.6deg; }
.pile__item:nth-child(5) .carte--pile { --gite: -1.2deg; }
.carte--pile:hover { transform: rotate(var(--gite, 0deg)) translateY(-3px); }
.carte--pile .carte__num { margin-bottom: 16px; }
/* La photo de l'intro ne s'affiche qu'à partir de 940 px ; en dessous,
c'est le double ci-dessous qui prend le relais, APRÈS la pile. */
.pile__apres { display: none; }
@media (max-width: 940px) {
.pile__grille { grid-template-columns: 1fr; }
.pile__apres {
display: block;
margin-top: 28px; margin-top: clamp(28px, 7vw, 48px);
}
.pile__intro {
position: static;
transform: none;
margin-bottom: 44px; margin-bottom: clamp(44px, 11vw, 76px);
}
.pile__intro .visuel { display: none; } /* la photo repasse plus bas */
.pile__item { --marche: 12px; top: calc(88px + var(--rang, 0) * var(--marche)); }
.pile__item + .pile__item { margin-top: 18vh; }
}
/* Empiler des cartes est un effet de position, pas une animation : il reste
actif en mouvement réduit. On redresse simplement les gîtes. */
@media (prefers-reduced-motion: reduce) {
.carte--pile { transform: none; }
}
/* ==========================================================================
Carrousel de témoignages
========================================================================== */
.carrousel { position: relative; }
.carrousel__piste {
display: flex;
gap: 16px; gap: clamp(16px, 2vw, 24px);
overflow-x: auto;
scroll-snap-type: x mandatory;
/* Pas de scroll-behavior: smooth ici : le script anime déjà ses
défilements, et deux animations empilées s'interrompent. */
padding: 4px 4px 8px;
margin: -4px -4px -8px;
scrollbar-width: none;
-ms-overflow-style: none;
overscroll-behavior-x: contain;
}
.carrousel__piste::-webkit-scrollbar { display: none; }
.carrousel__item {
flex: 0 0 calc((100% - 2 * 16px) / 3); flex: 0 0 calc((100% - 2 * clamp(16px, 2vw, 24px)) / 3);
scroll-snap-align: start;
display: flex;
}
.carrousel__item > * { width: 100%; }
@media (max-width: 1000px) {
.carrousel__item { flex-basis: calc((100% - 16px) / 2); flex-basis: calc((100% - clamp(16px, 2vw, 24px)) / 2); }
}
@media (max-width: 680px) {
.carrousel__item { flex-basis: 100%; }
}
.carrousel__controles {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin-top: 32px;
}
.carrousel__fleche {
display: grid;
place-items: center;
width: 46px; height: 46px;
border-radius: 50%;
border: 1.5px solid var(--gris-clair);
color: var(--encre);
background: #fff;
transition: border-color var(--t-micro) var(--doux),
color var(--t-micro) var(--doux),
transform var(--t-micro) var(--sortie);
}
.carrousel__fleche:hover { border-color: var(--violet); color: var(--violet); transform: translateY(-2px); }
.carrousel__fleche:disabled { opacity: .35; pointer-events: none; }
.carrousel__points { display: flex; gap: 8px; }
.carrousel__point {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--gris-clair);
transition: background-color var(--t-court) var(--doux), width var(--t-court) var(--sortie);
}
.carrousel__point[aria-current="true"] { width: 26px; border-radius: var(--pilule); background: var(--violet); }
/* ==========================================================================
Section « Dites-nous l'essentiel » : diaporama + formulaire
========================================================================== */
.essentiel__grille {
display: grid;
grid-template-columns: .92fr 1.08fr;
gap: 28px; gap: clamp(28px, 4.5vw, 64px);
align-items: center;
}
@media (max-width: 900px) {
.essentiel__grille { grid-template-columns: 1fr; }
}
/* Cadre d'images qui alternent — deux vues qui glissent, en boucle. */
.diapos {
position: relative;
aspect-ratio: 4 / 5;
border-radius: var(--r-xl);
overflow: hidden; overflow: clip;
box-shadow: var(--ombre-lg);
background: var(--violet-pale);
}
.diapos__piste {
display: flex;
height: 100%;
transition: transform .78s var(--sortie);
will-change: transform;
}
.diapos__vue {
flex: 0 0 100%;
position: relative;
height: 100%;
}
.diapos__vue img { width: 100%; height: 100%; object-fit: cover; }
.diapos__vue:nth-child(odd) { background: var(--violet-pale); }
.diapos__vue:nth-child(even) { background: var(--ciel-pale); }
/* Variante 3:4 pour les captures de l'espace parent. `width: 100%` est
obligatoire à côté de `margin-inline: auto` : sans elle, la boîte passe en
largeur fit-content, et comme les vues sont en position absolue elle
tombe à 0 px. Même piège que .visuel--3x4. */
.diapos--3x4 {
aspect-ratio: 3 / 4;
width: 100%;
max-width: 465px;
margin-left: auto; margin-right: auto; margin-inline: auto;
background: var(--ciel-pale);
}
.diapos__points {
position: absolute;
left: 50%; bottom: 16px;
transform: translateX(-50%);
display: flex;
gap: 7px;
padding: 7px 11px;
border-radius: var(--pilule);
background: rgba(255,255,255,.72);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.diapos__point {
width: 7px; height: 7px;
border-radius: 50%;
background: rgba(14,13,26,.22);
transition: background-color var(--t-court) var(--doux), width var(--t-court) var(--sortie);
}
.diapos__point[aria-current="true"] { width: 22px; border-radius: var(--pilule); background: var(--violet); }
@media (prefers-reduced-motion: reduce) {
.diapos__piste { transition: none; }
}
/* ==========================================================================
Champ d'appel du hero
L'aspect d'un champ de recherche, la fonction d'un point d'entrée : la
saisie part vers le wizard de l'application, rien n'est cherché ici.
========================================================================== */
.quete {
display: flex;
cursor: pointer;
text-decoration: none;
align-items: center;
gap: 8px;
width: 100%; width: min(100%, 520px);
margin-top: 30px;
padding: 7px 7px 7px 18px;
border-radius: var(--pilule);
background: #fff;
border: 1px solid var(--gris-clair);
box-shadow: var(--ombre);
transition: box-shadow var(--t-court) var(--doux), border-color var(--t-court) var(--doux);
}
.quete:hover, .quete:focus-visible {
border-color: var(--violet);
box-shadow: var(--ombre-lg);
}
.quete:hover .quete__bouton { background: var(--violet-fonce); }
.quete:hover .quete__bouton svg { transform: translateX(3px); }
.quete__loupe { flex: none; color: var(--gris); }
.quete__texte {
flex: 1 1 auto;
min-width: 0;
padding: 12px 0;
font-size: .98rem;
color: var(--gris);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.quete__bouton {
flex: none;
display: inline-flex;
pointer-events: none; /* le lien entier est la cible du clic */
align-items: center;
gap: 8px;
padding: 13px 22px;
border-radius: var(--pilule);
background: var(--violet);
color: #fff;
font-weight: 700;
font-size: .93rem;
letter-spacing: -.01em;
box-shadow: var(--ombre-violet);
transition: background-color var(--t-court) var(--doux), transform var(--t-micro) var(--doux);
}
.quete__bouton svg { transition: transform var(--t-court) var(--sortie); }
/* Sous 430 px, le champ et le bouton ne tiennent plus sur une ligne. */
@media (max-width: 430px) {
.quete {
flex-wrap: wrap;
border-radius: var(--r-lg);
padding: 6px 6px 6px 16px;
}
.quete__texte { flex: 1 1 60%; }
.quete__bouton { flex: 1 1 100%; justify-content: center; }
}
/* ==========================================================================
Le bleu dans le reste de la page
Le violet reste la couleur d'action ; le bleu du logo devient celle de
l'atmosphère — fonds, halos, seconds accents. Deux rôles distincts, pour
que rien ne se dispute la lecture.
========================================================================== */
/* Un surtitre sur deux passe au bleu, pour rythmer la descente. */
/* Les surtitres redeviennent du texte. Le violet est la seule des deux
couleurs de marque qui tienne le contraste sur fond clair : #3DB7FD y
plafonne à 2,0. Le ciel reprend la main sur les fonds sombres. */
.section--azur .surtitre { color: var(--violet); }
/* Les cartes posées sur un fond bleu prennent une bordure de la même
famille : un gris neutre y paraîtrait sale. */
.section--azur .carte { border-color: var(--ciel-bord); }
.section--azur .carte:hover {
box-shadow: 0 2px 4px rgba(14,13,26,.03), 0 18px 44px rgba(61,183,253,.24);
}
/* Toutes les cartes de la pile sont blanches ; c'est l'icône en filigrane
qui les distingue. */
.carte__filigrane {
position: absolute;
right: -14px; bottom: -18px;
width: 148px; height: 148px;
color: var(--ciel);
opacity: .16;
pointer-events: none;
}
.carte--pile h3, .carte--pile p, .carte--pile .carte__num { position: relative; z-index: 1; }
.carte--pile p { max-width: 34rem; }
@media (max-width: 620px) {
.carte__filigrane { width: 108px; height: 108px; right: -10px; bottom: -14px; }
}
/* Section sombre : le halo passe du violet au bleu, et les cartes
internes s'éclairent d'un liseré ciel. */
.section--nuit {
/* Choix assumé de Daniel : fond #3DB7FD, titre et corps en blanc.
Mesuré : le blanc y donne 2,24 et le violet du surtitre 3,55, donc
sous le seuil AA. Si le rendu ne convient pas, deux leviers : passer
le fond à var(--ciel-lisible) (#0C6FB0, blanc à 5,36) ou remettre le
texte en var(--violet-nuit) (7,85). */
background: var(--ciel);
color: #fff;
}
.section--nuit h2 { color: #fff; }
.section--nuit .chapo { color: #fff; }
.section--nuit .surtitre { color: var(--violet); } /* 7,85 ; le violet clair plafonnait à 3,55 */
.section--nuit .carte:hover { box-shadow: 0 18px 40px rgba(10,60,90,.18); }
.section--nuit .carte h4 { color: var(--violet); }
/* Matières : le survol alterne violet et bleu, comme les boîtes de preuve. */
.matiere:nth-child(even):hover { border-color: var(--ciel); }
.matiere:nth-child(even):hover span { color: var(--violet-nuit); }
/* Étapes : le fil pointillé prend la teinte du fond. */
.etape__fil {
background: repeating-linear-gradient(90deg, rgba(61,183,253,.34) 0 7px, transparent 7px 14px);
}
/* FAQ : la question ouverte se signale en bleu, pour ne pas répéter le
violet des boutons. */
/* Le ciel ne peut pas porter ce texte (2,0) : il colore le chevron, et la
question ouverte reste en violet, couleur d'action de la page. */
.faq details[open] summary { color: var(--violet); }
.faq summary:hover { color: var(--violet); }
.faq details[open] summary::after { border-color: var(--ciel); }
.faq summary:hover::after { border-color: var(--ciel); }
.faq details { border-bottom-color: rgba(61, 183, 253, .24); }
/* Halo du bandeau final — conservé avec son dégradé. */
.bandeau::before {
background: radial-gradient(circle, rgba(61,183,253,.46) 0%, transparent 66%);
}
/* Le champ d'appel : loupe bleue, et un halo bleu au survol. */
.quete__loupe {
color: var(--violet-nuit);
box-sizing: content-box;
padding: 7px;
margin-left: -6px;
border-radius: 50%;
background: var(--ciel);
}
.quete:hover, .quete:focus-visible {
box-shadow: 0 4px 10px rgba(14,13,26,.05), 0 22px 50px rgba(61,183,253,.28);
}
/* Fond de section violacé : le même lilas que le cadre photo du bloc. */
.section--lilas { background: var(--violet-pale); }
/* Le bloc « Devenir enseignant » : violet plein. */
.prof-bloc,
.section--azur .prof-bloc,
.section--lilas .prof-bloc {
background: var(--violet);
color: #fff;
}
.prof-bloc h2 { color: #fff; }
.prof-bloc .chapo { color: rgba(255,255,255,.86); }
/* Le ciel sur ce violet ne donne que 3,55 : insuffisant pour un texte de
12 px. Le surtitre passe en blanc, le ciel garde les coches. */
.prof-bloc .surtitre { color: rgba(255,255,255,.92); }
.prof-bloc .puces li { color: rgba(255,255,255,.94); }
.prof-bloc .btn--plein {
background: #fff;
color: var(--violet);
box-shadow: 0 8px 24px rgba(0,0,0,.22);
}
.prof-bloc .btn--plein:hover { background: var(--ciel); color: var(--violet-nuit); }
/* Diaporama : les points actifs en bleu, cohérents avec le cadre. */
.diapos__point[aria-current="true"] { background: var(--ciel); }
/* Carrousel : les points suivent la même logique. */
.carrousel__point[aria-current="true"] { background: var(--ciel); }
.carrousel__fleche:hover { border-color: var(--ciel); color: var(--violet-nuit); background: var(--ciel); }
/* Pied de page en violet plein. Le ciel y écrit au survol (4,9 sur ce
violet), ce qui garde un rappel de la seconde couleur. */
.pied a:hover { color: var(--ciel); }
/* En-tête : au survol, les liens prennent le fond azur plutôt que lavande
quand la page a défilé sur une section bleue — un détail, mais la barre
flotte au-dessus de tout. */
.nav a:hover, .nav a[aria-current="page"] { background: var(--azur-2); }
.entete__compte { background: var(--azur-2); }
.entete__compte:hover { background: var(--ciel); color: var(--violet-nuit); }
/* ==========================================================================
Conseiller pédagogique
========================================================================== */
.conseiller {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 20px; gap: clamp(20px, 3vw, 40px);
padding: 26px; padding: clamp(26px, 3.4vw, 44px);
border-radius: var(--r-xl);
background: #fff;
border: 1px solid var(--ciel-bord);
box-shadow: var(--ombre-lg);
}
.conseiller__pastille {
display: grid;
place-items: center;
width: 68px; height: 68px;
border-radius: 22px;
background: var(--azur);
color: var(--violet);
flex: none;
}
.conseiller h3 { font-size: 1.18rem; font-size: clamp(1.18rem, 2vw, 1.5rem); margin-bottom: 8px; }
.conseiller p { color: var(--gris); max-width: 52ch; }
.conseiller__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 860px) {
.conseiller { grid-template-columns: 1fr; text-align: left; }
.conseiller__actions { width: 100%; }
.conseiller__actions .btn { flex: 1 1 auto; justify-content: center; }
}
/* ==========================================================================
Nos conseils — cartes d'article, photo en fond
Une carte = un lien. Le voile sombre est indispensable : sans lui, aucun
texte n'est garanti lisible sur une photo qu'on ne choisit pas ici.
========================================================================== */
.article {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 420px;
padding: 22px; padding: clamp(22px, 2.6vw, 30px);
border-radius: var(--r-xl);
overflow: hidden;
isolation: isolate;
background: var(--violet-nuit);
color: #fff;
transition: transform var(--t-court) var(--sortie), box-shadow var(--t-court) var(--doux);
}
.article:hover { transform: translateY(-4px); box-shadow: var(--ombre-lg); }
.article__fond {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: -2;
}
/* Le seul dégradé toléré ici : c'est un voile de lisibilité, pas une
décoration. Sans lui le texte blanc dépend de la photo. */
.article::after {
content: "";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0; inset: 0;
z-index: -1;
background: linear-gradient(180deg, rgba(11,7,32,.12) 0%, rgba(11,7,32,.58) 46%, rgba(11,7,32,.88) 100%);
}
.article__categorie {
position: absolute;
top: 18px; top: clamp(18px, 2.2vw, 26px);
left: 22px; left: clamp(22px, 2.6vw, 30px);
padding: 7px 13px;
border-radius: var(--pilule);
background: var(--ciel);
color: var(--violet-nuit);
font-size: .72rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
.article h3 {
font-size: 1.15rem; font-size: clamp(1.15rem, 1.9vw, 1.42rem);
line-height: 1.25;
color: #fff;
margin-bottom: 10px;
}
.article p {
font-size: .95rem;
color: rgba(255,255,255,.86);
margin-bottom: 18px;
}
.article__meta {
display: flex;
align-items: center;
gap: 10px;
font-size: .84rem;
font-weight: 600;
color: rgba(255,255,255,.82);
}
.article__meta span::before { content: "·"; margin-right: 10px; }
.article__meta span:first-child::before { content: none; }
/* Attente de photo : même cadre, mais on voit qu'il manque une image. */
.article__attente {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0; inset: 0;
z-index: -2;
display: grid;
place-content: center;
gap: 6px;
text-align: center;
padding: 20px;
background: var(--violet-nuit);
color: rgba(255,255,255,.5);
font-size: .8rem;
}
.article__attente strong { color: rgba(255,255,255,.72); font-size: .86rem; }
/* Une carte à la fois, quelle que soit la largeur : c'est le défilement
« un par un » demandé, piloté par les flèches. */
.carrousel--solo .carrousel__item { flex-basis: 100%; }
.carrousel--solo .carrousel__controles { justify-content: space-between; }
.carrousel--solo .carrousel__fleche { width: 52px; height: 52px; }
/* ==========================================================================
Blog : grille d'articles et page d'article
========================================================================== */
.blog__grille {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 18px; gap: clamp(18px, 2.2vw, 28px);
}
.blog__grille .article { min-height: 380px; }
.page-tete {
padding-top: 120px; padding-bottom: 30px; padding-block: clamp(120px, 15vh, 170px) clamp(30px, 4vw, 48px);
background: var(--azur);
}
.fil {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 18px;
font-size: .88rem;
color: var(--gris);
}
.fil a { color: var(--violet); font-weight: 600; }
.fil span[aria-hidden] { color: var(--gris); }
.papier { max-width: 44rem; margin-left: auto; margin-right: auto; margin-inline: auto; }
.papier > * + * { margin-top: 1.15em; }
.papier h2 {
font-size: 1.35rem; font-size: clamp(1.35rem, 2.6vw, 1.75rem);
margin-top: 2em;
}
.papier h3 { font-size: 1.1rem; margin-top: 1.6em; }
.papier p { color: #2A2838; line-height: 1.75; }
.papier ul, .papier ol { padding-left: 1.15em; color: #2A2838; line-height: 1.75; }
.papier ul { list-style: disc; }
.papier ol { list-style: decimal; }
.papier li + li { margin-top: .45em; }
.papier strong { color: var(--encre); }
.papier blockquote {
padding: 18px 22px;
border-left: 3px solid var(--ciel);
background: var(--azur);
border-radius: 0 var(--r) var(--r) 0;
color: var(--encre);
font-weight: 600;
}
.encart {
padding: 20px; padding: clamp(20px, 2.6vw, 28px);
border-radius: var(--r-lg);
background: var(--violet-pale);
border: 1px solid rgba(91,31,217,.14);
}
.encart h3 { margin-top: 0; color: var(--violet); }
.encart p { margin-top: 8px; }
.papier .encart p { color: #2A2838; line-height: 1.75; }
.article__entete-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-top: 18px;
font-size: .9rem;
font-weight: 600;
color: var(--gris);
}
.article__entete-meta span::before { content: "·"; margin-right: 10px; }
.article__entete-meta span:first-child::before { content: none; }
.etiquette {
padding: 6px 12px;
border-radius: var(--pilule);
background: var(--violet);
color: #fff;
font-size: .72rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
.etiquette::before { content: none !important; }
.papier__visuel {
position: relative; /* sinon l'attente absolue s'echappe vers le haut */
aspect-ratio: 16 / 9;
margin-top: 24px; margin-bottom: 24px; margin-block: clamp(24px, 4vw, 40px);
border-radius: var(--r-xl);
overflow: hidden;
background: var(--ciel-pale);
}
.papier__visuel img { width: 100%; height: 100%; object-fit: cover; }
/* Ajustements de finition ------------------------------------------------ */
/* L'attente de photo se place en haut de la carte : au centre elle passait
derriere le titre. */
.article__attente {
align-content: start;
padding-top: 76px; /* sous la pastille de categorie, au-dessus du titre */
font-size: .74rem;
}
/* Une carte d'article large ne doit pas etaler son texte sur 1 100 px. */
.carrousel--solo .article { min-height: 380px; min-height: clamp(380px, 46vh, 460px); }
.carrousel--solo .article h3,
.carrousel--solo .article p { max-width: 46rem; }
/* ==========================================================================
Newsletter
Le média couvre toute la section, la boîte blanche se pose dessus. Le
voile est un aplat, pas un dégradé : il ne sert qu'à détacher la boîte
d'une photo dont on ne maîtrise pas la luminosité.
========================================================================== */
.section--lettre {
position: relative;
overflow: hidden;
isolation: isolate;
background: var(--violet-nuit);
}
.lettre__fond,
.lettre__voile {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0; inset: 0;
}
.lettre__fond { z-index: -2; }
.lettre__voile { z-index: -1; background: rgba(16, 8, 46, .46); }
.lettre__media {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.lettre__attente {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0; inset: 0;
display: grid;
/* En haut à gauche : au centre, la boîte blanche la recouvrirait et on
ne verrait plus qu'il manque un média. */
place-content: start start;
gap: 4px;
padding: 18px var(--gouttiere); padding: clamp(18px, 3vw, 30px) var(--gouttiere);
background: var(--violet-nuit);
color: rgba(255,255,255,.52);
font-size: .78rem;
}
.lettre__attente strong { color: rgba(255,255,255,.68); font-size: .88rem; }
.lettre {
display: grid;
grid-template-columns: 1.05fr .95fr;
align-items: center;
gap: 28px; gap: clamp(28px, 4vw, 60px);
padding: 30px; padding: clamp(30px, 4vw, 58px);
border-radius: var(--r-xl);
background: #fff;
color: var(--encre);
box-shadow: 0 30px 80px rgba(10, 5, 35, .28);
}
.lettre h2 { color: var(--encre); font-size: 1.5rem; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.lettre .surtitre { color: var(--violet); }
.lettre p { color: var(--gris); margin-top: 14px; max-width: 46ch; }
.lettre__form { display: flex; flex-direction: column; gap: 12px; }
.lettre__ligne {
display: flex;
gap: 10px;
padding: 7px 7px 7px 8px;
border-radius: var(--pilule);
background: #fff;
border: 1.5px solid var(--gris-clair);
}
.lettre__ligne input {
flex: 1 1 auto;
min-width: 0;
border: 0;
background: none;
padding: 12px 14px;
font: inherit;
font-size: 1rem;
color: var(--encre);
}
.lettre__ligne input::placeholder { color: var(--gris); }
.lettre__ligne input:focus { outline: none; }
.lettre__ligne:focus-within { border-color: var(--violet); }
.lettre__ligne .btn { flex: none; }
.lettre__etat { font-size: .92rem; font-weight: 600; color: var(--violet); min-height: 1.2em; }
@media (max-width: 860px) {
.lettre { grid-template-columns: 1fr; }
.lettre__ligne { flex-direction: column; padding: 10px; border-radius: var(--r-lg); }
.lettre__ligne .btn { justify-content: center; }
}
/* Une vidéo de fond ne doit pas tourner quand le mouvement est réduit. */
@media (prefers-reduced-motion: reduce) {
.lettre__media { animation-play-state: paused; }
}
/* ==========================================================================
Pied de page : liens légaux et réseaux
========================================================================== */
.pied__reseaux {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}
.pied__reseaux a {
display: grid;
place-items: center;
width: 40px; height: 40px;
border-radius: 50%;
color: #fff;
background: rgba(255,255,255,.12);
transition: background-color var(--t-micro) var(--doux),
color var(--t-micro) var(--doux),
transform var(--t-micro) var(--sortie);
}
.pied__reseaux a:hover {
background: var(--ciel);
color: var(--violet-nuit);
transform: translateY(-2px);
}
.pied__bas { flex-wrap: wrap; gap: 10px 24px; align-items: center; }
.pied__legal {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 20px;
margin: 0;
padding: 0;
list-style: none;
}
/* Le pied donne un margin-top aux de ses colonnes : il ferait un
escalier sur une liste posée à l'horizontale. */
.pied .pied__legal li + li { margin-top: 0; }
/* Visible des seuls lecteurs d'écran. */
.visuellement-cache {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ==========================================================================
Pages légales
========================================================================== */
/* Un espace à remplir. Volontairement criard : une mention légale publiée
avec « RAISON SOCIALE » dedans est pire que pas de mention du tout. */
.a-completer {
padding: 1px 7px;
border-radius: 5px;
background: #FFE9A8;
color: #6A4B00;
font-weight: 700;
font-size: .94em;
/* Surtout pas de nowrap : un trou long (« ASSUREUR ET NUMÉRO DE POLICE »)
déborderait de l'écran sur un téléphone. */
overflow-wrap: anywhere;
}
.papier table {
width: 100%;
border-collapse: collapse;
font-size: .95rem;
}
.papier table th,
.papier table td {
text-align: left;
vertical-align: top;
padding: 12px 14px;
border-bottom: 1px solid var(--gris-clair);
}
.papier table th {
font-weight: 800;
font-size: .8rem;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--violet);
border-bottom-color: var(--violet-pale);
}
.papier table td { color: #2A2838; }
.papier__tableau { overflow-x: auto; margin-top: 1.4em; margin-bottom: 1.4em; margin-block: 1.4em; }
.papier__tableau table { min-width: 34rem; }
.papier__maj {
display: inline-block;
margin-top: 18px;
padding: 7px 14px;
border-radius: var(--pilule);
background: var(--azur);
font-size: .86rem;
font-weight: 600;
color: var(--encre);
}
.sommaire {
margin-top: 2em; margin-bottom: 2em; margin-block: 2em;
padding: 20px; padding: clamp(20px, 2.6vw, 28px);
border-radius: var(--r-lg);
background: var(--gris-doux);
}
.papier .sommaire h2 { margin: 0 0 14px; font-size: 1rem; }
.sommaire ol { margin: 0; padding-left: 1.2em; }
.sommaire li + li { margin-top: .35em; }
.sommaire a { color: var(--violet); font-weight: 600; }
/* Le message d'état de la newsletter : rouge sur erreur, violet sinon. */
.lettre__etat[data-erreur="true"] { color: #B3261E; }
/* Médias et renvois dans le corps d'un article -------------------------- */
/* Une figure porte son cadre et sa légende séparément : .papier__visuel
rogne ce qui dépasse de son 16/9, ce qui avalerait la légende. */
/* margin-inline : le navigateur donne 40px de chaque côté à toute ,
ce qui rentrait les médias par rapport au texte et aux renvois. */
.papier .media { margin: 24px 0; margin: clamp(24px, 4vw, 40px) 0; }
.media__cadre {
position: relative;
aspect-ratio: 16 / 9;
border-radius: var(--r-xl);
overflow: hidden;
background: var(--ciel-pale);
}
.media__cadre img,
.media__cadre video { width: 100%; height: 100%; object-fit: cover; display: block; }
.papier .media figcaption {
margin-top: 10px;
font-size: .88rem;
line-height: 1.5;
font-style: italic;
color: var(--gris);
}
/* Vidéo YouTube : la vignette d'abord, le lecteur au clic. Charger une
iframe YouTube d'emblée coûte plus lourd que tout le reste de la page. */
.video-yt { cursor: pointer; }
.video-yt img { transition: transform .5s var(--sortie, ease), filter .3s ease; }
.video-yt:hover img { transform: scale(1.03); filter: brightness(.92); }
.video-yt button {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0; inset: 0;
margin: auto;
width: 74px;
height: 52px;
border: 0;
padding: 0;
border-radius: 14px;
background: rgba(14, 13, 26, .72);
cursor: pointer;
transition: background .2s ease, transform .2s ease;
}
.video-yt button::before {
content: "";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0; inset: 0;
margin: auto;
width: 0;
height: 0;
border-style: solid;
border-width: 9px 0 9px 15px;
border-color: transparent transparent transparent #fff;
}
.video-yt:hover button { background: #FF0033; transform: scale(1.06); }
.video-yt iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%; border: 0; }
/* Renvoi vers un autre article, au fil du texte. */
.papier .renvoi {
display: flex;
align-items: center;
gap: 16px;
margin-top: 22px; margin-bottom: 22px; margin-block: clamp(22px, 3vw, 32px);
padding: 18px 18px; padding: 18px clamp(18px, 2.4vw, 24px);
border-radius: var(--r-lg);
background: var(--violet-pale);
border: 1px solid rgba(91, 31, 217, .14);
color: var(--encre);
text-decoration: none;
transition: transform .25s ease, box-shadow .25s ease;
}
.papier .renvoi:hover { transform: translateY(-2px); box-shadow: var(--ombre-sm); }
.renvoi__texte { flex: 1; min-width: 0; }
.renvoi__surtitre {
display: block;
font-size: .72rem;
letter-spacing: .06em;
text-transform: uppercase;
font-weight: 800;
color: var(--violet);
}
.renvoi__titre {
display: block;
margin-top: 4px;
font-size: 1.02rem;
line-height: 1.3;
font-weight: 800;
}
.papier .renvoi svg { flex: none; color: var(--violet); }
/* Page « Nos conseils » : recherche, filtres, liste vide ----------------- */
.blog-recherche {
display: flex;
align-items: center;
gap: 10px;
max-width: 34rem;
margin-top: 26px;
padding: 0 18px;
border-radius: var(--pilule);
background: var(--blanc);
border: 1px solid var(--gris-clair);
color: var(--gris);
transition: border-color .2s ease, box-shadow .2s ease;
}
.blog-recherche:focus-within {
border-color: var(--violet);
box-shadow: 0 0 0 4px rgba(91, 31, 217, .12);
}
.blog-recherche input {
flex: 1;
min-width: 0;
padding: 15px 0;
border: 0;
background: none;
font: inherit;
color: var(--encre);
}
.blog-recherche input::placeholder { color: var(--gris); }
.blog-recherche input:focus { outline: none; }
/* La croix que Chrome ajoute aux champs de recherche déborde de la pilule. */
.blog-recherche input::-webkit-search-cancel-button { margin-right: 4px; }
.filtres {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 20px; margin-bottom: clamp(20px, 2.4vw, 28px);
}
.filtre {
padding: 9px 16px;
border-radius: var(--pilule);
border: 1px solid var(--gris-clair);
background: var(--blanc);
font: inherit;
font-size: .9rem;
font-weight: 700;
color: var(--gris);
cursor: pointer;
transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.filtre:hover { border-color: var(--violet-clair); color: var(--encre); }
.filtre.est-actif {
background: var(--violet);
border-color: var(--violet);
color: var(--blanc);
}
/* Une carte masquée par un filtre sort de la grille : display:none plutôt
qu'une opacité, sinon elle continue d'occuper sa colonne. */
.article[hidden] { display: none; }
.blog__vide {
padding: 28px; padding: clamp(28px, 4vw, 44px);
border-radius: var(--r-lg);
background: var(--gris-doux);
text-align: center;
color: var(--gris);
}
/* Article sur ordinateur : le texte à gauche, le nécessaire à droite ----- */
.article-deux-colonnes > .papier { margin-left: 0; margin-right: 0; margin-inline: 0; }
@media (min-width: 1040px) {
.article-deux-colonnes {
display: grid;
grid-template-columns: minmax(0, 44rem) 20rem;
gap: 28px; gap: clamp(28px, 3.4vw, 48px);
justify-content: center;
align-items: start;
}
/* La colonne suit le texte sans défiler chez elle : elle descend avec la
page, puis se cale en haut de l'écran quand le texte continue seul. */
.article-cote { position: sticky; top: 100px; }
}
.article-cote > * + * { margin-top: 26px; }
.article-cote .encart { padding: 18px; padding: clamp(18px, 2vw, 22px); }
.article-cote .encart h3 { font-size: 1rem; }
.article-cote .encart p { font-size: .92rem; line-height: 1.6; }
.article-cote .btn { width: 100%; justify-content: center; }
.renvois .surtitre { display: block; margin-bottom: 12px; }
/* Renvoi en bande : photo à gauche, titre et durée à droite. Une carte
pleine hauteur mangerait la colonne pour trois articles. */
.renvoi-bande {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px;
border-radius: var(--r);
border: 1px solid transparent;
text-decoration: none;
color: inherit;
transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.renvoi-bande + .renvoi-bande { margin-top: 4px; }
.renvoi-bande:hover {
background: var(--blanc);
border-color: var(--gris-clair);
box-shadow: var(--ombre-sm);
}
.renvoi-bande__photo {
flex: none;
width: 78px;
height: 62px;
border-radius: 12px;
overflow: hidden;
background: var(--ciel-pale);
}
.renvoi-bande__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.renvoi-bande__vide { display: block; width: 100%; height: 100%; }
.renvoi-bande__texte { min-width: 0; }
.renvoi-bande__texte strong {
display: block;
font-size: .92rem;
line-height: 1.3;
letter-spacing: -.01em;
color: var(--encre);
}
.renvoi-bande:hover .renvoi-bande__texte strong { color: var(--violet); }
.renvoi-bande__texte span {
display: block;
margin-top: 5px;
font-size: .8rem;
font-weight: 600;
color: var(--gris);
}
/* ==========================================================================
Page « Devenir enseignant »
========================================================================== */
/* Hero pleine hauteur, sur le modèle de l'accueil — mais un aplat violacé
à la place de la photo de fond : la photo est ici à droite, et deux
images superposées ne donneraient rien de lisible. */
.hero--prof {
background: var(--violet-pale);
color: var(--encre);
}
.hero--prof__grille {
grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
align-items: center;
gap: 28px; gap: clamp(28px, 4.5vw, 64px);
}
.hero--prof h1 { font-size: 2.3rem; font-size: clamp(2.3rem, 5.4vw, 3.6rem); }
.hero--prof .chapo { margin-top: 20px; max-width: 44ch; }
/* `btn--large` passe à 100 % de large : ici on veut un bouton qui tient sa
largeur de contenu, comme sur l'accueil. */
.hero--prof__cta { width: auto; margin-top: 32px; }
.hero--prof .ruban { margin-top: 28px; }
.hero--prof__photo { max-width: 420px; margin-left: auto; margin-right: auto; margin-inline: auto; }
@media (max-width: 860px) {
/* Le texte prend la hauteur qu'il lui faut, la photo occupe exactement ce
qui reste : le hero fait une hauteur d'écran, ni plus ni moins, et le
bouton reste au-dessus de la ligne de flottaison. */
.hero--prof { align-items: stretch; padding-bottom: 20px; padding-bottom: clamp(20px, 4vh, 40px); }
.hero--prof__grille {
grid-template-columns: 1fr;
grid-template-rows: auto minmax(0, 1fr);
align-items: stretch;
gap: 20px; gap: clamp(20px, 4vw, 32px);
}
.hero--prof__photo {
/* Le ratio 3:4 imposerait sa hauteur : ici c'est la rangée qui décide. */
aspect-ratio: auto;
width: 100%;
max-width: none;
min-height: 120px;
margin-left: 0; margin-right: 0; margin-inline: 0;
}
/* Cadre large et peu haut : centré, le recadrage coupe le visage. On
remonte le point d'intérêt. */
.hero--prof__photo img { object-position: 50% 18%; }
}
/* Durée indicative d'une étape. */
.etape__duree {
display: inline-block;
margin-top: 16px;
padding: 5px 12px;
border-radius: var(--pilule);
background: var(--violet-pale);
color: var(--violet);
font-size: .8rem;
font-weight: 700;
}
.carte .etape__duree { color: var(--violet); }
.parcours__note {
display: flex;
align-items: flex-start;
gap: 10px;
max-width: 62ch;
margin: 28px auto 0; margin: clamp(28px, 4vw, 44px) auto 0;
padding: 18px; padding: clamp(18px, 2.4vw, 24px);
border-radius: var(--r-lg);
background: #fff;
border: 1px solid var(--gris-clair);
color: var(--encre);
font-size: .95rem;
line-height: 1.6;
}
.parcours__note svg { flex: none; margin-top: 4px; color: var(--violet); }
/* Étiquettes de matières : des mots, pas des liens. */
.etiquettes { display: flex; flex-wrap: wrap; gap: 8px; }
.etiquettes span {
padding: 7px 13px;
border-radius: var(--pilule);
background: var(--azur);
border: 1px solid var(--ciel-bord);
font-size: .88rem;
font-weight: 600;
color: var(--encre);
}
/* Dans la section ciel, les cartes gardent leur texte sombre : seules les
icônes de la pastille prennent le bleu. */
.section--nuit .carte__num--ciel { background: var(--azur); color: var(--violet); }
.section--nuit .carte h4 { color: var(--violet); }
/* Les puces de cette page vivent sur fond clair. Portée limitée au
de la page : une règle en `.section .puces li` écraserait le texte blanc
des puces du bloc violet « Devenir enseignant » de l'accueil — même
spécificité, déclarée plus bas. */
.page-prof .puces li { color: var(--encre); }
.page-prof .puces svg { color: var(--vert); }
/* ==========================================================================
Parallaxe — AUCUNE RÈGLE PLUS BAS NE DOIT VISER UNE IMAGE
`.parallaxe > img` (0,1,1) est à égalité de spécificité avec
`.visuel img`, `.prof-bloc__photo img` et `.papier__visuel img`. À
égalité, c'est la dernière déclaration qui gagne : placé plus haut, le
bloc perdait sa hauteur de 118 % et son calage à -9 %, l'image reprenait
100 % et top 0, et la course de ±6 % découvrait le fond du cadre en haut
ou en bas. Ce qui suit ce bloc n'a donc le droit de toucher ni à
`position`, ni à `top`, ni à `width`, ni à `height` d'une image.
==========================================================================
Parallaxe : c'est la PHOTO qui glisse dans son cadre, pas le cadre qui
se déplace dans la page. Le cadre ne bouge jamais d'un pixel, donc rien
ne décale la mise en page ni ne recouvre le texte voisin.
L'image est volontairement plus haute que son cadre (118 %, calée à
-9 %) : la course de ±6 % ne peut donc jamais découvrir un bord.
Uniquement du transform — jamais background-attachment, cassé sur iOS,
ni de listener de scroll non throttlé. */
.parallaxe { position: relative; overflow: hidden; }
.parallaxe > img {
position: absolute;
top: -9%; left: 0;
width: 100%; height: 118%;
object-fit: cover;
will-change: transform;
}
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
/* `animation-timeline: view()` sur l'image ne marcherait PAS : la
timeline se mesure dans le plus proche conteneur de défilement, et
`overflow: hidden` sur le cadre en fait justement un. L'image ne
bouge jamais par rapport à son cadre, donc l'animation resterait
figée. On nomme donc la timeline sur le CADRE — dont le scrollport,
lui, est bien la page — et l'image s'y accroche. */
.parallaxe {
view-timeline-name: --parallaxe;
view-timeline-axis: block;
}
.parallaxe > img {
animation: derive linear both;
animation-timeline: --parallaxe;
animation-range: entry 0% exit 100%;
}
@keyframes derive {
from { transform: translate3d(0, -6%, 0); }
to { transform: translate3d(0, 6%, 0); }
}
}
}
/* Resserrement de la barre entre le menu burger (≤ 980 px) et le confort
(≥ 1241 px). Six liens plus deux boutons ne tiennent pas à l'aise dans
cet intervalle : plutôt que de laisser le flex écraser ce qu'il trouve —
c'était le logo, seule boîte sans `flex: none` — on réduit nous-mêmes ce
qui peut l'être, l'espacement et la chasse des liens. */
@media (min-width: 981px) and (max-width: 1240px) {
.nav { gap: 0; }
.nav a { padding-left: 9px; padding-right: 9px; padding-inline: 9px; font-size: .9rem; }
.entete__actions { gap: 6px; }
.entete__actions .btn { padding: 11px 14px; font-size: .88rem; }
}
@media (min-width: 981px) and (max-width: 1080px) {
.nav a { padding-left: 7px; padding-right: 7px; padding-inline: 7px; font-size: .86rem; }
.entete__actions .btn { padding: 10px 12px; font-size: .85rem; }
}
/* ====================================================================== */
/* PAGE CONTACT */
/* ====================================================================== */
/* Formulaire à gauche, coordonnées à droite. Le formulaire est plus large :
c'est lui qu'on remplit, la colonne de droite se lit. */
/* Coordonnées à gauche, formulaire à droite. Les coordonnées passent
d'abord dans le DOM : sur téléphone, où les colonnes s'empilent, c'est
WhatsApp qu'on voit en arrivant, pas après avoir fait défiler cinq
champs. La colonne de gauche est la plus étroite — elle se lit, l'autre
se remplit. */
.contact-grille {
display: grid;
grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
gap: 20px; gap: clamp(20px, 2.6vw, 34px);
align-items: start;
}
@media (max-width: 900px) {
.contact-grille { grid-template-columns: 1fr; }
}
/* Une carte-formulaire ne se soulève pas au survol : le pointeur y reste
plusieurs secondes, et le décalage ferait sauter le champ sous le curseur. */
.contact-carte:hover {
transform: none;
box-shadow: none;
border-color: var(--gris-clair);
}
.contact-form__duo {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 14px;
}
@media (max-width: 480px) {
.contact-form__duo { grid-template-columns: 1fr; }
}
/* Le libellé est en capitales : « (facultatif) » y serait criard. */
.champ__note {
font-weight: 600;
text-transform: none;
letter-spacing: 0;
color: var(--gris);
opacity: .8;
}
/* .champ ne stylait que input et select : le textarea héritait du style
brut du navigateur, police comprise. */
.champ textarea {
width: 100%;
padding: 14px 16px;
border: 1.5px solid var(--gris-clair);
border-radius: var(--r);
background: var(--coquille);
font: inherit;
font-size: .97rem;
line-height: 1.6;
color: var(--encre);
resize: vertical;
min-height: 132px;
transition: border-color var(--t-micro) var(--doux),
background-color var(--t-micro) var(--doux);
}
.champ textarea:focus {
outline: none;
border-color: var(--violet);
background: #fff;
}
.contact-form .btn { margin-top: 8px; }
.contact-form__mention {
margin-top: 14px;
font-size: .86rem;
line-height: 1.6;
color: var(--gris);
}
.contact-form__mention a { color: var(--violet); font-weight: 600; }
/* Les trois cartes d'orientation n'ont pas le même texte : sans cela leurs
boutons se retrouvaient à trois hauteurs différentes. */
.contact-routes .carte { display: flex; flex-direction: column; }
.contact-routes .carte p { margin-bottom: 20px; }
.contact-routes .carte .btn { margin-top: auto; align-self: flex-start; }
.contact-coord h3 { margin-bottom: 18px; }
/* Le bouton WhatsApp porte un vert WhatsApp, pas la couleur de la marque :
c'est un repère que tout le monde reconnaît au Cameroun, et il annonce
honnêtement où mène le clic.
Le vert de WhatsApp lui-même (#1DA851) ne tient pas : blanc dessus donne
3,10:1, et le libellé fait 15,5 px — sous les 18,66 px qui ouvriraient
droit au seuil de 3:1. Il faut donc 4,5:1. Assombri jusqu'à #0E7A46, qui
mesure 5,40:1 en gardant la teinte reconnaissable. */
.contact-coord__wa {
width: 100%;
justify-content: center;
background: #0E7A46;
border-color: #0E7A46;
color: #fff;
}
.contact-coord__wa:hover { background: #0B6238; border-color: #0B6238; }
/* La mention porte l'argument : c'est elle qui explique pourquoi ce
bouton passe avant tout le reste. En gris discret elle ne pesait rien.
Fond vert très clair, texte encre, éclair vert : le même vert que le
bouton, mais en surface au lieu du contour — vérifié 8,1:1. */
.contact-coord__note {
display: flex;
align-items: flex-start;
gap: 9px;
margin: 12px 0 24px;
padding: 11px 14px;
border-radius: var(--r);
background: #E7F5EC;
font-size: .92rem;
line-height: 1.55;
color: #14321F;
}
.contact-coord__note strong { font-weight: 800; }
.contact-coord__note svg { flex: none; margin-top: 2px; color: #0E7A46; }
.coord { list-style: none; display: grid; gap: 18px; }
.coord li { display: flex; gap: 14px; align-items: flex-start; }
.coord b {
display: block;
font-size: .78rem;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--gris);
margin-bottom: 3px;
}
.coord li > div { font-size: .99rem; font-weight: 600; color: var(--encre); }
.coord a { color: var(--violet); font-weight: 600; }
.coord em {
display: block;
margin-top: 4px;
font-style: normal;
font-size: .88rem;
font-weight: 500;
line-height: 1.55;
color: var(--gris);
}
.coord__pastille {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px; height: 38px;
border-radius: 11px;
background: var(--violet-pale);
color: var(--violet);
}
/* « Votre espace » de la page Devenir enseignant : même section que
l'accueil, fond violet. Blanc sur #5B1FD9 : 8,3. */
.section--violet { background: var(--violet); }
.section--violet .surtitre { color: var(--violet-pale); }
.section--violet .carte:hover { box-shadow: 0 18px 40px rgba(27,11,75,.30); }
/* Newsletter : les sujets en pastilles, la promesse sous le champ. */
.lettre__sujets { margin-top: 20px; }
.lettre__sujets span { font-size: .82rem; padding: 6px 12px; }
.lettre .lettre__mention { margin-top: 0; font-size: .88rem; }
/* Témoignages : étoiles non attribuées en gris, citation sans marge navigateur. */
.etoiles__vide { color: var(--gris-clair); }
.avis { margin: 0; }
.avis__texte { margin: 0; }
/* Colonne d'article : sur mobile elle passe sous le texte ; on la décolle
de la fin de l'article. */
@media (max-width: 1039px) {
.article-cote { margin-top: 40px; margin-top: clamp(40px, 8vw, 56px); }
}
/* Encart de conversion (colonne d'article) : violet plein, bouton blanc. */
.encart--action { background: var(--violet); border-color: transparent; color: #fff; }
.encart--action .surtitre { color: var(--violet-pale); }
.encart .surtitre + h3 { margin-top: 8px; }
.encart--action h3 { color: #fff; }
.article-cote .encart--action p { color: rgba(255,255,255,.88); }
.encart--action .btn--clair { color: var(--violet); }
/* ==========================================================================
Navigateurs anciens (moteurs de 2019-2020 : vieux Android, navigateur
Huawei sans services Google…)
Partout plus haut, une déclaration moderne (clamp(), inset, margin-inline…)
est précédée de son équivalent classique : un navigateur récent garde la
seconde, un ancien ignore celle qu'il ne comprend pas et garde la première.
Généré par script : à reproduire pour toute nouvelle règle de ce genre.
========================================================================== */
/* Variables calculées avec clamp() : sans prise en charge, elles seraient
« invalides » et les marges qui les utilisent tomberaient à zéro. */
@supports not (width: clamp(1px, 1px, 1px)) {
:root { --gouttiere: 20px; --section: 64px; }
.pile__item { --ancre: 130px; }
}
/* « gap » en flexbox (Chrome 84, mi-2020) : sans lui, les éléments d'une
rangée se touchent. site.js pose .no-flexgap sur après l'avoir
mesuré — jamais sur un navigateur qui le gère. */
.no-flexgap .btn > * + * { margin-left: 10px; }
.no-flexgap .annonce > * + * { margin-left: 10px; }
.no-flexgap .badge > * + * { margin-left: 10px; }
.no-flexgap .entete__barre > * + * { margin-left: 20px; }
.no-flexgap .nav > * + * { margin-left: 4px; }
.no-flexgap .entete__actions > * + * { margin-left: 8px; }
.no-flexgap .hero__actions > * { margin-right: 20px; margin-bottom: 12px; }
.no-flexgap .ruban__piste > * + * { margin-left: 26px; }
.no-flexgap .ruban__piste li > * + * { margin-left: 8px; }
.no-flexgap .preuve > * + * { margin-left: 10px; }
.no-flexgap .matiere > * + * { margin-left: 16px; }
.no-flexgap .carte .tarif > * + *, .no-flexgap .tarif > * + * { margin-left: 6px; }
.no-flexgap .avis > * + * { margin-top: 18px; }
.no-flexgap .avis__pied > * + * { margin-left: 12px; }
.no-flexgap .etoiles > * + * { margin-left: 3px; }
.no-flexgap .faq summary > * + * { margin-left: 20px; }
.no-flexgap .puces > * + * { margin-top: 11px; }
.no-flexgap .puces li > * + * { margin-left: 10px; }
.no-flexgap .pied__bas > * { margin-right: 24px; margin-bottom: 12px; }
.no-flexgap .carrousel__piste > * + * { margin-left: 16px; }
.no-flexgap .carrousel__controles > * + * { margin-left: 18px; }
.no-flexgap .carrousel__points > * + * { margin-left: 8px; }
.no-flexgap .diapos__points > * + * { margin-left: 7px; }
.no-flexgap .quete > * + * { margin-left: 8px; }
.no-flexgap .quete__bouton > * + * { margin-left: 8px; }
.no-flexgap .conseiller__actions > * { margin-right: 12px; margin-bottom: 12px; }
.no-flexgap .article__meta > * + * { margin-left: 10px; }
.no-flexgap .fil > * { margin-right: 8px; margin-bottom: 8px; }
.no-flexgap .article__entete-meta > * { margin-right: 10px; margin-bottom: 10px; }
.no-flexgap .lettre__form > * + * { margin-top: 12px; }
.no-flexgap .lettre__ligne > * + * { margin-left: 10px; }
.no-flexgap .pied__reseaux > * { margin-right: 10px; margin-bottom: 10px; }
.no-flexgap .pied__legal > * { margin-right: 20px; margin-bottom: 8px; }
.no-flexgap .papier .renvoi > * + * { margin-left: 16px; }
.no-flexgap .blog-recherche > * + * { margin-left: 10px; }
.no-flexgap .filtres > * { margin-right: 8px; margin-bottom: 8px; }
.no-flexgap .renvoi-bande > * + * { margin-left: 12px; }
.no-flexgap .parcours__note > * + * { margin-left: 10px; }
.no-flexgap .etiquettes > * { margin-right: 8px; margin-bottom: 8px; }
.no-flexgap .contact-coord__note > * + * { margin-left: 9px; }
.no-flexgap .coord li > * + * { margin-left: 14px; }
/* Texte nu suivi d'une icône (« Voir mon tarif → ») : le texte n'est pas un
élément, la règle ci-dessus ne voit que l'icône. */
.no-flexgap .btn > svg:only-child { margin-left: 10px; }