/* =========================================================================
guide.css — les pages de conseil aux parents (/guides/…)
POURQUOI UN FICHIER SÉPARÉ, ET PAS QUELQUES LIGNES DANS parent.css :
parent.css habille l'espace parent, la page d'accueil et les pages
légales. Toucher à ce fichier, c'est risquer de déplacer un bouton dans
le tableau de bord d'un parent pour gagner une marge dans un article.
Les guides sont un territoire nouveau, isolé, et qui n'a aucune raison
de revenir en arrière : ils ont leur propre feuille.
Elle est chargée APRÈS parent.css et n'en redéfinit rien : elle hérite de
la palette, de la police Nunito, de l'en-tête et du pied de page. Elle
n'ajoute que ce qu'un texte long demande et que l'espace parent n'a
jamais eu — une largeur de lecture, un rythme de titres, et quatre
encadrés qui portent chacun une intention différente.
Aucun `!important`, aucune sélection par élément nu au-delà de `.guide` :
tout est confiné sous une classe. Rien d'ici ne peut fuir vers une autre
page, même par accident.
========================================================================= */
/* --- la colonne de lecture ------------------------------------------------
Le corps de texte est ramené à ~66 caractères. Ce n'est pas une coquetterie
typographique : au-delà, l'œil rate la ligne suivante en revenant à la
marge, et un parent qui lit le soir décroche. Les encadrés, eux, occupent
toute la largeur de la carte — c'est précisément ce qui les fait voir. */
.guide{max-width:1000px;margin:0 auto}
.guide .carte{padding:var(--sp-6) var(--sp-5)}
.guide p,.guide li{font-size:17px;line-height:1.68}
.guide .corps>p,.guide .corps>ul,.guide .corps>ol{max-width:66ch}
/* --- fil d'Ariane ---------------------------------------------------------
Visible pour le lecteur, et balisé en microdonnées pour que Google affiche
« fractilo.fr › Guides › … » sous le titre plutôt qu'une adresse nue. */
.fil{font-size:14px;color:var(--doux);margin:0 0 var(--sp-4);display:flex;
flex-wrap:wrap;gap:6px;align-items:center}
.fil a{color:var(--doux)}
.fil a:hover{color:var(--acc)}
.fil .sep{color:var(--trait-fort)}
/* --- titres ---------------------------------------------------------------
Un seul h1 par page. Les h2 sont espacés largement au-dessus et serrés
au-dessous : c'est ce déséquilibre qui fait qu'un titre appartient
visiblement à ce qui le suit, et non à ce qui le précède. */
.guide h1{font-size:clamp(26px,4vw,36px);line-height:1.18;letter-spacing:-.015em;
margin:0 0 var(--sp-3);max-width:20ch}
.guide h2{font-size:clamp(20px,2.8vw,26px);line-height:1.25;letter-spacing:-.01em;
margin:var(--sp-6) 0 var(--sp-3);padding-top:var(--sp-4);
border-top:2px solid var(--trait);max-width:24ch}
.guide h3{font-size:19px;margin:var(--sp-5) 0 var(--sp-2);color:var(--encre)}
.guide .corps>h2:first-child{border-top:none;padding-top:0;margin-top:var(--sp-5)}
/* --- chapô ----------------------------------------------------------------
La phrase que Google reprend souvent, et la seule que certains liront. */
.chapo{font-size:clamp(17px,2.2vw,20px);line-height:1.55;color:var(--doux);
max-width:52ch;margin:0 0 var(--sp-5)}
.date-maj{font-size:14px;color:var(--doux);margin:0 0 var(--sp-5)}
/* --- sommaire -------------------------------------------------------------
Des ancres internes : elles servent au lecteur pressé, et elles disent à
Google de quoi la page parle avant même qu'il ait lu le corps. */
.sommaire{background:var(--f-encadre);border-radius:var(--r-sm);
padding:var(--sp-4) var(--sp-5);margin:0 0 var(--sp-5)}
.sommaire p{margin:0 0 var(--sp-2);font-weight:800;font-size:15px;
text-transform:uppercase;letter-spacing:.07em;color:var(--doux)}
.sommaire ol{margin:0;padding-left:1.3em}
.sommaire li{font-size:16px;margin:4px 0;line-height:1.45}
/* --- les quatre encadrés --------------------------------------------------
Chacun a un rôle et un seul. La couleur n'est jamais la seule porteuse du
sens : chacun s'annonce aussi par un intitulé écrit en toutes lettres, pour
qui lit en noir et blanc, à l'impression, ou avec un lecteur d'écran. */
.cle,.piege,.adire,.faire{border-radius:var(--r-sm);padding:var(--sp-4) var(--sp-5);
margin:var(--sp-5) 0;border-left:6px solid}
.cle strong:first-child,.piege strong:first-child,
.adire strong:first-child,.faire strong:first-child{
display:block;font-size:13px;text-transform:uppercase;letter-spacing:.08em;
margin-bottom:6px}
.cle p:last-child,.piege p:last-child,.adire p:last-child,.faire p:last-child{margin-bottom:0}
.cle p,.piege p,.adire p,.faire p{margin:0 0 var(--sp-2)}
/* ce qu'il faut retenir */
.cle{background:#E9F6F7;border-color:var(--acc)}
.cle strong:first-child{color:var(--acc)}
/* l'erreur que presque tout le monde commet */
.piege{background:var(--f-danger);border-color:var(--danger)}
.piege strong:first-child{color:var(--danger)}
/* la phrase exacte à dire à l'enfant */
.adire{background:#F1ECFA;border-color:var(--violet)}
.adire strong:first-child{color:var(--violet)}
.adire .phrase{font-size:19px;line-height:1.45;font-weight:700;color:var(--encre)}
/* l'exercice concret, à faire ce soir */
.faire{background:var(--f-ok);border-color:var(--ok)}
.faire strong:first-child{color:var(--ok)}
.faire ol,.faire ul{margin:0;padding-left:1.25em}
.faire li{margin:6px 0}
/* --- fractions écrites dans le texte -------------------------------------
Dans le jeu, une fraction n'est jamais rendue « a/b » : elle est dessinée
avec sa barre horizontale. Les pages web n'ont pas le moteur du jeu, mais
elles n'ont pas le droit d'écrire l'oblique non plus — un enfant qui lit
par-dessus l'épaule de son parent verrait deux écritures pour une seule
idée. On empile donc numérateur et dénominateur en CSS pur.
`vertical-align:middle` plutôt qu'un décalage en em : le milieu de la
fraction se cale sur le milieu des minuscules de la ligne, quelle que soit
la taille du texte autour. Un décalage fixe, lui, ne tombe juste que pour
une seule taille de police — et les titres n'ont pas la même que le corps. */
.f{display:inline-flex;flex-direction:column;align-items:center;
vertical-align:middle;margin:0 3px;line-height:1.1;font-weight:700}
.f .h{font-size:.72em;padding:0 .25em}
.f .b{font-size:.72em;padding:0 .25em;border-top:2px solid currentColor}
/* --- le tableau des années ------------------------------------------------ */
.annees{width:100%;border-collapse:collapse;margin:var(--sp-4) 0;font-size:16px}
.annees caption{text-align:left;font-size:14px;color:var(--doux);margin-bottom:var(--sp-2)}
.annees th,.annees td{text-align:left;vertical-align:top;padding:12px 14px;
border-bottom:2px solid var(--trait)}
.annees thead th{background:var(--f-encadre);font-size:14px;text-transform:uppercase;
letter-spacing:.06em;color:var(--doux);border-bottom-width:2px}
.annees tbody th{white-space:nowrap;color:var(--encre);font-weight:800}
/* Sur un téléphone, un tableau de trois colonnes devient illisible bien avant
de devenir étroit. Il défile alors dans sa propre boîte, et jamais la page. */
.defilant{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* --- l'appel à essayer ----------------------------------------------------
Un seul par page, à la fin. Une page de conseil qui vend à chaque
paragraphe n'est plus une page de conseil. */
.essai{background:var(--marine);color:#fff;border-radius:var(--r);
padding:var(--sp-5);margin:var(--sp-6) 0 0}
.essai h2{color:#fff;border-top:none;padding-top:0;margin:0 0 var(--sp-3);max-width:none}
.essai p{color:#CFE0F0;margin:0 0 var(--sp-4);max-width:56ch}
.essai .principal{background:var(--cyan);border-color:var(--cyan);color:#0B2340;
font-size:17px;padding:13px 26px}
.essai .principal:hover{background:#63D2D8;border-color:#63D2D8;color:#0B2340}
.essai a.principal{text-decoration:none}
.essai .mini{color:#9FBBD8;margin:var(--sp-3) 0 0;display:block}
/* --- pour aller plus loin -------------------------------------------------
Les guides se citent les uns les autres. C'est utile au lecteur, et c'est
ce qui permet à un moteur de recherche de comprendre qu'il y a ici un
ensemble et pas cinq pages isolées. */
.suite{margin:var(--sp-6) 0 0}
.suite h2{margin-bottom:var(--sp-4)}
.cartes{display:grid;gap:var(--sp-3);
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));list-style:none;
margin:0;padding:0}
.cartes li{margin:0}
.cartes a{display:block;height:100%;background:#fff;text-decoration:none;
border:2px solid var(--trait);border-top:6px solid var(--cyan);
border-radius:var(--r-sm);padding:var(--sp-4);transition:transform var(--t) var(--ease-out),
box-shadow var(--t) var(--ease-out),border-color var(--t) var(--ease-out)}
.cartes a:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--trait-fort);
border-top-color:var(--cyan)}
/* `nth-of-type` et non `nth-child` : la liste du sommaire des guides porte
aussi des de microdonnées entre ses . Avec `nth-child`, ces
balises invisibles comptaient comme des enfants et décalaient toutes les
couleurs d'un cran — la première carte prenait le jaune de la deuxième. */
.cartes li:nth-of-type(2) a{border-top-color:var(--jaune)}
.cartes li:nth-of-type(3) a{border-top-color:var(--corail)}
.cartes li:nth-of-type(4) a{border-top-color:var(--violet-vif)}
.cartes li:nth-of-type(5) a{border-top-color:var(--marine)}
.cartes b{display:block;font-size:17px;line-height:1.3;color:var(--encre);margin-bottom:6px}
.cartes span{display:block;font-size:15px;line-height:1.5;color:var(--doux)}
/* --- sources --------------------------------------------------------------
Ce qui est affirmé sur un programme scolaire doit pouvoir être vérifié.
C'est vrai pour le lecteur, et c'est un des rares signaux de sérieux qu'un
moteur de recherche sait encore lire. */
.sources{margin:var(--sp-6) 0 0;padding-top:var(--sp-4);border-top:2px solid var(--trait);
font-size:14px;color:var(--doux)}
.sources p{font-size:14px;margin:0 0 var(--sp-2)}
.sources ul{margin:0;padding-left:1.2em}
.sources li{font-size:14px;line-height:1.5;margin:4px 0}
/* --- le bloc « guides » de la page d'accueil ------------------------------
index.html charge aussi cette feuille, uniquement pour ces trois règles.
Elles complètent `.programme` / `.niveaux-liste` / `.niv` (dans parent.css)
plutôt que de les redéfinir : le bloc des guides réutilise à l'identique
la mise en page de « Année par année », et n'ajoute que le titre cliquable
et la ligne de renvoi centrée. */
.niv h3 a{text-decoration:none}
.niv h3 a:hover{text-decoration:underline}
.programme .plus{text-align:center;margin:var(--sp-4) 0 0;font-size:16px}
@media(max-width:560px){
.guide .carte{padding:var(--sp-5) var(--sp-4)}
.cle,.piege,.adire,.faire{padding:var(--sp-4)}
.essai{padding:var(--sp-4)}
}
@media (prefers-reduced-motion:reduce){
.cartes a{transition:none}
.cartes a:hover{transform:none}
}