/*
 * Caméléo - habillage du site.
 *
 * Palette et polices reprises de l'application. Traitement en aplats francs,
 * contours épais et ombres dures, avec des éléments qui débordent de leur bloc :
 * c'est ce débordement qui donne l'énergie, une pile de rectangles alignés
 * reste plate quelles que soient les couleurs.
 */

:root{
	--violet:#5b46f0;
	--violet-fonce:#3b2bb5;
	--violet-clair:#ece8ff;
	--jaune:#ffc83d;
	--jaune-clair:#fff0c9;
	--bleu-clair:#e4edff;
	--encre:#1b1540;
	--doux:#5f5a8a;
	--creme:#fff8ec;
	--nuit:#141031;
	--trait:3px;
	--marge-page:22px;
}

/* --- Bases ------------------------------------------------------------- */

/* GeneratePress dispose la zone de contenu en flex : sans largeur explicite,
   le <main> se dimensionne sur son contenu et la page s'arrête au milieu. */
.cam{width:100%}
.site-content{display:block}

.cam{
	font-family:'Nunito',-apple-system,'Segoe UI',Roboto,sans-serif;
	color:var(--encre);
	font-weight:600;
	line-height:1.6;
	background:#fff;
	overflow-x:clip;
}
.cam h1,.cam h2,.cam h3,.cam .cam-num,.cam .cam-bandeau-titre{
	font-family:'Fredoka','Nunito',sans-serif;
	font-weight:700;
	line-height:1;
	color:var(--encre);
	margin:0 0 .45em;
}
.cam h1,.cam h2{text-transform:uppercase;letter-spacing:-.02em}
.cam h1{font-size:clamp(2.5rem,5vw,4.3rem)}
.cam h2{font-size:clamp(2rem,4.2vw,3.4rem)}
.cam h3{font-size:clamp(1.2rem,1.9vw,1.5rem);line-height:1.15}
.cam h1 em,.cam h2 em,.cam .cam-bandeau-titre em{font-style:normal;color:var(--violet)}
.cam p{margin:0 0 .9rem}
.cam section{padding:clamp(52px,6vw,86px) 0}
.cam img{max-width:100%;height:auto;display:block}

.cam-wrap{max-width:1140px;margin:0 auto;padding:0 var(--marge-page)}
.cam-intro{max-width:48ch;color:var(--doux)}
/* Surtitre de l'accueil, DANS le H1 : la petite ligne porte les mots que les
   parents tapent, la grande l'accroche, et un moteur lit la somme des deux.
   Réservé à l'accueil depuis le 12 septembre 2026 : sur les 45 pages de niveau
   et de matière, les deux phrases se juxtaposaient en un H1 qui répétait ses
   mots (« Programme et fiches Maths CE1 : le programme complet et les
   fiches »). Ces pages composent maintenant un H1 d'une seule phrase,
   cf. cam_h1_hub(). */
.cam-h1-accroche{
	display:block;
	font-size:clamp(.82rem,1.1vw,.95rem);
	letter-spacing:.09em;
	text-transform:uppercase;
	color:rgba(255,248,236,.72);
	margin-bottom:.9rem;
}
.cam-surtitre{
	display:inline-block;
	font-family:'Fredoka','Nunito',sans-serif;
	font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;
	background:rgba(255,255,255,.12);
	border:2px solid rgba(255,255,255,.28);
	border-radius:999px;padding:6px 16px;margin:0 0 1.1rem;
}

/* --- Listes à coches --------------------------------------------------- */

.cam-liste-check{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:9px}
.cam-liste-check--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 26px;margin-top:1.1rem}
.cam-liste-check li{position:relative;padding-left:30px;color:var(--encre);font-size:.98rem;line-height:1.35}
.cam-liste-check li::before{
	content:"";position:absolute;left:0;top:1px;
	width:21px;height:21px;border-radius:50%;
	background:var(--jaune);box-shadow:inset 0 0 0 2px var(--encre);
}
.cam-liste-check li::after{
	content:"";position:absolute;left:6px;top:7px;
	width:8px;height:4px;
	border-left:2.5px solid var(--encre);border-bottom:2.5px solid var(--encre);
	transform:rotate(-45deg);
}

/* --- Bannière ---------------------------------------------------------- */

.cam-hero{
	position:relative;
	background:var(--nuit);
	color:var(--creme);
	padding:clamp(34px,4vw,58px) 0 clamp(30px,4vw,48px);
}
.cam-hero-fond{
	position:absolute;inset:0;
	background-image:
		radial-gradient(58% 58% at 76% 16%,rgba(91,70,240,.6),transparent 70%),
		radial-gradient(42% 42% at 8% 92%,rgba(255,200,61,.18),transparent 70%);
}
.cam-hero>.cam-wrap{position:relative}
.cam-hero h1{color:var(--creme)}
.cam-hero h1 em{color:var(--jaune)}
.cam-hero-grille{
	display:grid;
	grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
	gap:clamp(20px,3vw,44px);
	align-items:center;
}
.cam-chapo{
	font-size:clamp(1.02rem,1.35vw,1.18rem);
	color:rgba(255,248,236,.84);
	max-width:44ch;
}
.cam-stores{display:flex;flex-wrap:wrap;gap:11px;margin:1.4rem 0 0}
.cam-badge-store{
	display:inline-block;
	font-family:'Fredoka','Nunito',sans-serif;font-size:.95rem;
	background:var(--creme);color:var(--encre);
	border:var(--trait) solid #000;border-radius:999px;
	box-shadow:4px 4px 0 rgba(0,0,0,.9);
	padding:11px 21px;
}

/* Le visuel : mockup incliné, cartes qui débordent, médaille en surimpression.
   Sans ces débordements la bannière retombe en simple colonne d'images. */
/* Téléphone poussé vers la droite : la place gagnée à gauche accueille la
   mascotte, qui passe devant lui. */
.cam-hero-visuel{position:relative;display:flex;justify-content:flex-end;padding:12px 0;padding-right:clamp(0px,2vw,26px)}
.cam-hero-mascotte{
	position:absolute;z-index:2;
	left:-84px;bottom:76px;
	width:clamp(270px,25vw,392px);
	filter:drop-shadow(0 20px 30px rgba(0,0,0,.5));
}
.cam-phone--hero{
	max-width:335px;
	border-radius:34px;
	transform:rotate(-6deg);
	filter:drop-shadow(0 30px 46px rgba(0,0,0,.5));
}
.cam-flottant{position:absolute;filter:drop-shadow(0 12px 20px rgba(0,0,0,.4))}
.cam-flottant--1{width:132px;left:-2%;top:36%;transform:rotate(-12deg)}
.cam-medaille{
	position:absolute;right:36px;top:30px;
	width:106px;height:106px;border-radius:50%;
	display:grid;place-content:center;text-align:center;
	background:var(--jaune);color:var(--encre);
	border:var(--trait) solid #000;
	box-shadow:5px 5px 0 rgba(0,0,0,.9);
	font-family:'Fredoka','Nunito',sans-serif;
	font-size:.7rem;line-height:1.15;text-transform:uppercase;
	transform:rotate(-9deg);
	padding:6px;
}
.cam-medaille strong{display:block;font-size:1.9rem;line-height:1}

/* Bandeau jaune : il doit se poser SUR la bannière et déborder dans la section
   suivante. C'est ce chevauchement, plus l'ombre épaisse et la mascotte qui
   sort du cadre, qui lui donnent du volume - un rectangle sagement contenu
   reste plat. */
.cam-bandeau{
	position:relative;
	width:calc(100% + clamp(0px,4vw,68px));
	margin:clamp(46px,6vw,84px) calc(-1 * clamp(0px,2vw,34px)) calc(-1 * clamp(96px,11vw,148px));
	background:var(--jaune);
	border:4px solid #000;
	border-radius:30px;
	box-shadow:8px 8px 0 rgba(0,0,0,.9);
	padding:clamp(24px,3.2vw,38px) clamp(24px,3.2vw,40px);
	color:var(--encre);
	text-align:center;
	transform:rotate(-.8deg);
	z-index:2;
}
.cam-bandeau-zone{position:relative}
.cam-bandeau-mascotte{
	position:absolute;z-index:1;
	left:-148px;bottom:-40px;
	width:210px;
	transform:rotate(-10deg);
	filter:drop-shadow(0 12px 18px rgba(0,0,0,.35));
	pointer-events:none;
}
.cam-bandeau-titre{
	font-size:clamp(1.45rem,2.7vw,2.15rem);
	text-transform:uppercase;
	margin-bottom:.2em;
}
.cam-bandeau .cam-liste-check--3{
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:12px 20px;
	margin-top:1.4rem;
	text-align:left;
}
.cam-bandeau .cam-liste-check li{
	background:#fff;
	border:2px solid var(--encre);
	border-radius:16px;
	box-shadow:4px 4px 0 rgba(0,0,0,.85);
	padding:13px 15px 13px 42px;
	font-weight:700;
}
.cam-bandeau .cam-liste-check li::before{background:var(--jaune);left:12px;top:13px}
.cam-bandeau .cam-liste-check li::after{left:18px;top:19px}

/* --- Étapes ------------------------------------------------------------ */

/* Pas de carte : le téléphone EST l'illustration. Une tache de couleur passe
   derrière chaque écran et déborde, les écrans sont penchés en alternance et
   décalés en hauteur - sans ça, trois captures alignées flottent dans le vide.
   Sur téléphone, la rangée devient un carrousel à défilement : trois écrans
   empilés font 1 500 px de défilement pour un seul bloc. */
.cam-etapes{background:var(--creme);text-align:center}
.cam section.cam-etapes{padding-top:clamp(175px,18vw,235px)}
.cam-etapes h2{text-align:center;margin-left:auto;margin-right:auto}
.cam-etapes-liste{
	list-style:none;margin:2.6rem 0 0;padding:0;
	display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
	gap:clamp(20px,3vw,44px);
	align-items:start;
}
.cam-etapes-liste li{
	position:relative;
	display:flex;flex-direction:column;align-items:center;text-align:center;
}

.cam-etapes-liste h3{margin:0 0 1.4rem;max-width:15ch}
.cam-num{
	display:inline-grid;place-items:center;
	margin:0 0 .75rem;
	width:52px;height:52px;
	font-family:'Fredoka','Nunito',sans-serif;font-size:1.15rem;
	background:var(--violet);color:#fff;
	border:var(--trait) solid var(--encre);border-radius:50%;
	box-shadow:4px 4px 0 var(--encre);
}
.cam-ecran{
	position:relative;
	width:min(290px,100%);
	filter:drop-shadow(0 18px 30px rgba(27,21,64,.25));
}
.cam-ecran img{position:relative;z-index:1;width:100%;height:auto;border-radius:26px}


/* La tache déborde franchement de l'écran : c'est elle qui donne la matière. */
.cam-tache{
	position:absolute;z-index:0;
	left:-19%;right:-19%;top:3%;bottom:7%;
	border-radius:46% 54% 52% 48% / 44% 41% 59% 56%;
	background:#dbd3ff;
}
.cam-etapes-liste li:nth-child(2) .cam-tache{background:#ffe3a3;border-radius:53% 47% 44% 56% / 55% 48% 52% 45%}
.cam-etapes-liste li:nth-child(3) .cam-tache{background:#cfe0ff;border-radius:48% 52% 57% 43% / 47% 56% 44% 53%}

.cam-etapes-liste p{
	color:var(--doux);font-size:.98rem;
	margin:1.3rem 0 0;max-width:34ch;
}

/* Points du carrousel : masqués tant que la rangée tient sur une ligne. */
.cam-points{display:none;justify-content:center;gap:10px;margin-top:1.6rem}
.cam-point{
	width:11px;height:11px;padding:0;
	border:2px solid var(--encre);border-radius:50%;
	background:transparent;cursor:pointer;
	transition:background .15s,transform .15s;
}
.cam-point.est-actif{background:var(--violet);transform:scale(1.35)}

/* --- Fidélité ---------------------------------------------------------- */

/* Même vocabulaire que les autres cartes - fond clair, texte encre, bordure et
   ombre dure - sinon ce bloc en aplat saturé tranchait avec toute la page.
   La mascotte déborde du cadre par le bas, comme celle du bandeau. */
.cam-fidelite{background:#fff;overflow:hidden}
.cam-fidelite-grille{
	position:relative;
	display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
	gap:clamp(20px,3vw,44px);align-items:center;
	background:var(--violet-clair);
	border:var(--trait) solid var(--encre);
	border-radius:32px;
	box-shadow:6px 6px 0 var(--encre);
	padding:clamp(26px,3.4vw,44px);
	padding-bottom:0;
	color:var(--encre);
}
.cam-fidelite-grille h2{max-width:18ch}
.cam-fidelite-grille h2 em{color:var(--violet)}
.cam-fidelite-grille p{color:#3c3470}
.cam-fidelite-texte{padding-bottom:clamp(26px,3.4vw,44px)}
.cam-fidelite-visuel img{
	max-width:290px;
	margin:0 auto -8px;
	filter:drop-shadow(0 14px 22px rgba(27,21,64,.28));
}

/* --- Collection -------------------------------------------------------- */

/* Un bandeau qui défile plutôt qu'une grille : la collection est un argument
   secondaire, elle n'a pas à occuper une hauteur d'écran entière. Le
   défilement donne en plus l'impression du nombre, ce qu'une planche de huit
   vignettes ne fait pas. */
.cam-collection{background:var(--violet);color:#fff;overflow:hidden}
.cam-collection h2{color:#fff}
.cam-collection h2 em{color:var(--jaune)}
.cam-collection .cam-intro{color:rgba(255,255,255,.86)}
.cam-collection-tete{max-width:760px}

.cam-defile{
	margin-top:1.8rem;
	overflow:hidden;
	/* Les cartes s'effacent sur les bords : sans ça, on voit la boucle
	   apparaître et disparaître d'un coup. */
	-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
	mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.cam-defile-piste{
	display:flex;
	gap:18px;
	width:max-content;
	/* Hauteur réservée : si une image tarde, la rangée garde sa place au lieu
	   de s'écraser à zéro. */
	min-height:clamp(128px,13vw,166px);
	animation:cam-glisse 42s linear infinite;
}
@keyframes cam-glisse{
	from{transform:translateX(0)}
	to{transform:translateX(calc(-50% - 9px))}
}
.cam-defile .cam-carte{
	flex:0 0 auto;
	width:clamp(112px,12vw,150px);
	margin:0;
	background:#fff;
	border:var(--trait) solid var(--encre);
	border-radius:20px;
	box-shadow:4px 4px 0 var(--encre);
	padding:8px;
}
.cam-defile .cam-carte:nth-child(odd){transform:rotate(-2.5deg)}
.cam-defile .cam-carte:nth-child(even){transform:rotate(2.5deg)}

/* Défilement animé refusé : la rangée reste consultable à la main. */
@media (prefers-reduced-motion:reduce){
	.cam-defile{overflow-x:auto}
	.cam-defile-piste{animation:none}
}

/* --- Avis --------------------------------------------------------------- */

.cam-avis{background:var(--creme)}
.cam-avis h2{max-width:22ch}
.cam-avis-grille{
	margin-top:2rem;
	display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
	gap:clamp(16px,2.4vw,26px);
}
.cam-avis-carte{
	position:relative;
	margin:0;
	display:flex;flex-direction:column;gap:1rem;
	background:#fff;
	border:var(--trait) solid var(--encre);
	border-radius:24px;
	box-shadow:5px 5px 0 var(--encre);
	padding:26px 24px 24px;
}
.cam-avis-carte:nth-child(2){background:var(--jaune-clair)}
.cam-avis-carte:nth-child(3){background:var(--violet-clair)}
.cam-avis-carte blockquote{flex:1}
.cam-etoiles{display:flex;gap:2px;color:var(--jaune);line-height:0}
.cam-etoiles svg{display:block}
.cam-avis-carte figcaption{
	border-top:2px dashed rgba(27,21,64,.18);
	padding-top:.9rem;
}
.cam-avis-carte blockquote{
	margin:0;
	font-size:1.02rem;
	line-height:1.55;
	color:var(--encre);
}
/* Guillemet dessiné en gros derrière le texte : sans lui, une citation
   ressemble à un paragraphe ordinaire. */
.cam-avis-carte blockquote::before{
	content:"\201C";
	position:absolute;right:18px;top:8px;
	font-family:'Fredoka','Nunito',sans-serif;
	font-size:4.6rem;line-height:1;
	color:rgba(27,21,64,.09);
}
.cam-avis-carte figcaption{display:grid;gap:3px;font-size:.94rem}
.cam-avis-nom{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cam-avis-carte figcaption strong{font-family:'Fredoka','Nunito',sans-serif;font-size:1.05rem}
.cam-avis-carte figcaption span{color:var(--doux)}
/* `.cam p` (0,1,1) l'emporte sur `.cam-avis-note` (0,1,0) : la marge était
   écrasée sans le moindre signe. Troisième fois aujourd'hui. */
.cam .cam-avis-note{margin:clamp(2rem,3.5vw,3rem) 0 0;font-size:.88rem;color:var(--doux)}

/* --- Parents ----------------------------------------------------------- */

/* Trois colonnes égales obligeaient chaque carte à s'aligner sur la plus
   haute, et l'une d'elles était forcément à moitié vide. Une carte large qui
   porte l'écran, deux courtes à côté : chacune fait la taille de son contenu. */
.cam-parents{background:#fff}
.cam-parents-grille{
	margin-top:2rem;
	display:grid;grid-template-columns:1.62fr 1fr;
	gap:clamp(18px,2.8vw,32px);
	align-items:stretch;
}
.cam-parents-colonne{display:grid;gap:clamp(18px,2.8vw,32px);align-content:stretch}
.cam-bloc{
	position:relative;
	background:var(--creme);
	border:var(--trait) solid var(--encre);
	border-radius:26px;
	box-shadow:5px 5px 0 var(--encre);
	padding:28px 26px;
	overflow:hidden;
}
.cam-bloc--jaune{background:var(--jaune-clair)}
.cam-bloc--violet{background:var(--violet-clair)}
.cam-bloc h3{margin-bottom:.5em}
.cam-bloc p{color:var(--doux);font-size:.98rem;margin-bottom:0}
.cam-bloc .cam-liste-check{margin-top:1.1rem}

/* La carte large : le texte tient la colonne de gauche, l'écran déborde par
   le bas à droite. */
.cam-bloc--large{
	display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);
	gap:clamp(14px,2vw,26px);
	align-items:center;
	padding-bottom:0;padding-right:0;
}
.cam-bloc-texte{padding:6px 0 28px}
/* L'écran déborde à droite ET par le bas : à 250 px de large on ne lisait
   plus rien de la capture, et l'agrandir sans déborder aurait fait grossir
   toute la carte. Sa hauteur est bornée, sinon le texte se retrouve tassé en
   bas d'une colonne de 700 px. */
.cam-bloc-ecran{
	margin:0 -26px -34px 0;
	max-height:430px;
	overflow:hidden;
}
/* Pas d'ombre portée ici : la hauteur de l'écran est bornée par un
   rognage, et l'ombre s'y faisait couper net - ça donnait une bande sombre
   sur le bord gauche au lieu d'un dégradé. */
/* Ni ombre ni rotation ici : la hauteur de l'écran est bornée par un
   rognage, et tout ce qui sort de sa boîte se fait couper net. Penché de
   2,5 degrés, le coin haut gauche du téléphone dépassait de 16 px et
   ressortait tranché. */
.cam-bloc-ecran img{
	width:100%;height:auto;
	border-radius:22px 22px 0 0;
}
.cam-bloc-mascotte{
	position:absolute;
	right:-26px;bottom:-22px;
	width:132px;
	transform:rotate(9deg);
	filter:drop-shadow(0 10px 16px rgba(27,21,64,.25));
}
.cam-bloc--jaune{padding-right:120px}

/* --- Bandeau final ----------------------------------------------------- */

.cam-final{position:relative;background:var(--nuit);color:var(--creme);overflow:hidden}
.cam-final>.cam-wrap{position:relative}
.cam-final-grille{
	display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
	gap:clamp(18px,3vw,40px);align-items:center;
}
.cam-final h2{color:var(--creme)}
.cam-final h2 em{color:var(--jaune)}
.cam-final p{color:rgba(255,248,236,.85);max-width:52ch}
.cam-final-mascotte{width:min(260px,100%);margin:0 auto;filter:drop-shadow(0 16px 26px rgba(0,0,0,.45))}

/* --- Tablette et téléphone --------------------------------------------- */

@media (max-width:1250px){
	.cam-bandeau-mascotte{left:-72px;width:176px}
	.cam-bandeau .cam-liste-check li:first-child{padding-left:56px}
	.cam-bandeau .cam-liste-check li:first-child::before{left:26px}
	.cam-bandeau .cam-liste-check li:first-child::after{left:32px}
}
@media (max-width:1024px){
	.cam-parents-grille{grid-template-columns:1fr}
}
@media (max-width:900px){
	/* La marge se resserrait à mesure que l'écran rétrécit, alors que c'est là
	   qu'un texte collé au bord se voit le plus. Elle s'élargit désormais. */
	:root{--marge-page:28px}
	.cam-hero-grille,.cam-fidelite-grille,.cam-final-grille{grid-template-columns:1fr}
	/* La mascotte occupait un tiers de la hauteur du bloc, posée dans le
	   cadre. Elle passe en petit, débordant par le haut. */
	.cam-fidelite-grille{padding-top:clamp(56px,13vw,74px);overflow:visible}
	.cam-fidelite-visuel{position:absolute;top:0;right:10px;width:126px}
	.cam-fidelite .cam-fidelite-visuel img{width:126px;max-width:126px;margin:-50px 0 0}
	.cam-fidelite-grille h2{padding-right:96px;max-width:none}
	.cam-fidelite-texte{padding-bottom:clamp(24px,5vw,34px)}
	.cam-hero-visuel{order:-1;justify-content:center;padding-right:0}
	.cam-hero-mascotte{width:210px;left:-10px;bottom:46px}
	.cam-parents-grille{grid-template-columns:1fr}
	.cam-avis-grille{
		grid-template-columns:none;
		grid-auto-flow:column;
		grid-auto-columns:100%;
		gap:12px;
		margin-left:calc(-1 * var(--marge-page));margin-right:calc(-1 * var(--marge-page));
		padding:6px 11% 12px;
		overflow-x:auto;
		scroll-snap-type:x mandatory;
		scrollbar-width:none;
		-webkit-overflow-scrolling:touch;
	}
	.cam-avis-grille::-webkit-scrollbar{display:none}
	.cam-avis-carte{scroll-snap-align:center}
	/* Carrousel : une étape à la fois, on glisse. */
	.cam-etapes-liste{
		grid-template-columns:none;
		grid-auto-flow:column;
		grid-auto-columns:100%;
		gap:12px;
		margin-left:calc(-1 * var(--marge-page));margin-right:calc(-1 * var(--marge-page));
		/* Le rembourrage latéral vaut la moitié de ce qui reste une fois la
		   carte posée : sans lui, la première étape se colle à gauche et
		   l'accroche "centrée" n'a aucune marge pour opérer. */
		padding:0 11% 12px;
		overflow-x:auto;
		scroll-snap-type:x mandatory;
		-webkit-overflow-scrolling:touch;
	}
	.cam-etapes-liste li{scroll-snap-align:center}
	/* Une barre de défilement visible fait "page web", pas "application" :
	   on la masque et on la remplace par des points. */
	.cam-etapes-liste{scrollbar-width:none}
	.cam-etapes-liste::-webkit-scrollbar{display:none}
	.cam-points{display:flex}
	.cam-ecran{width:min(305px,88%)}
	.cam-bloc--large{grid-template-columns:1fr;padding-bottom:0}
	.cam-bloc-ecran{max-width:290px;margin:0 auto -34px}
	.cam-bloc--jaune{padding-right:26px;padding-bottom:118px}
	.cam-bloc-mascotte{right:50%;bottom:-14px;width:120px;transform:translateX(50%) rotate(6deg)}
	.cam-liste-check--3,.cam-bandeau .cam-liste-check--3{grid-template-columns:1fr}
	.cam-bandeau-mascotte{
		width:104px;
		left:auto;right:-6px;
		bottom:auto;top:-74px;
		transform:rotate(8deg);
	}
	/* Le titre passait sous la mascotte : on lui laisse la place. */

	.cam-bandeau{transform:none;width:100%;margin-left:0;margin-right:0}
	.cam-fidelite-visuel img{max-width:210px}
	.cam-final-mascotte{width:190px}
}
@media (max-width:560px){
	:root{--marge-page:30px}
	.cam-phone--hero{max-width:255px}
	.cam-flottant--1{width:84px;left:-2px;top:32%}
	.cam-hero-mascotte{width:176px;left:-16px;bottom:40px}
	.cam-medaille{width:82px;height:82px;font-size:.6rem;right:14px;top:16px}
	.cam-medaille strong{font-size:1.45rem}
	.cam-badge-store{font-size:.86rem;padding:10px 17px}
	.cam-bandeau-mascotte{width:86px;top:-60px;right:-4px}

}


/* --- En-tête ------------------------------------------------------------ */

.site-header{
	background:var(--creme) !important;
	border-bottom:var(--trait) solid var(--encre);
	padding:6px 0;
}

/* Sur l'accueil, l'en-tête se pose PAR-DESSUS la bannière : plus de bandeau
   clair au-dessus du fond sombre. Le logo est teinté en blanc plutôt que
   remplacé, pour qu'il reste celui du site sur toutes les autres pages. */
.home .site-header{
	position:absolute;top:0;left:0;right:0;z-index:20;
	background:transparent !important;
	border-bottom:0;
}
.home .site-logo img{width:190px;height:auto}
.home .main-navigation .main-nav > ul > li > a{color:var(--creme)}
.home .main-navigation .main-nav > ul > li > a:hover{color:var(--jaune)}
.home .cam-hero{padding-top:clamp(104px,9vw,132px)}
.main-navigation{background:transparent !important}
.main-navigation .main-nav ul li a{font-size:1rem;line-height:56px}
.inside-header{padding-top:8px;padding-bottom:8px}
.site-header .header-image{width:170px}
.main-navigation{background:transparent}
.main-navigation .main-nav ul li a{
	font-family:'Fredoka','Nunito',sans-serif;
	font-weight:600;
	color:var(--encre);
}
.main-navigation .main-nav ul li a:hover{color:var(--violet)}

/* --- Pied de page ------------------------------------------------------- */

.cam-pied{
	background:var(--encre);
	color:rgba(255,248,236,.78);
	font-family:'Nunito',sans-serif;
	font-weight:600;
	padding:clamp(38px,5vw,62px) 0 26px;
}
.cam-pied-grille{
	display:grid;
	grid-template-columns:1.6fr 1fr 1fr;
	gap:clamp(22px,4vw,52px);
	align-items:start;
}
.cam-pied-logo{width:190px;margin-bottom:14px}
.cam-pied-marque p{max-width:42ch;margin:0;font-size:.96rem}
.cam-pied-titre{
	font-family:'Fredoka','Nunito',sans-serif;
	text-transform:uppercase;
	letter-spacing:.06em;
	font-size:.86rem;
	color:var(--jaune);
	margin:0 0 .7rem;
}
.cam-pied-liens ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cam-pied-liens a{color:rgba(255,248,236,.8);text-decoration:none}
.cam-pied-liens a:hover{color:#fff;text-decoration:underline}
/* --- « Réviser, classe par classe » : une ligne par classe -------------
   Choisi parmi cinq maquettes le 10 septembre 2026. Le critère qui a tranché
   est la hauteur sur téléphone : cette forme donne 50 liens pour 1534 px,
   là où la même chose en colonnes en demandait 1943 et la version par
   matières 2071 - soit cinq écrans avant d'atteindre les mentions légales. */

.cam-pied-titre--haut{font-size:.9rem;margin-bottom:20px}

.cam-pied-ligne{
	display:flex;
	align-items:baseline;
	gap:20px;
	padding:13px 0;
	border-top:1px solid rgba(255,248,236,.12);
}
.cam-pied-ligne:first-of-type{border-top:0}

.cam-pied-classe{
	flex:0 0 74px;
	display:inline-flex;align-items:center;justify-content:center;
	padding:5px 0;border-radius:10px;
	background:var(--jaune);color:var(--encre);
	font-family:'Fredoka','Nunito',sans-serif;font-size:.95rem;
	text-decoration:none;
}
.cam-pied-classe:hover{color:var(--encre);text-decoration:none;filter:brightness(1.08)}

/* Le conteneur du site fait 1140 px là où la maquette en faisait 1180 : à
   18 px d'écart, la huitième matière du CP passait seule à la ligne. */
.cam-pied-matieres{display:flex;flex-wrap:wrap;gap:7px 15px}
.cam-pied-matieres a{color:rgba(255,248,236,.8);text-decoration:none;font-size:.91rem}
.cam-pied-matieres a:hover{color:#fff;text-decoration:underline}

/* Le bloc de marque et les liens de service passent SOUS les classes, séparés
   par un filet : sans lui, les deux blocs se lisent comme une seule liste. */
.cam-pied-classes + .cam-pied-grille{
	margin-top:34px;
	padding-top:28px;
	border-top:1px solid rgba(255,248,236,.14);
}

.cam-pied-bas{
	display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;
	margin-top:clamp(26px,4vw,44px);
	padding-top:18px;
	border-top:1px solid rgba(255,248,236,.16);
	font-size:.88rem;
	color:rgba(255,248,236,.55);
}

@media (max-width:900px){
	.cam-pied-grille{grid-template-columns:1fr}
}

@media (max-width:620px){
	/* La pastille de classe passe au-dessus de ses matières : à 74 px de large
	   sur une ligne, il ne reste rien pour « Orthographe / grammaire ». */
	.cam-pied-ligne{flex-direction:column;gap:9px}
	.cam-pied-classe{align-self:flex-start;flex:0 0 auto;padding:5px 18px}
	/* 190 px fixes occupaient la moitié d'un écran de 375 px. */
	.cam-pied-logo{width:150px}
}


/* --- Pages de contenu (légales) ---------------------------------------- */

.cam-page-tete{
	position:relative;
	background:var(--nuit);
	color:var(--creme);
	padding:clamp(112px,11vw,150px) 0 clamp(38px,5vw,58px);
	overflow:hidden;
}
.cam-page-tete>.cam-wrap{position:relative}
.cam-page-tete{text-align:center}
.cam-page-tete h1{
	color:var(--creme);
	font-size:clamp(1.9rem,4vw,3rem);
	margin:0 auto .4rem;
	max-width:20ch;
}
.cam-fil{
	font-family:'Fredoka','Nunito',sans-serif;
	font-size:.86rem;
	letter-spacing:.04em;
	color:rgba(255,248,236,.62);
	margin:0 0 .9rem;
	display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
}
.cam-fil a{color:rgba(255,248,236,.86);text-decoration:none}
.cam-fil a:hover{color:var(--jaune)}
/* La maison remplace le mot « Accueil » : elle doit s'aligner sur la ligne de
   base des autres échelons, sinon elle flotte au-dessus du chevron. */
.cam-fil-accueil{display:inline-flex;align-items:center}
.cam-fil-maison{display:block;vertical-align:middle}
.cam .cam-page-maj{margin:0;font-size:.9rem;color:rgba(255,248,236,.6)}

.cam-page-corps{background:var(--creme)}
/* Bloc centré dans la page, mais texte aligné à gauche : un texte juridique
   centré ligne à ligne devient pénible à lire. */
.cam-prose{
	margin-left:auto;margin-right:auto;
	max-width:74ch;
	background:#fff;
	border:var(--trait) solid var(--encre);
	border-radius:26px;
	box-shadow:5px 5px 0 var(--encre);
	padding:clamp(26px,4vw,48px);
}
.cam-prose h2{
	font-size:clamp(1.2rem,2vw,1.5rem);
	text-transform:none;
	letter-spacing:0;
	margin:2.2rem 0 .6rem;
	padding-top:1.4rem;
	border-top:2px dashed rgba(27,21,64,.16);
}
.cam-prose > :first-child,
.cam-prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.cam-prose h3{font-size:1.08rem;margin:1.4rem 0 .4rem}
.cam .cam-prose p{margin:0 0 1rem;line-height:1.7;color:#3c3470}
.cam-prose ul,.cam-prose ol{margin:0 0 1.2rem;padding-left:1.2rem;color:#3c3470;line-height:1.7}
.cam-prose li{margin-bottom:.4rem}
.cam-prose a{color:var(--violet);text-decoration:underline;text-underline-offset:2px}
.cam-prose a:hover{color:var(--violet-fonce)}
.cam-prose strong{color:var(--encre)}
.cam .cam-page-retour{
	margin:clamp(1.6rem,3vw,2.4rem) 0 0;
	font-family:'Fredoka','Nunito',sans-serif;
	text-align:center;
}
.cam-page-retour a{
	display:inline-block;
	background:var(--jaune);color:var(--encre);
	border:var(--trait) solid var(--encre);border-radius:999px;
	box-shadow:4px 4px 0 var(--encre);
	padding:11px 22px;text-decoration:none;
}
.cam-page-retour a:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--encre)}


/* --- Pages de révision -------------------------------------------------- */

.cam .cam-page-chapo{
	margin:.6rem auto 0;
	max-width:60ch;
	color:rgba(255,248,236,.82);
	font-size:1.02rem;
}
/* Le titre suit la carte de contenu : sans marge haute suffisante, il vient
   chevaucher son ombre portée. */
/* Préfixe « .cam » obligatoire : sans lui, la règle des titres du site
   (.cam h1, .cam h2…) l'emporte et la marge haute est perdue. C'est la
   cinquième fois que ce piège de spécificité mord sur ce thème. */
.cam .cam-liste-titre{
	margin:clamp(3rem,5vw,4.2rem) 0 1.4rem;
	font-size:clamp(1.4rem,2.4vw,1.9rem);
	text-align:center;
}
.cam-cartes-liens{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));
	gap:clamp(14px,2vw,20px);
}
.cam-carte-lien{
	display:block;
	background:#fff;
	border:var(--trait) solid var(--encre);
	border-radius:20px;
	box-shadow:5px 5px 0 var(--encre);
	padding:18px 20px;
	text-decoration:none;
	color:var(--encre);
	transition:transform .12s,box-shadow .12s;
}
.cam-carte-lien:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--encre)}
.cam-carte-lien strong{
	display:block;
	font-family:'Fredoka','Nunito',sans-serif;
	font-size:1.05rem;
	margin-bottom:.25rem;
}
.cam-carte-lien span{font-size:.92rem;color:var(--doux)}

/* Le corps d'une page de révision reprend la mise en forme des pages légales,
   avec en plus les blocs propres aux exercices. */
.cam-prose h3{color:var(--encre)}
.cam-prose ol{margin:0 0 1.2rem;padding-left:1.3rem;color:#3c3470;line-height:1.7}
.cam-prose blockquote{
	margin:1.4rem 0;
	padding:16px 20px;
	background:var(--jaune-clair);
	border:2px solid var(--encre);
	border-radius:16px;
	font-weight:700;
	color:var(--encre);
}
.cam-prose table{width:100%;border-collapse:collapse;margin:0 0 1.4rem}
.cam-prose th,.cam-prose td{border:2px solid var(--encre);padding:9px 12px;text-align:left}
.cam-prose th{background:var(--violet-clair);font-family:'Fredoka','Nunito',sans-serif}


/* --- Poèmes et fiches --------------------------------------------------- */

.cam-prose .cam-poeme{
	margin:1.8rem 0 1rem;
	border:var(--trait) solid var(--encre);
	border-radius:20px;
	box-shadow:5px 5px 0 var(--encre);
	overflow:hidden;
}
.cam-prose .cam-poeme img{width:100%;height:auto;display:block}
.cam-prose .cam-poeme figcaption{
	padding:12px 16px;
	background:var(--creme);
	border-top:var(--trait) solid var(--encre);
	font-size:.95rem;
}
/* Les vers ne se justifient pas et ne se coupent pas : un poème garde sa
   mise en page, sinon on casse le rythme que l'enfant doit entendre. */
.cam .cam-prose .cam-vers{
	font-size:1.08rem;
	line-height:1.9;
	color:var(--encre);
	padding:2px 0 2px 18px;
	border-left:4px solid var(--jaune);
	margin-bottom:1rem;
}
.cam .cam-prose .cam-pourquoi{font-size:.95rem;color:var(--doux)}
.cam .cam-prose .cam-telecharger{margin:0 0 2.4rem}
.cam-prose .cam-telecharger a{
	display:inline-block;
	background:var(--jaune);
	color:var(--encre);
	border:2px solid var(--encre);
	border-radius:999px;
	box-shadow:3px 3px 0 var(--encre);
	padding:9px 18px;
	text-decoration:none;
	font-family:'Fredoka','Nunito',sans-serif;
	font-size:.95rem;
}
.cam-prose .cam-telecharger a:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--encre)}


/* --- Largeur et respiration des pages de révision ----------------------- */

/* Une page légale se lit en colonne étroite ; une page de révision contient
   des images, un tableau et des fiches, elle a besoin de place. */
.cam-revision .cam-prose{
	max-width:none;
	padding:clamp(28px,4vw,54px) clamp(24px,4vw,60px);
}
.cam-revision .cam-page-corps{padding-top:clamp(40px,5vw,64px)}

/* Les paragraphes de texte pur restent à une largeur lisible, mais les
   éléments larges - images, tableau - occupent toute la carte. */
.cam-revision .cam-prose > p,
.cam-revision .cam-prose > ul,
.cam-revision .cam-prose > ol,
.cam-revision .cam-prose > blockquote{max-width:74ch}

.cam-revision .cam-prose h2{
	margin-top:2.8rem;
	padding-top:1.8rem;
	font-size:clamp(1.35rem,2.3vw,1.75rem);
}
.cam-revision .cam-prose h3{margin-top:1.8rem}

/* Les poèmes en grille : deux par ligne sur grand écran au lieu d'une longue
   colonne qui n'en finit pas. */
.cam-revision .cam-prose .cam-poeme{margin:1.6rem 0 .8rem;max-width:520px}
.cam-revision .cam-prose .cam-vers{max-width:520px}


/* --- Pleine largeur ----------------------------------------------------- */

/* Le conteneur de GeneratePress plafonne à 2000 px : au-delà, des bandes
   claires apparaissent de chaque côté et les fonds de section s'arrêtent au
   milieu de l'écran. Les fonds doivent aller d'un bord à l'autre ; c'est
   `.cam-wrap` qui limite le contenu, pas le conteneur du thème. */
body.home .site.grid-container,
body.single-lecon .site.grid-container,
body.page .site.grid-container{
	max-width:none;
	width:100%;
	padding-left:0;
	padding-right:0;
}

/* En-tête posé sur la bannière, comme sur l'accueil. */
body.single-lecon .site-header{
	position:absolute;top:0;left:0;right:0;z-index:20;
	background:transparent !important;
	border-bottom:0;
}
body.single-lecon .site-header{padding:16px 0}
body.single-lecon .site-logo img{width:190px;height:auto}
body.single-lecon .main-navigation .main-nav > ul > li > a{color:var(--creme)}
body.single-lecon .main-navigation .main-nav > ul > li > a:hover{color:var(--jaune)}
body.single-lecon .cam-page-tete{padding-top:clamp(122px,11vw,158px)}


/* --- Un poème : image et texte côte à côte ------------------------------ */

/* Empilés, sept poèmes font une page interminable. Côte à côte, on voit le
   titre, le texte et le bouton d'un seul coup d'œil. */
.cam-poeme-bloc{
	display:grid;
	grid-template-columns:minmax(0,360px) minmax(0,1fr);
	gap:clamp(18px,2.5vw,32px);
	align-items:start;
	margin:0 0 clamp(28px,4vw,44px);
	padding-bottom:clamp(24px,3vw,32px);
	border-bottom:2px dashed rgba(27,21,64,.16);
}
.cam-poeme-bloc:last-of-type{border-bottom:0}
.cam .cam-prose .cam-poeme-bloc .cam-poeme{margin:0;max-width:none}
.cam-poeme-texte h4{
	font-family:'Fredoka','Nunito',sans-serif;
	font-size:1.25rem;
	margin:0 0 .2rem;
	color:var(--encre);
}
.cam .cam-prose .cam-signature{
	margin:0 0 .9rem;
	font-size:.9rem;
	color:var(--doux);
}
.cam .cam-prose .cam-poeme-bloc .cam-vers{max-width:none;margin-bottom:.9rem}
/* Le lien vers la source n est pas une action : il ne doit pas ressembler au
   bouton de telechargement. */
.cam-prose .cam-telecharger a.cam-source{
	background:none;
	border:0;
	box-shadow:none;
	padding:0;
	margin-left:14px;
	font-family:'Nunito',sans-serif;
	font-size:.86rem;
	color:var(--doux);
	text-decoration:underline;
}
.cam-prose .cam-telecharger a.cam-source:hover{color:var(--violet);transform:none}

@media (max-width:820px){
	.cam-poeme-bloc{grid-template-columns:1fr}
}


/* --- Poème seul et références protégées --------------------------------- */

/* Le poème n'a plus sa vignette ici : elle est déjà dans la planche, en haut
   de page. Deux fois la même image sur une page, c'est du remplissage. */
.cam-poeme-bloc.cam-poeme-seul{grid-template-columns:1fr}

.cam-protege{
	background:var(--creme);
	border:2px dashed var(--encre);
	border-radius:18px;
	padding:20px 22px;
	margin:0 0 1.2rem;
}
.cam-protege h4{
	font-family:'Fredoka','Nunito',sans-serif;
	font-size:1.15rem;
	margin:0 0 .2rem;
}
.cam .cam-prose .cam-vers-cite{
	font-style:italic;
	color:var(--encre);
	border-left:4px solid var(--violet);
	padding-left:16px;
	margin:.8rem 0;
}


/* --- Collage de la bannière en haut ------------------------------------- */

/* L'en-tête était bien posé sur la bannière, mais GeneratePress ajoute une
   marge de 40 px au-dessus du contenu : il restait donc une bande claire
   entre le haut de la page et le fond sombre. Mesuré, pas supposé. */
body.single-lecon .site-content,
body.single-lecon .content-area,
body.single-lecon .site-main,
body.page .site-content,
body.page .site-main{padding:0;margin:0}

/* --- Le recueil : une carte par poème ----------------------------------- */

/* Chaque carte mène à la page du poème. Deux sorties : lire, ou imprimer la
   fiche. Rien ne se déplie sur place - un poème mérite sa page. */
.cam-recueil{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:22px;
	margin:1.6rem 0 2.4rem;
}
@media (max-width:900px){.cam-recueil{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
@media (max-width:560px){.cam-recueil{grid-template-columns:1fr}}

.cam-recueil-carte{
	background:var(--jaune-clair);
	border:var(--trait) solid var(--encre);
	border-radius:20px;
	box-shadow:5px 5px 0 var(--encre);
	padding:22px 18px 20px;
	text-align:center;
	display:flex;
	flex-direction:column;
	gap:10px;
}
.cam-recueil-carte:nth-child(3n+2){background:var(--bleu-clair)}
.cam-recueil-carte:nth-child(3n){background:var(--violet-clair)}

.cam .cam-prose .cam-recueil-carte h3{
	font-size:1.12rem;
	margin:0;
	line-height:1.25;
}
.cam .cam-prose .cam-recueil-carte h3 a{
	color:var(--encre);
	text-decoration:none;
}
.cam .cam-prose .cam-recueil-carte h3 a:hover{text-decoration:underline}
.cam .cam-prose .cam-recueil-info{
	margin:0;
	font-size:.86rem;
	opacity:.75;
	flex:1 0 auto;
}
.cam .cam-prose .cam-recueil-actions{
	margin:6px 0 0;
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	justify-content:center;
}
.cam .cam-prose .cam-recueil-actions a{
	display:inline-block;
	border:2px solid var(--encre);
	border-radius:999px;
	box-shadow:3px 3px 0 var(--encre);
	padding:9px 16px;
	font-family:'Fredoka','Nunito',sans-serif;
	font-size:.86rem;
	color:var(--encre);
	text-decoration:none;
	background:#fff;
	transition:transform .12s ease, box-shadow .12s ease;
}
.cam .cam-prose .cam-recueil-actions a.cam-recueil-lire{background:var(--jaune)}
.cam .cam-prose .cam-recueil-actions a:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--encre)}

/* --- Page d'un poème ----------------------------------------------------- */

.cam .cam-prose .cam-poeme-intro{
	font-size:1.06rem;
	opacity:.8;
	margin-bottom:1.8rem;
}
/* Le texte est ce que l'on vient chercher : il occupe le haut de la page,
   posé sur sa propre carte. */
.cam-poeme-texte-seul{
	background:var(--creme);
	border:var(--trait) solid var(--encre);
	border-radius:22px;
	box-shadow:6px 6px 0 var(--encre);
	padding:28px 30px 22px;
	margin:0 0 2.6rem;
	max-width:560px;
}
.cam .cam-prose .cam-poeme-texte-seul .cam-vers{
	max-width:none;
	margin-bottom:1rem;
	font-size:1.22rem;
}
.cam .cam-prose .cam-poeme-texte-seul .cam-signature{margin-bottom:.6rem}
.cam .cam-prose .cam-poeme-lien-source{margin:0;font-size:.86rem}
.cam .cam-prose .cam-poeme-lien-source a{color:var(--violet)}

.cam .cam-prose ul.cam-mots{margin:0 0 2rem;padding-left:1.1rem}
.cam .cam-prose ul.cam-mots li{margin-bottom:.5rem}

.cam .cam-prose ol.cam-soirs{
	margin:0 0 1.4rem;
	padding-left:1.3rem;
}
.cam .cam-prose ol.cam-soirs li{margin-bottom:.55rem}
.cam .cam-prose ol.cam-soirs em{font-style:normal;opacity:.85}

/* L'extrait réellement récité au CP, détaché du poème entier. */
.cam-a-apprendre{
	background:var(--jaune-clair);
	border:var(--trait) solid var(--encre);
	border-radius:20px;
	box-shadow:5px 5px 0 var(--encre);
	padding:22px 26px 18px;
	margin:0 0 2.6rem;
	max-width:560px;
}
.cam .cam-prose .cam-a-apprendre-titre{
	font-family:'Fredoka','Nunito',sans-serif;
	font-size:1.02rem;
	margin:0 0 .8rem;
}
.cam .cam-prose .cam-a-apprendre .cam-vers{
	max-width:none;
	margin-bottom:.8rem;
	border-left-color:var(--encre);
}
.cam .cam-prose .cam-a-apprendre-note{
	margin:0;
	font-size:.86rem;
	opacity:.75;
}
/* Plusieurs strophes se suivent : on les espace sans les séparer d'un trait. */
.cam .cam-prose .cam-poeme-texte-seul .cam-vers + .cam-vers{margin-top:1.2rem}
/* --- Page de niveau : sections composées -------------------------------- */

/* Chaque section a son propre traitement : un sommaire, un duo texte-écran,
   un repère chiffré, un chemin, une frise, un bandeau. Empiler six grilles de
   cartes identiques donnerait une page qui se lit comme un tableur. */

.cam-niveau .cam-hero--niveau{padding-bottom:clamp(40px,6vw,70px)}
.cam-niveau .cam-hero h1{font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.1}
/* Le fil est centré sur les pages de notion, aligné à gauche sur une page de
   niveau où tout le bloc de titre l'est aussi. */
/* Le fil d'Ariane est centré par défaut, ce qui n'a de sens que sur une page
   dont tout l'en-tête est centré. Dans un bandeau aligné à gauche, il partait
   au milieu et ne s'alignait plus sur le titre. */
.cam-niveau .cam-fil,
.cam-matiere-page .cam-fil{margin-bottom:.9rem;justify-content:flex-start}
/* Le fil d'Ariane reste aligné sur le titre à toutes les largeurs : le centrer
   sur téléphone le décalait du titre, qui lui reste à gauche. Mesuré : 15 px
   d'écart sur la page de niveau, 114 px sur celle de matière. */
.cam-hero-visuel--niveau{display:flex;justify-content:center;align-items:flex-end}
/* cam_image() pose la classe sur l'élément <img> lui-même : on cible donc
   la classe directement, pas un enfant. */
.cam-niveau-mascotte{width:min(320px,80%);height:auto}

.cam-sec{padding:clamp(48px,7vw,86px) 0}
.cam-sec h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin:0 0 .8rem;text-align:center}
/* Le titre de section est centré : son surtitre doit l'être aussi, sinon la
   pilule part à gauche et le bloc paraît décousu. */
.cam-sec > .cam-wrap > .cam-surtitre{display:table;margin-left:auto;margin-right:auto}
.cam-sec h2 em{font-style:normal;color:var(--violet)}
.cam-sec .cam-intro{max-width:62ch;margin:0 auto 2.4rem;text-align:center;color:var(--doux)}
/* La mention destinée à l'enseignant, posée au-dessus de la table des fiches.
   Elle se distingue du chapeau sans crier : une pastille claire, pas un bloc
   d'alerte. La spécificité suit celle de la règle ci-dessus, sinon la couleur
   et la marge du chapeau l'emportent. */
.cam-sec .cam-intro-prof{
	max-width:62ch;margin:-1.4rem auto 2.4rem;
	background:#fff7e3;border:2px solid var(--encre);border-radius:12px;
	padding:.7rem 1.1rem;color:var(--encre);font-size:.96rem;
}
.cam-sec .cam-intro-prof a{color:var(--violet);font-weight:700}
.cam-sec--matieres{background:#fff}
.cam-sec--apprend{background:var(--creme)}
.cam-sec--acquis{background:var(--violet-clair)}
.cam-sec--methode{background:#fff}
.cam-sec--annee{background:var(--creme)}
.cam-sec--alerte{background:var(--bleu-clair)}

/* 1. Le sommaire du programme : des colonnes, pas des cartes. */
/* Un flux en colonnes plutôt qu'une grille : une matière sans notion ne
   laisse pas un trou de la hauteur de la plus fournie. */
/* Les colonnes sont composées côté serveur (cf. le shortcode cam_matieres) :
   `columns: 3` équilibrait la hauteur totale et laissait la troisième colonne
   vide dès qu'une discipline était beaucoup plus longue que les autres. */
.cam-matieres-grille{
	display:grid;
	grid-template-columns:repeat(var(--colonnes,3),1fr);
	gap:clamp(24px,3vw,44px);
	align-items:start;
	max-width:1040px;
	margin:0 auto;
}
@media (max-width:900px){.cam-matieres-grille{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cam-matieres-grille{grid-template-columns:1fr}}
.cam-matiere{
	break-inside:avoid;
	display:inline-block;
	width:100%;
	margin:0 0 clamp(22px,2.6vw,34px);
}
.cam-matiere-titre{
	font-size:1.16rem;
	margin:0 0 .8rem;
	padding-bottom:.5rem;
	border-bottom:4px solid var(--jaune);
	display:flex;
	align-items:center;
	gap:9px;
}
/* L'icône prend la couleur du filet de sa matière. */
.cam-icone-matiere{flex:0 0 auto;color:var(--jaune)}
.cam-matiere:nth-child(4n+2) .cam-icone-matiere{color:var(--violet)}
.cam-matiere:nth-child(4n+3) .cam-icone-matiere{color:#3fb9a9}
.cam-matiere:nth-child(4n+4) .cam-icone-matiere{color:#f472a8}
.cam-matiere:nth-child(4n+2) .cam-matiere-titre{border-bottom-color:var(--violet)}
.cam-matiere:nth-child(4n+3) .cam-matiere-titre{border-bottom-color:#6fd3c7}
.cam-matiere:nth-child(4n+4) .cam-matiere-titre{border-bottom-color:#ff9ec4}
.cam-matiere-titre a{color:var(--encre);text-decoration:none}
.cam-matiere-titre a:hover{text-decoration:underline}
.cam-matiere-liste{list-style:none;margin:0;padding:0}
.cam-matiere-liste li{margin:0 0 .45rem}
.cam-matiere-liste a{
	color:var(--doux);
	text-decoration:none;
	font-size:.98rem;
	border-bottom:2px solid transparent;
}
.cam-matiere-liste a:hover{color:var(--encre);border-bottom-color:var(--jaune)}

/* 2. Le duo : l'écran de l'application et le programme en regard. */
.cam-duo{
	display:grid;
	grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
	gap:clamp(28px,4vw,60px);
	align-items:center;
}
.cam-duo h2{text-align:left}
.cam-duo-visuel{display:flex;justify-content:center}
.cam-ecran-tel{
	width:min(300px,86%);
	height:auto;
	border-radius:28px;
	border:var(--trait) solid var(--encre);
	box-shadow:10px 10px 0 var(--encre);
}
.cam-defs{margin:1.4rem 0 0}
.cam-defs dt{
	font-family:'Fredoka','Nunito',sans-serif;
	font-size:1.06rem;
	color:var(--encre);
	margin-bottom:.2rem;
	padding-left:16px;
	border-left:5px solid var(--jaune);
}
.cam .cam-defs dd{margin:0 0 1.3rem;padding-left:16px;color:var(--doux);line-height:1.65}
.cam-defs dt:nth-of-type(2){border-left-color:var(--violet)}
.cam-defs dt:nth-of-type(3){border-left-color:#6fd3c7}
.cam-defs dt:nth-of-type(4){border-left-color:#ff9ec4}
@media (max-width:860px){
	.cam-duo{grid-template-columns:1fr}
	.cam-duo h2{text-align:center}
	.cam-duo-visuel{order:2}
}

/* 3. Le repère de fin d'année : un chiffre, une mascotte. */
.cam .cam-acquis-note{
	max-width:60ch;
	margin:2rem auto 0;
	text-align:center;
	font-style:italic;
	color:var(--doux);
}

/* La fiche : une feuille d'école, ses lignes, ses cases à cocher, et le repère
   chiffré posé dans la colonne de droite avec la mascotte. */
.cam-fiche{
	max-width:940px;
	margin:0 auto;
	background:#fff;
	border:var(--trait) solid var(--encre);
	border-radius:22px;
	box-shadow:8px 8px 0 var(--encre);
	padding:clamp(24px,3vw,34px);
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,300px);
	gap:clamp(20px,3vw,38px);
}
@media (max-width:820px){.cam-fiche{grid-template-columns:1fr}}
.cam .cam-fiche-titre{
	font-family:'Fredoka','Nunito',sans-serif;
	font-size:1.14rem;
	margin:0 0 1rem;
	padding-bottom:.6rem;
	border-bottom:3px solid var(--jaune);
}
.cam-fiche-lignes{list-style:none;margin:0;padding:0}
.cam-fiche-lignes li{
	position:relative;
	padding:0 0 0 36px;
	/* Une hauteur de ligne fixe donne le rythme d'un cahier. */
	min-height:38px;
	display:flex;
	align-items:center;
	border-bottom:1px dashed rgba(27,21,64,.22);
	font-size:1rem;
}
.cam-fiche-lignes li:last-child{border-bottom:0}
/* La case et sa coche sont dessinées : le caractère ✓ n'existe pas dans
   Fredoka et s'afficherait en carré vide. */
.cam-fiche-lignes li::before{
	content:"";
	position:absolute;
	left:0;top:50%;
	transform:translateY(-50%);
	width:20px;height:20px;
	border:2.5px solid var(--encre);
	border-radius:6px;
	background:#fff;
}
.cam-fiche-lignes li::after{
	content:"";
	position:absolute;
	left:5px;top:calc(50% - 3px);
	width:11px;height:6px;
	border-left:3px solid var(--jaune);
	border-bottom:3px solid var(--jaune);
	transform:translateY(-50%) rotate(-45deg);
}
.cam-fiche-repere{
	background:var(--creme);
	border:2px solid var(--encre);
	border-radius:18px;
	padding:20px 22px 10px;
	text-align:center;
	align-self:start;
}
.cam .cam-fiche-chiffre{
	margin:0;
	font-family:'Fredoka','Nunito',sans-serif;
	font-size:.95rem;
	color:var(--doux);
}
.cam-fiche-chiffre strong{
	display:block;
	font-size:clamp(2.2rem,4.4vw,2.9rem);
	color:var(--violet);
	line-height:1;
}
.cam-fiche-mascotte{
	display:block;
	width:min(230px,100%);
	height:auto;
	margin:.4rem auto 0;
}
.cam .cam-fiche-source{
	margin:0;
	font-size:.84rem;
	color:var(--doux);
	line-height:1.5;
}
.cam-sec blockquote{
	max-width:60ch;
	/* Une citation posée trop près du bloc qu'elle commente se lit comme sa
	   suite : elle a besoin d'un vrai blanc au-dessus. */
	margin:3.6rem auto 0;
	background:#fff;
	border:var(--trait) solid var(--encre);
	border-radius:20px;
	box-shadow:5px 5px 0 var(--encre);
	padding:20px 24px;
	font-style:italic;
}

/* 4. Le chemin : quatre étapes reliées, sans cadre autour. */
.cam-chemin{
	list-style:none;
	margin:0 auto;
	padding:0;
	max-width:1040px;
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
	gap:clamp(18px,2.4vw,30px);
	position:relative;
}
.cam-chemin li{position:relative;text-align:center;padding:0 6px}
/* Le trait qui relie les étapes passe derrière les pastilles. */
.cam-chemin li::before{
	content:"";
	position:absolute;
	top:26px;left:calc(-50% + 26px);right:calc(50% + 26px);
	border-top:3px dashed rgba(27,21,64,.28);
}
.cam-chemin li:first-child::before{display:none}
@media (max-width:700px){.cam-chemin li::before{display:none}}
.cam-chemin .cam-num{position:relative;z-index:1;margin-bottom:.7rem}
.cam-chemin h3{font-size:1.06rem;margin:0 0 .4rem}
.cam .cam-chemin p{margin:0;color:var(--doux);font-size:.96rem;line-height:1.6}

/* 5. La frise de l'année. */
.cam-frise{
	list-style:none;
	margin:0 auto;
	padding:0;
	max-width:940px;
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
	gap:clamp(16px,2vw,26px);
	position:relative;
}
.cam-frise li{
	position:relative;
	padding-top:34px;
	text-align:center;
}
.cam-frise li::before{
	content:"";
	position:absolute;
	top:11px;left:0;right:0;
	border-top:4px dotted var(--violet);
	opacity:.45;
}
.cam-frise li::after{
	content:"";
	position:absolute;
	top:4px;left:calc(50% - 9px);
	width:18px;height:18px;
	background:var(--jaune);
	border:var(--trait) solid var(--encre);
	border-radius:50%;
}
.cam-frise-mois{
	display:block;
	font-family:'Fredoka','Nunito',sans-serif;
	font-size:1.14rem;
	margin-bottom:.35rem;
}
.cam .cam-frise p{margin:0;color:var(--doux);font-size:.96rem;line-height:1.6}
.cam .cam-note-frise{
	/* 60ch ramassait la note en quatre lignes courtes, très encadrées de vide.
	   80ch la laisse respirer sans devenir un pavé. */
	max-width:80ch;
	margin:2rem auto 0;
	text-align:center;
	color:var(--doux);
	font-size:.96rem;
}

/* 6. Les signaux d'alerte : un bandeau, comme sur l'accueil. */
.cam-alerte-zone{
	position:relative;
	max-width:1000px;
	margin:0 auto;
	padding-left:clamp(0px,10vw,150px);
}
.cam-alerte-mascotte{
	position:absolute;
	left:-10px;bottom:-18px;
	width:min(210px,22vw);
	height:auto;
}

@media (max-width:900px){
	.cam-alerte-zone{padding-left:0}
	.cam-alerte-mascotte{position:static;display:block;width:150px;height:auto;margin:0 auto .6rem}
}
.cam-alerte-bloc{
	background:#fff;
	border:var(--trait) solid var(--encre);
	border-radius:26px;
	box-shadow:8px 8px 0 var(--encre);
	padding:clamp(24px,3vw,36px);
}
.cam .cam-alerte-titre{
	font-family:'Fredoka','Nunito',sans-serif;
	font-size:clamp(1.4rem,2.6vw,1.9rem);
	margin:0 0 1.2rem;
}
.cam-alerte-titre em{font-style:normal;color:var(--violet)}
.cam-liste-alerte{margin:0 0 1.4rem;padding:0;list-style:none}
.cam-liste-alerte li{
	position:relative;
	padding:0 0 0 34px;
	margin-bottom:.85rem;
	line-height:1.6;
}
.cam-liste-alerte li::before{
	content:"";
	position:absolute;
	left:0;top:4px;
	width:18px;height:18px;
	border-radius:6px;
	background:var(--jaune);
	border:2px solid var(--encre);
}
.cam .cam-alerte-note{margin:0;color:var(--doux);font-size:.96rem;line-height:1.65}

/* 7. Les questions des parents : deux colonnes de questions-réponses. */
/* Cette section n'a pas de phrase d'introduction : le titre porte donc lui-même
   l'espace qui sépare d'habitude le titre du contenu. */
.cam-sec--faq{background:#fff}
.cam-sec--faq h2{margin-bottom:clamp(2rem,3.4vw,2.9rem)}
.cam-faq{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
	gap:clamp(20px,3vw,40px);
	max-width:1040px;
	margin:0 auto;
	align-items:start;
}

/* Sur une page de leçon, la FAQ est suivie du paragraphe de maillage et du
   retour vers la matière. Les réponses de la FAQ étant de hauteurs inégales,
   ce paragraphe venait se coller sous la colonne la plus longue, sans
   respiration - on ne voyait plus qu'un bloc changeait. */
.cam .cam-prose .cam-faq{margin-bottom:2.4rem}
.cam .cam-prose .cam-faq + p{margin-top:0}
.cam-faq-item h3{
	font-size:1.08rem;
	margin:0 0 .5rem;
	padding-left:16px;
	border-left:5px solid var(--violet);
	color:var(--encre);
}
.cam-faq-item:nth-child(3n+2) h3{border-left-color:var(--jaune)}
.cam-faq-item:nth-child(3n) h3{border-left-color:#6fd3c7}
.cam .cam-faq-item p{
	margin:0;
	padding-left:16px;
	color:var(--doux);
	line-height:1.7;
	font-size:.98rem;
}

/* --- Accueil : les classes ouvertes -------------------------------------- */

/* Sans ce bloc, les pages de révision n'auraient aucun lien depuis l'accueil.
   La liste se calcule à partir des niveaux réellement publiés. */
.cam-classes{padding:clamp(48px,7vw,86px) 0;background:var(--creme)}
.cam-classes h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin:0 0 .8rem;text-align:center}
.cam-classes h2 em{font-style:normal;color:var(--violet)}
.cam-classes .cam-intro{max-width:60ch;margin:0 auto 2.2rem;text-align:center;color:var(--doux)}
/* Les cartes gardent leur taille quel que soit leur nombre : avec « auto-fit »
   et « 1fr », une seule classe ouverte s'étirerait sur toute la largeur. */
.cam-classes-grille{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:clamp(14px,2vw,22px);
	max-width:900px;
	margin:0 auto;
}
.cam-classe{flex:0 1 168px}
.cam-classe{
	display:block;
	text-align:center;
	background:#fff;
	border:var(--trait) solid var(--encre);
	border-radius:20px;
	box-shadow:6px 6px 0 var(--encre);
	padding:22px 16px 18px;
	text-decoration:none;
	color:var(--encre);
	transition:transform .12s ease, box-shadow .12s ease;
}
.cam-classe:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--encre)}
.cam-classe strong{
	display:block;
	font-family:'Fredoka','Nunito',sans-serif;
	font-size:1.9rem;
	line-height:1;
	color:var(--violet);
}
.cam-classe span{display:block;margin-top:.4rem;font-size:.92rem;color:var(--doux)}

/* --- Fiches à imprimer, sur une page de notion -------------------------- */

/* `auto-fill` et non `auto-fit` : avec `auto-fit`, une fiche seule s'étirait
   sur toute la largeur alors qu'à deux elles font chacune une demi-colonne.
   Les deux cas donnent maintenant la même carte, ce qui évite qu'une page à
   une seule fiche paraisse construite autrement. */
.cam-fiches{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));
	gap:clamp(16px,2vw,24px);
	margin:1.4rem 0 2.4rem;
}

/* Chaque fiche montre une VIGNETTE du document avant qu'on le télécharge : le
   visiteur sait ce qu'il ouvre. La vignette est dessinée en CSS, sur le
   conteneur lui-même - aucun contenu à retoucher, et les pages futures en
   héritent. Les lignes sont un dégradé répété, la pastille « PDF » un
   pseudo-élément posé dans le coin. */
.cam-fiche-lien{
	position:relative;
	background:#fff;
	border:var(--trait) solid var(--encre);
	border-radius:20px;
	box-shadow:5px 5px 0 var(--encre);
	padding:20px 24px 18px 158px;
	min-height:188px;
	display:flex;flex-direction:column;justify-content:center;
}
.cam-fiche-lien::before{
	content:"";
	position:absolute;left:24px;top:50%;transform:translateY(-50%);
	width:112px;height:148px;
	background:#fff;
	border:2px solid var(--encre);
	border-radius:4px;
	box-shadow:3px 3px 0 rgba(27,21,64,.18);
	/* Le titre de la feuille, puis ses lignes de texte. */
	background-image:
		linear-gradient(var(--encre),var(--encre)),
		repeating-linear-gradient(180deg,
			var(--violet-clair) 0 5px, transparent 5px 11px);
	background-size:62px 7px, 88px 99px;
	background-position:12px 12px, 12px 30px;
	background-repeat:no-repeat;
}

/* Quand la fiche a un vrai aperçu, il remplace la vignette dessinée : c'est le
   document lui-même qu'on montre, et c'est lui que Google Images indexe. La
   vignette CSS reste pour les fiches sans aperçu. */
.cam-fiche-lien--apercu::before{display:none}
.cam .cam-prose img.cam-fiche-apercu{
	position:absolute;left:24px;top:50%;transform:translateY(-50%);
	width:112px;height:auto;margin:0;
	border:2px solid var(--encre);
	border-radius:4px;
	box-shadow:3px 3px 0 rgba(27,21,64,.18);
	background:#fff;
}
.cam-fiche-lien::after{
	content:"PDF";
	position:absolute;left:96px;top:50%;
	transform:translateY(46px);
	font-family:'Fredoka','Nunito',sans-serif;font-size:.6rem;
	color:#fff;background:var(--violet);
	padding:2px 8px;border-radius:999px;
	border:1.5px solid var(--encre);
}
.cam .cam-prose .cam-fiche-lien h3{font-size:1.06rem;margin:0 0 .4rem}
.cam .cam-prose .cam-fiche-lien p{margin:0 0 1rem;font-size:.95rem;color:var(--doux)}
.cam .cam-prose .cam-fiche-lien .cam-telecharger{margin:0;display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* Sous 430 px, la vignette et le texte ne tiennent plus côte à côte : elle
   passe au-dessus, en plus petit. La supprimer serait perdre ce qui fait
   l'intérêt du bloc. */
@media (max-width:430px){
	.cam-fiche-lien{padding:104px 20px 18px;min-height:0}
	.cam-fiche-lien::before{
		left:20px;top:18px;transform:none;
		width:58px;height:76px;
		background-size:34px 5px, 44px 50px;
		background-position:7px 7px, 7px 18px;
	}
	.cam .cam-prose img.cam-fiche-apercu{left:20px;top:18px;transform:none;width:62px}
	/* La pastille se pose dans le coin bas-droit de la vignette, sans la
	   déborder : à cheval, elle se lisait comme un défaut d'alignement. */
	.cam-fiche-lien::after{left:24px;top:18px;transform:translateY(58px)}
	.cam-fiche-lien--apercu::after{left:28px;transform:translateY(62px)}
}

/* --- Schémas explicatifs ------------------------------------------------- */

/* Dessinés en SVG dans le thème : nets à toutes les tailles, et le trait suit
   la charte du site. Le cadre les distingue du texte sans les enfermer. */
.cam-schema{
	margin:1.6rem 0 2.2rem;
	padding:20px 18px 14px;
	background:var(--creme);
	border:var(--trait) solid var(--encre);
	border-radius:20px;
	box-shadow:5px 5px 0 var(--encre);
	text-align:center;
	/* Un schéma large défile dans son cadre plutôt que de pousser la page. */
	overflow-x:auto;
}
.cam-schema svg{
	max-width:100%;
	height:auto;
	display:block;
	margin:0 auto;
}
.cam .cam-prose .cam-schema figcaption{
	margin:.9rem 0 0;
	font-size:.9rem;
	color:var(--doux);
	line-height:1.5;
}
/* Les libellés sont du texte HTML : ils gardent leur taille quand le dessin
   rétrécit, et se replient au lieu de sortir du cadre. */
.cam-schema-lot{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:flex-end;
	gap:18px 26px;
}
.cam-schema-item{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:5px;
	/* La largeur vient du dessin, pas du conteneur : sans cela, les éléments
	   s'empilent en une seule colonne sur téléphone alors que deux tiennent. */
	flex:0 0 auto;
	max-width:190px;
}
.cam-schema-item svg{width:auto;max-width:100%;height:auto;display:block}
.cam-schema-titre{
	font-family:'Fredoka','Nunito',sans-serif;
	font-size:1.25rem;
	color:var(--encre);
	line-height:1;
}
.cam-schema-nom{font-weight:700;font-size:.92rem;color:var(--encre);line-height:1.3}
.cam-schema-sous{font-size:.86rem;color:var(--violet);line-height:1.3}
.cam-schema-cles{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:8px 26px;
	margin-top:1.1rem;
	text-align:left;
}
.cam-schema-cles > div{
	display:flex;
	align-items:center;
	gap:9px;
	font-size:.9rem;
	color:var(--encre);
}
.cam-schema-cles i{display:block;border-radius:3px;flex:none}
.cam-cle-courte{width:20px;height:7px;background:var(--encre)}
.cam-cle-longue{width:30px;height:5px;background:var(--violet)}
/* Sur téléphone, le cadre ne laisse que ~215 px : deux dessins par ligne,
   largeur imposée, sinon le troisième pixel de trop les met en colonne. */
@media (max-width:600px){
	.cam-schema{padding:16px 12px 12px}
	.cam-schema-lot{gap:16px 10px}
	.cam-schema-item{flex:0 0 calc(50% - 5px);max-width:none}
	.cam-schema--horloge .cam-schema-item{flex:0 0 auto}
	.cam-schema-cles{gap:8px 16px}
}

/* --- Page de matière ---------------------------------------------------- */

/* Le bandeau annonce des chiffres au lieu de la mascotte : une page de matière
   se distingue ainsi au premier coup d'œil d'une page de niveau. */
/* L'en-tête du site est transparent et se superpose au bandeau : sans cette
   réserve, le fil d'Ariane passe sous le logo dès qu'il tient sur deux
   lignes. Les pages de niveau y échappent par hasard, leur mascotte passant
   en premier sur téléphone. */
.cam-matiere-page .cam-hero{padding-top:clamp(86px,13vw,110px)}
/* Un titre de page matière est long par nature (« Maths CP : le programme
   complet et les fiches ») : sans réduction il tient sur quatre lignes. */
.cam-matiere-page .cam-hero h1{font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.08}
.cam-hero-grille--matiere{grid-template-columns:1.15fr auto .85fr;align-items:center;gap:26px}
.cam-matiere-mascotte{width:clamp(120px,13vw,190px);align-self:end;margin-bottom:-14px}
.cam-reperes{display:grid;gap:12px}
.cam-repere{
	background:#fff;
	border:var(--trait) solid var(--encre);
	border-radius:18px;
	box-shadow:5px 5px 0 var(--encre);
	padding:14px 18px;
	display:flex;align-items:baseline;gap:12px;
}
.cam-repere b{font-family:'Fredoka','Nunito',sans-serif;font-size:1.9rem;color:var(--violet);line-height:1}
.cam-repere span{font-weight:700;color:var(--encre);font-size:.95rem}
a.cam-repere{text-decoration:none;transition:transform .12s,box-shadow .12s}
a.cam-repere:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--encre)}
a.cam-repere::after{content:"↓";margin-left:auto;color:var(--violet);font-weight:800}

/* La progression de l'année : cinq jalons reliés par une courbe qui ondule.
   La courbe est en fond, à la hauteur exacte des pastilles. */
.cam-chemin-annee{position:relative;max-width:1140px;margin:1.8rem auto 0;padding:12px 0 0}
.cam-chemin-annee svg{position:absolute;left:0;right:0;top:12px;width:100%;height:74px}
.cam-chemin-annee ol{
	list-style:none;margin:0;padding:0;position:relative;
	display:grid;grid-template-columns:repeat(5,1fr);gap:10px;
}
.cam-chemin-annee li{text-align:center}
.cam-jalon{
	width:74px;height:74px;border-radius:50%;margin:0 auto 12px;
	display:grid;place-content:center;
	background:var(--jaune);border:var(--trait) solid var(--encre);
	box-shadow:4px 4px 0 var(--encre);
	font-family:'Fredoka','Nunito',sans-serif;font-size:1.7rem;color:var(--encre);
}
.cam .cam-chemin-annee b{display:block;font-family:'Fredoka','Nunito',sans-serif;font-size:1.05rem}
.cam .cam-chemin-annee em{display:block;font-style:normal;color:var(--doux);font-size:.85rem;margin-bottom:8px}
.cam .cam-chemin-annee p{margin:0;font-size:.9rem;line-height:1.55}

/* Un tableau de contenu (le recueil de poésies, par exemple) : sobre sur
   grand écran, en blocs sur téléphone. Sans cela il déborde de l'écran - le
   tableau des poèmes sortait de 126 px à 320. */
.cam-tableau{width:100%;border-collapse:collapse;margin:1.4rem 0 1.8rem;font-size:.95rem}
.cam-tableau th,.cam-tableau td{text-align:left;padding:10px 14px;vertical-align:top;
	border-bottom:2px dashed rgba(27,21,64,.18)}
.cam-tableau thead th{font-family:'Fredoka','Nunito',sans-serif;font-size:.8rem;
	text-transform:uppercase;letter-spacing:.06em;color:var(--doux);
	border-bottom:3px solid var(--encre)}
@media (max-width:640px){
	.cam-tableau thead{display:none}
	.cam-tableau,.cam-tableau tbody,.cam-tableau tr,.cam-tableau td{display:block;width:auto}
	.cam-tableau tr{padding:12px 0;border-bottom:2px dashed rgba(27,21,64,.18)}
	.cam-tableau td{border:0;padding:2px 14px}
	/* Sans en-tête visible, chaque cellule porte son intitulé. */
	.cam-tableau td::before{content:attr(data-titre) " ";font-weight:700;color:var(--doux)}
}

/* Les fiches en tableau : une ligne par fiche, sa description, et les deux
   liens (la fiche, son corrigé). C'est la disposition retenue - elle décrit
   chaque fiche, ce qu'une liste de pastilles ne permet pas. */
.cam-fiches-table{
	width:100%;max-width:940px;margin:1.6rem auto 0;
	border-collapse:collapse;font-size:.94rem;
}
.cam-fiches-table th,.cam-fiches-table td{
	text-align:left;padding:11px 14px;
	border-bottom:2px dashed rgba(27,21,64,.18);
	vertical-align:middle;
}
.cam-fiches-table thead th{
	font-family:'Fredoka','Nunito',sans-serif;font-size:.8rem;
	text-transform:uppercase;letter-spacing:.06em;color:var(--doux);
	border-bottom:3px solid var(--encre);
}
.cam-fiches-tete th{
	font-family:'Fredoka','Nunito',sans-serif;font-size:1.05rem;color:var(--encre);
	background:var(--creme);border-bottom:2px solid var(--encre);
	text-transform:none;letter-spacing:0;
}
.cam .cam-fiches-table td b{font-weight:700}
.cam-fiche-quoi{color:var(--doux)}
.cam-fiche-dl{
	display:inline-block;margin-right:12px;font-weight:700;
	color:var(--violet-fonce);text-decoration:none;
	border-bottom:2px solid var(--jaune);
}
.cam-fiche-dl:hover{color:var(--encre)}
.cam-fiche-dl--doux{color:var(--doux);border-bottom-color:rgba(27,21,64,.2)}
.cam-sans-corrige{color:var(--doux);font-size:.86rem}

/* Sur téléphone, chaque ligne devient un bloc. Une <table> qu'on passe en
   blocs perd sa sémantique pour les lecteurs d'écran : les rôles sont donc
   remis explicitement. */
/* Le passage en blocs se fait à 820 px, pas à 680 : entre les deux, les trois
   colonnes tiennent encore mais « La fiche » et « Le corrigé » se replient
   l'un sous l'autre et la description est écrasée.

   En blocs, le tableau reçoit un VRAI cadre. Sans lui, il restait des traits
   horizontaux sans bordure verticale à droite : un cadre à moitié dessiné,
   qui se lit comme un tableau coupé. */
@media (max-width:820px){
	.cam-fiches-table thead{display:none}
	.cam-fiches-table,.cam-fiches-table tbody,
	.cam-fiches-table tr,.cam-fiches-table td,.cam-fiches-table th{display:block;width:auto}
	.cam-fiches-table{
		background:#fff;
		border:var(--trait) solid var(--encre);
		border-radius:18px;
		box-shadow:5px 5px 0 var(--encre);
		padding:6px 14px 10px;
	}
	.cam-fiches-table tr{padding:12px 0;border-bottom:2px dashed rgba(27,21,64,.18)}
	.cam-fiches-table tr:last-child{border-bottom:0}
	.cam-fiches-table td{border:0;padding:3px 0}
	/* Le bandeau de groupe déborde du padding pour toucher les deux bords du
	   cadre : c'est ce qui le fait lire comme un intercalaire. */
	.cam-fiches-tete th{
		background:var(--creme);
		border:0;border-top:2px solid var(--encre);border-bottom:2px solid var(--encre);
		margin:10px -14px 4px;padding:9px 14px;
	}
	.cam-fiches-table tr.cam-fiches-tete{padding:0;border-bottom:0}
	.cam-fiches-table tr.cam-fiches-tete:first-child th{border-top:0;margin-top:0}
	/* La dernière ligne d'un groupe garde son pointillé juste au-dessus du
	   bandeau suivant : deux traits collés. Le navigateur qui ne connaît pas
	   :has() affiche simplement les deux, ce n'est pas une régression. */
	.cam-fiches-table tr:has(+ .cam-fiches-tete){border-bottom:0}
}

/* Les fiches, groupées : une ligne par thème, les fiches en pastilles.
   Une ligne par FICHE donnait dix-sept lignes empilées - la section faisait
   à elle seule un écran et demi, et repoussait tout le reste de la page. */
.cam-fiches-groupes{max-width:920px;margin:1.6rem auto 0}
.cam-fiches-groupe{
	display:grid;grid-template-columns:minmax(150px,230px) 1fr;
	gap:10px 24px;align-items:center;
	padding:15px 0;border-bottom:2px dashed rgba(27,21,64,.2);
}
.cam .cam-fiches-quoi b{display:block;font-family:'Fredoka','Nunito',sans-serif;font-size:1.08rem}
.cam .cam-fiches-quoi span{font-size:.86rem;color:var(--doux)}
.cam-fiches-liens{display:flex;flex-wrap:wrap;gap:8px}
.cam-fiches-liens a{
	border:2px solid var(--encre);border-radius:999px;
	padding:6px 14px;font-size:.85rem;font-weight:700;
	color:var(--encre);text-decoration:none;background:#fff;
	transition:background .15s,color .15s;
}
.cam-fiches-liens a:hover{background:var(--violet);color:#fff;border-color:var(--violet)}
@media (max-width:640px){
	.cam-fiches-groupe{grid-template-columns:1fr}
}

/* Les fiches en liste : plus rapide à parcourir qu'une rangée de cartes, et
   ça tient quand il y en a douze. */
.cam-fiches-liste{max-width:900px;margin:1.6rem auto 0}
.cam-fiche-pdf{
	display:flex;align-items:center;gap:16px;
	padding:14px 0;border-bottom:2px dashed rgba(27,21,64,.2);
	text-decoration:none;
}
.cam-fiche-pdf i{
	flex:none;width:46px;height:46px;border-radius:50%;
	background:var(--violet);color:#fff;
	display:grid;place-content:center;
	font-style:normal;font-family:'Fredoka','Nunito',sans-serif;font-size:.72rem;
}
.cam-fiche-pdf .cam-fiche-nom{display:block;min-width:0}
/* Les enfants du lien restent des éléments EN LIGNE : wpautop coupe un
   <a> qui contient un <div> et fabrique des <p> au milieu du lien. */
.cam-fiches-liste h3{margin:1.8rem 0 .2rem;font-size:1.05rem}
.cam-fiches-liste h3:first-child{margin-top:0}
.cam .cam-fiche-pdf b{display:block;font-family:'Fredoka','Nunito',sans-serif;font-size:1.05rem;color:var(--encre)}
.cam .cam-fiche-pdf span{font-size:.88rem;color:var(--doux)}
.cam .cam-fiche-pdf strong{margin-left:auto;font-size:.85rem;color:var(--violet-fonce);white-space:nowrap}

/* Les attendus de juin : des numéros en marge, aucun cadre. */
.cam-attendus{max-width:780px;margin:1.6rem auto 0}
.cam-attendus > div{display:grid;grid-template-columns:64px 1fr;gap:18px;padding:16px 0;align-items:start}
.cam-attendus > div + div{border-top:2px dashed rgba(27,21,64,.18)}
.cam-attendus em{
	font-style:normal;font-family:'Fredoka','Nunito',sans-serif;font-size:2.4rem;
	color:var(--jaune);line-height:.9;-webkit-text-stroke:2px var(--encre);
}
.cam .cam-attendus b{display:block;font-size:1.02rem}
.cam .cam-attendus p{margin:.2rem 0 0;color:var(--doux);font-size:.93rem}

/* L'objectif de l'année : trois pense-bêtes punaisés, un par attendu.
   Chacun porte la question à poser et ce qu'il faut observer - un attendu
   officiel ne dit pas au parent quoi faire, la question si. */
.cam-pensebetes{
	display:grid;grid-template-columns:repeat(3,1fr);
	gap:34px;max-width:1060px;margin:2rem auto 0;
}
.cam-pensebete{
	position:relative;
	padding:34px 28px 28px;
	text-align:center;
	border:2px solid rgba(27,21,64,.18);
	box-shadow:4px 7px 16px rgba(27,21,64,.16);
}
.cam-pensebete:nth-child(1){background:#fff3c4;transform:rotate(-1.6deg)}
.cam-pensebete:nth-child(2){background:#e9e3ff;transform:rotate(1.1deg)}
.cam-pensebete:nth-child(3){background:#dcecff;transform:rotate(-.7deg)}
.cam-punaise{
	position:absolute;top:-10px;left:50%;
	width:20px;height:20px;transform:translateX(-50%);
	border-radius:50%;background:var(--violet);
	border:2px solid var(--encre);
	box-shadow:0 3px 0 rgba(27,21,64,.25);
}
.cam .cam-pensebete b{
	display:block;font-family:'Fredoka','Nunito',sans-serif;
	font-size:1.06rem;line-height:1.25;margin-bottom:.9rem;
}
.cam .cam-pensebete .cam-note-q{margin:0 0 .7rem;font-size:1rem;font-weight:700;line-height:1.5}
.cam .cam-pensebete .cam-note-r{margin:0;font-size:.92rem;color:var(--doux);line-height:1.6}

@media (max-width:860px){
	.cam-pensebetes{grid-template-columns:1fr;gap:30px;max-width:520px}
}

/* Un domaine à l'intérieur de sa discipline : « Orthographe / grammaire »
   sous « Français ». Le retrait dit la subordination sans ajouter de cadre. */
.cam .cam-domaine-titre{
	margin:1.1rem 0 .3rem;
	font-family:'Fredoka','Nunito',sans-serif;
	font-size:.95rem;
	color:var(--encre);
	padding-top:.7rem;
	border-top:2px dashed rgba(27,21,64,.16);
}
.cam-domaine-titre--premier{margin-top:.2rem;padding-top:0;border-top:0}
.cam-domaine-titre a{color:inherit;text-decoration:none}
.cam-domaine-titre a:hover{color:var(--violet-fonce)}

/* La phrase de retour vers la matière, en fin de leçon : elle referme la page
   et renvoie au sommaire, sans être un bloc de navigation de plus. */
.cam .cam-retour-matiere{
	margin:2rem 0 0;
	padding-top:1.1rem;
	border-top:2px dashed rgba(27,21,64,.18);
	color:var(--doux);
	font-size:.96rem;
}

/* Comment réviser : quatre cartes à minuteur. La promesse du bloc, ce sont dix
   minutes par jour - autant l'afficher sur un cadran plutôt que de l'écrire. */
.cam-minuteurs{
	display:grid;grid-template-columns:repeat(2,1fr);
	gap:22px;max-width:980px;margin:2rem auto 0;
}
.cam-minuteur{
	display:grid;grid-template-columns:118px 1fr;
	background:#fff;
	border:var(--trait) solid var(--encre);
	border-radius:18px;
	overflow:hidden;
	box-shadow:5px 5px 0 var(--encre);
}
.cam-cadran{
	display:grid;place-items:center;gap:4px;padding:16px 0;
	border-right:var(--trait) solid var(--encre);
}
.cam-cadran span{font-family:'Fredoka','Nunito',sans-serif;font-size:.82rem}
.cam-minuteur-texte{padding:16px 18px}
.cam-minuteur-texte .cam-moment{float:right;margin:-2px -4px 0 10px;line-height:0}
.cam .cam-minuteur-texte b{display:block;font-family:'Fredoka','Nunito',sans-serif;font-size:1.05rem}
.cam .cam-minuteur-texte p{margin:3px 0 0;font-size:.92rem;line-height:1.5}

/* Sur téléphone, le cadran passe au-dessus du texte plutôt qu'à côté : une
   colonne de 118 px sur 320 px d'écran ne laisse rien au conseil. */
@media (max-width:860px){
	.cam-minuteurs{grid-template-columns:1fr;max-width:520px}
}
@media (max-width:460px){
	.cam-minuteur{grid-template-columns:1fr}
	.cam-cadran{
		grid-template-columns:auto auto;justify-content:center;gap:12px;
		padding:12px 0;border-right:0;border-bottom:var(--trait) solid var(--encre);
	}
	.cam-cadran svg{width:40px;height:40px}
}

/* Le programme : une carte par domaine officiel, chacune avec sa couleur et
   son dessin. Le numéro « 1 sur 4 » situe la carte dans l'ensemble : une
   matière qui n'a que deux domaines le dit ainsi, sans case vide. */
/* Le nombre de domaines varie d'une matière à l'autre : trois en maths, cinq
   en français, quatre en sciences. Une grille laisserait le reste de la
   division seul et collé à gauche (mesuré : la cinquième carte du français).
   Un flex centré referme proprement toute dernière ligne incomplète. */
.cam-domaines{
	display:flex;flex-wrap:wrap;justify-content:center;
	gap:20px;max-width:1100px;margin:2rem auto 0;
}
/* Cinq domaines (le français) : à quatre par ligne, le cinquième reste seul.
   On resserre le conteneur pour obtenir 3 + 2, plus équilibré. Le sélecteur
   compte les cartes : rien à écrire dans le contenu. */
.cam-domaines:has(> :nth-child(5)):not(:has(> :nth-child(7))){max-width:830px}
.cam-domaine{
	flex:1 1 210px;max-width:260px;
	background:#fff;
	border:var(--trait) solid var(--encre);
	border-radius:18px;
	box-shadow:6px 6px 0 var(--encre);
	overflow:hidden;
	display:flex;flex-direction:column;
}
@media (max-width:560px){.cam-domaine{flex-basis:100%;max-width:none}}
.cam-domaine-bandeau{padding:7px 14px}
.cam-domaine-bandeau span{
	font-family:'Fredoka','Nunito',sans-serif;font-size:.76rem;
	text-transform:uppercase;letter-spacing:.09em;color:#fff;
}
.cam-domaine-vitre{
	display:grid;place-content:center;padding:18px 0;
	border-bottom:var(--trait) solid var(--encre);
	line-height:0;
}
.cam-domaine-pied{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.cam .cam-domaine-pied b{display:block;font-family:'Fredoka','Nunito',sans-serif;font-size:1rem;line-height:1.2}
.cam .cam-domaine-pied em{display:block;font-style:normal;font-size:.85rem;color:var(--doux);margin-top:3px}
.cam-domaine-liens{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:12px}
.cam-domaine-liens a{
	background:#fff;border:2px solid var(--encre);border-radius:999px;
	padding:5px 12px;font-size:.8rem;font-weight:700;
	color:var(--encre);text-decoration:none;
}
.cam-domaine-liens a:hover{background:var(--encre);color:#fff}
/* Une notion pas encore publiée garde sa pastille, en creux : la liste reste
   lisible et l'on voit ce qui arrive. */
.cam-domaine-liens .cam-lien-a-venir{
	background:transparent;border:2px dashed rgba(27,21,54,.35);border-radius:999px;
	padding:5px 12px;font-size:.8rem;font-weight:700;color:var(--doux);
}

/* Quatre cartes serrées sur une ligne deviennent illisibles dès qu'un titre
   s'allonge : deux colonnes avant d'en arriver là. */
@media (max-width:1080px){.cam-domaines{grid-template-columns:repeat(2,1fr);max-width:760px}}
@media (max-width:620px){.cam-domaines{grid-template-columns:1fr;max-width:420px}}

/* Ce qui coince : l'erreur telle qu'elle apparaît dans le cahier, barrée, avec
   la bonne réponse à côté. Une erreur d'enfant se montre - décrite, elle ne
   parle pas ; dessinée, un parent la reconnaît au premier coup d'œil. */
.cam-cahiers{
	display:grid;grid-template-columns:repeat(3,1fr);
	gap:26px;max-width:1080px;margin:2rem auto 0;
}
.cam-cahier{
	background:#fff;
	border:var(--trait) solid var(--encre);
	border-radius:6px 18px 18px 6px;
	box-shadow:6px 6px 0 var(--encre);
	padding:0 0 22px;
	overflow:hidden;
}
.cam-cahier-page{
	display:flex;align-items:center;justify-content:center;gap:22px;
	padding:22px 16px 20px;
	background-image:repeating-linear-gradient(180deg,transparent 0 25px,rgba(91,70,240,.16) 25px 27px);
}
.cam-faux,.cam-juste{font-family:'Caveat','Nunito',cursive;font-size:2.6rem;line-height:1}
/* La rature est dessinée plutôt qu'écrite : `line-through` donne un trait
   horizontal parfait, qui ne ressemble pas à une correction d'enfant.
   Elle est peinte en FOND, pas en pseudo-élément débordant : un ::after qui
   dépasse de la boîte fait croire à un texte tronqué à tout contrôle qui
   compare scrollWidth et clientWidth. */
.cam-faux{
	color:#d33a4f;
	padding:0 8px;
	background-image:linear-gradient(-7deg,
		transparent calc(50% - 2px), #d33a4f calc(50% - 2px),
		#d33a4f calc(50% + 1px), transparent calc(50% + 1px));
}
.cam-juste{color:var(--encre)}
.cam-juste::before{content:"→ ";font-family:'Nunito',sans-serif;font-size:1.1rem;color:var(--doux)}
.cam .cam-cahier b{display:block;font-family:'Fredoka','Nunito',sans-serif;font-size:1rem;
	padding:0 22px;margin-bottom:6px}
.cam .cam-cahier p{margin:0;padding:0 22px;font-size:.92rem;color:var(--doux);line-height:1.55}
.cam .cam-cahier .cam-aide{margin:.9rem 0 0;color:var(--encre);font-size:.9rem}
.cam-aide span{display:block;font-family:'Fredoka','Nunito',sans-serif;font-size:.72rem;
	text-transform:uppercase;letter-spacing:.08em;color:var(--violet);margin-bottom:2px}

@media (max-width:900px){
	.cam-cahiers{grid-template-columns:1fr;max-width:520px}
}
/* L'erreur et sa correction doivent tenir sur UNE ligne : coupée en deux, la
   rature ne barre plus que le début et le dessin ne veut plus rien dire.
   La taille est FLUIDE et non fixée : à 1,9rem, un libellé de treize
   caractères en Caveat dépassait encore de 18 px à 320 px. Raccourcir les
   libellés au cas par cas ne règle rien pour le niveau suivant ; c'est la
   taille qui doit suivre la largeur. */
@media (max-width:520px){
	.cam-cahier-page{gap:14px}
	.cam-faux,.cam-juste{font-size:min(1.9rem,6.6vw);white-space:nowrap}
}

/* Ce qui coince : des phrases de parents, donc des bulles. */
.cam-bulles{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:1100px;margin:1.6rem auto 0}
.cam-bulle{
	position:relative;background:#fff;
	border:var(--trait) solid var(--encre);
	border-radius:26px 26px 26px 6px;
	padding:20px 20px 18px;
}
.cam-bulle::after{
	content:"";position:absolute;left:16px;bottom:-16px;width:0;height:0;
	border:9px solid transparent;border-top-color:var(--encre);border-right-width:16px;
}
.cam .cam-bulle b{display:block;font-family:'Fredoka','Nunito',sans-serif;font-size:1.02rem;margin-bottom:5px}
.cam .cam-bulle p{margin:0;color:var(--doux);font-size:.92rem;line-height:1.55}
.cam .cam-bulle-suite{margin:1.8rem 0 0 20px;font-size:.88rem;color:var(--doux)}

/* La liste des notions, en deux colonnes sans cadre. */
.cam-colonnes{columns:2;column-gap:34px;max-width:1000px;margin:1.4rem auto 0}
.cam-colonnes a{
	display:block;padding:10px 0;
	border-bottom:2px dashed rgba(27,21,64,.18);
	font-weight:700;color:var(--encre);text-decoration:none;
	break-inside:avoid;
}
.cam-colonnes a span{display:block;font-weight:600;color:var(--doux);font-size:.86rem;margin-top:2px}
.cam-colonnes a:hover{color:var(--violet-fonce)}

@media (max-width:900px){
	.cam-hero-grille--matiere{grid-template-columns:1fr}
	/* Sur téléphone, la mascotte passerait entre le texte et les chiffres :
	   elle s'efface plutôt que d'allonger le bandeau d'un écran. */
	.cam-matiere-mascotte{display:none}
	.cam-chemin-annee ol{grid-template-columns:1fr 1fr}
	.cam-chemin-annee svg{display:none}
	.cam-bulles{grid-template-columns:1fr}
	.cam-colonnes{columns:1}
}
@media (max-width:520px){
	.cam-chemin-annee ol{grid-template-columns:1fr}
	.cam-attendus > div{grid-template-columns:46px 1fr;gap:12px}
	.cam-fiche-pdf{flex-wrap:wrap}
	.cam .cam-fiche-pdf strong{margin-left:62px}
}

/* Le raccourci vers les fiches, dans le bandeau d'une page de notion : ce que
   le visiteur vient chercher est souvent à trois écrans plus bas. */
.cam-raccourci-fiches{margin:1.1rem 0 0}
.cam-raccourci-fiches a{
	display:inline-flex;align-items:center;gap:10px;
	padding:11px 18px;
	background:#fff;color:var(--encre);
	border:var(--trait) solid var(--encre);
	border-radius:999px;
	box-shadow:4px 4px 0 var(--encre);
	font-family:'Fredoka','Nunito',sans-serif;font-size:.98rem;
	text-decoration:none;
}
.cam-raccourci-fiches a:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--encre)}
.cam-raccourci-fiches span{color:var(--violet);font-size:1.1rem;line-height:1}
/* Le raccourci destiné à l'enseignant porte un libellé long : sur téléphone,
   il sortait du cadre. Il se replie sur deux lignes plutôt que d'être coupé,
   et sa taille suit la largeur - un libellé d'un seul tenant ne se replie
   jamais tout seul. */
.cam-raccourci-prof a{
	max-width:100%;text-align:left;
	font-size:clamp(.82rem,3.4vw,.98rem);
	padding:10px 16px;
}
@media (max-width:600px){
	.cam-raccourci-prof a{display:flex}
}

/* Le détail des exercices d'une fiche : ce que le visiteur venu chercher
   « exercice X » doit lire avant de télécharger. */
.cam .cam-exos{list-style:none;margin:.9rem 0 0;padding:0}
.cam .cam-exos li{
	position:relative;padding:0 0 0 26px;margin:0 0 .55rem;
	font-size:.97rem;line-height:1.55;
}
.cam .cam-exos li::before{
	content:"";position:absolute;left:0;top:.45em;
	width:11px;height:11px;border-radius:3px;
	background:var(--jaune);border:2px solid var(--encre);
}
.cam .cam-exos-note{
	margin:1rem 0 0;padding:.9rem 1.1rem;
	background:var(--creme);
	border-left:4px solid var(--violet);
	border-radius:0 10px 10px 0;
	font-size:.94rem;color:var(--doux);
}

/* --- Bannière produit dans les leçons ---------------------------------- */

/* Posée au milieu du texte par inc/banniere.php. Elle reprend la bordure et
   l'ombre portée des cartes du site : sans elles, un bloc sombre au radius
   doux au milieu d'une page cernée de noir se lit comme une publicité
   étrangère collée sur la page. */
.cam-promo{
	position:relative;
	display:grid;
	grid-template-columns:minmax(0,1fr) 250px;
	gap:clamp(18px,3vw,30px);
	align-items:center;
	margin:clamp(34px,5vw,52px) 0;
	padding:clamp(24px,3.4vw,34px);
	background:var(--nuit);
	border:var(--trait) solid var(--encre);
	border-radius:26px;
	box-shadow:5px 5px 0 var(--encre);
	overflow:hidden;
	color:#fff;
}
.cam-promo::before{
	content:"";
	position:absolute;inset:0;
	background:radial-gradient(105% 130% at 6% 4%,#4a37c9 0%,transparent 60%);
}
.cam-promo > *{position:relative}

.cam .cam-prose .cam-promo-pastille{
	display:inline-block;
	font-family:'Fredoka',sans-serif;
	font-size:.74rem;font-weight:600;
	letter-spacing:.08em;text-transform:uppercase;
	background:var(--jaune);color:var(--encre);
	padding:5px 13px;border-radius:999px;
	margin-bottom:12px;
}
.cam .cam-prose .cam-promo-titre{
	font-family:'Fredoka',sans-serif;
	font-size:clamp(1.18rem,2.1vw,1.5rem);
	font-weight:600;line-height:1.15;
	color:#fff;
	margin:0 0 10px;
}
.cam .cam-prose .cam-promo-titre em{font-style:normal;color:var(--jaune)}
.cam .cam-prose .cam-promo-corps{
	font-size:clamp(.95rem,1.4vw,1rem);
	line-height:1.6;color:#cfc9f5;
	margin:0 0 18px;max-width:46ch;
}
.cam-promo-action{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cam-prose .cam-promo-cta{
	display:inline-flex;align-items:center;gap:9px;
	background:var(--jaune);color:var(--encre);
	font-family:'Fredoka',sans-serif;font-size:1rem;font-weight:600;
	white-space:nowrap;text-decoration:none;
	padding:13px 24px;border-radius:14px;
	border:var(--trait) solid var(--encre);
	box-shadow:3px 3px 0 var(--encre);
	transition:transform .12s ease,box-shadow .12s ease;
}
.cam-prose .cam-promo-cta:hover,
.cam-prose .cam-promo-cta:focus-visible{
	transform:translate(-2px,-2px);
	box-shadow:5px 5px 0 var(--encre);
	color:var(--encre);
}
.cam .cam-prose .cam-promo-offre{
	font-size:.85rem;line-height:1.32;color:#cfc9f5;
	padding-left:16px;border-left:2px solid rgba(255,200,61,.5);
}
.cam .cam-prose .cam-promo-offre strong{color:var(--jaune);font-weight:700}

/* L'écran est recadré en CSS : la capture entière mettrait le téléphone
   debout dans une bannière large et écraserait le texte. */
.cam-promo-ecran{
	aspect-ratio:900/1440;overflow:hidden;border-radius:16px 16px 0 0;
	-webkit-mask-image:linear-gradient(#000 78%,transparent 100%);
	mask-image:linear-gradient(#000 78%,transparent 100%);
}
.cam-prose .cam-promo-img{
	display:block;width:100%;height:100%;
	object-fit:cover;object-position:top center;
	filter:drop-shadow(0 16px 26px rgba(0,0,0,.45));
	margin:0;
}

@media (max-width:720px){
	.cam-promo{grid-template-columns:1fr;text-align:left;padding:clamp(18px,3.4vw,34px)}
	.cam-promo-ecran{max-width:200px;margin:0 auto;aspect-ratio:900/980}
	/* Le bouton en ligne déborde de la bannière sous 360 px : « Découvrir
	   Caméléo » ne tient pas dans 152 px, et l'overflow de la carte le coupait
	   en deux. Pleine largeur, et le retour à la ligne autorisé en dernier
	   recours plutôt qu'un texte tronqué. */
	.cam-promo-action{gap:14px;flex-direction:column;align-items:stretch}
	.cam .cam-prose .cam-promo-cta{
		width:100%;justify-content:center;text-align:center;
		white-space:normal;font-size:.95rem;padding:13px 14px;
	}
	.cam .cam-prose .cam-promo-offre{padding-left:0;border-left:0;border-top:2px solid rgba(255,200,61,.5);padding-top:10px}
}

/* Sous 400 px, « Découvrir Caméléo → » passe sur deux lignes et la flèche se
   retrouve seule au bout de la seconde. La flèche est décorative : elle part,
   le libellé tient. */
@media (max-width:400px){
	.cam .cam-prose .cam-promo-cta{font-size:.92rem;gap:0}
	.cam .cam-prose .cam-promo-cta span{display:none}
}

/* --- Sous-menu du menu principal --------------------------------------- */

/* Le déroulant « Faire réviser mon enfant » (composé par inc/menu.php) sortait
   nu : GeneratePress ne pose ni fond ni bordure, et sur l'en-tête sombre du
   site le libellé était à peine lisible. On lui donne la carte du site -
   fond crème, bordure encre, ombre dure. */
.main-navigation ul ul.sub-menu{
	width:auto;min-width:190px;
	background:var(--creme);
	border:var(--trait) solid var(--encre);
	border-radius:16px;
	box-shadow:4px 4px 0 var(--encre);
	padding:6px;
	margin-top:6px;
}
.main-navigation ul ul.sub-menu li{border:0}
.main-navigation ul ul.sub-menu a{
	color:var(--encre);
	font-family:'Fredoka',sans-serif;
	line-height:1.2;
	padding:10px 14px;
	border-radius:10px;
}
.main-navigation ul ul.sub-menu a:hover,
.main-navigation ul ul.sub-menu a:focus-visible,
.main-navigation ul ul.sub-menu .current-menu-item > a{
	background:var(--violet);
	color:#fff;
}

/* En mode tiroir (téléphone), le sous-menu se déplie dans la colonne : la
   carte flottante n'a plus de sens et l'ombre dure déborde du tiroir. */
.main-navigation.toggled ul ul.sub-menu{
	width:100%;
	border:0;border-left:var(--trait) solid var(--jaune);
	border-radius:0;box-shadow:none;
	background:transparent;
	/* Décalage par le PADDING, pas par la marge : une marge gauche ne réduit
	   pas la largeur du bloc, et le sous-menu sortait du tiroir - la flèche
	   d'ouverture se retrouvait à x 413-469 dans une fenêtre de 420 px, donc
	   invisible au doigt. Mesuré, pas supposé. */
	margin:0 0 4px;padding:0 0 0 14px;
}
/* `inherit` remontait à la couleur de texte par défaut de la nav, sombre :
   sur le tiroir en fond nuit, « CP » était invisible. */
.main-navigation.toggled ul ul.sub-menu a{color:var(--creme);padding-left:14px}
.main-navigation.toggled ul ul.sub-menu a:hover,
.main-navigation.toggled ul ul.sub-menu a:focus-visible{background:var(--violet);color:#fff}

/* --- Le panneau des classes (ordinateur) -------------------------------- */

/* Le déroulant « Faire réviser mon enfant » porte maintenant trois étages :
   le parent, les niveaux, leurs matières. Sur ordinateur, on ne fait pas de
   second survol - le panneau montre tout d'un coup, une colonne par niveau.
   Deux survols enchainés obligent à traverser une bande sans en sortir, et
   c'est le motif qui rate le plus au pointage.

   Le nombre de colonnes suit le nombre de niveaux publiés : la classe
   `cam-menu-panneau--N` est posée par inc/menu.php. Aucune valeur n'est
   écrite en dur, publier un niveau ajoute sa colonne. */
/* Le panneau s'ancre sur la NAVIGATION, pas sur son entrée de menu : à cinq
   colonnes il fait plus de 900 px, et posé sous « Faire réviser mon enfant »
   il sortait de l'écran par la droite - la colonne du CM2 était coupée.
   Mesuré à 1440 px, avant correction. */
/* L'ancre du panneau est `.inside-header`, qui contient le logo ET la
   navigation : c'est lui qui donne la largeur du contenu du site. Ancré sur
   `.inside-navigation` (à droite du logo), le panneau commençait au milieu de
   la page au lieu du bord gauche, comme sur la maquette. */
.site-header .inside-header{position:relative}
.main-navigation:not(.toggled) .inside-navigation{position:static}
.main-navigation:not(.toggled) ul li.cam-menu-panneau{position:static}
.main-navigation:not(.toggled) ul li.cam-menu-panneau > ul.sub-menu{
	display:grid;
	grid-template-columns:repeat(var(--cam-colonnes,1),minmax(0,1fr));
	gap:2px 15px;
	padding:20px 24px 22px;
	width:auto;min-width:0;
	max-width:100%;
	/* Le panneau reprend la maquette : fond blanc, ombre douce, pas la carte
	   crème à bordure du reste du site. À cinq colonnes, cette carte-là
	   écrasait la lecture. */
	background:#fff;
	border:0;
	border-radius:0 0 18px 18px;
	box-shadow:0 16px 34px rgba(27,21,64,.16);
	margin-top:0;
}
.main-navigation:not(.toggled) ul li.cam-menu-panneau.sfHover > ul.sub-menu,
.main-navigation:not(.toggled) ul li.cam-menu-panneau:hover > ul.sub-menu{
	left:auto;right:0;
}
/* Un seul niveau publié : la carte reste étroite et se pose sous son entrée,
   comme un déroulant ordinaire. Elle ne s'étale que lorsqu'il y a de quoi. */
.main-navigation:not(.toggled) ul li.cam-menu-panneau--1 > ul.sub-menu,
.main-navigation:not(.toggled) ul li.cam-menu-panneau--2 > ul.sub-menu{
	right:auto;
}
.main-navigation:not(.toggled) ul li.cam-menu-panneau--1{position:relative}
.main-navigation:not(.toggled) ul li.cam-menu-panneau--2{position:relative}
.main-navigation ul li.cam-menu-panneau--1 > ul.sub-menu{--cam-colonnes:1}
.main-navigation ul li.cam-menu-panneau--2 > ul.sub-menu{--cam-colonnes:2}
.main-navigation ul li.cam-menu-panneau--3 > ul.sub-menu{--cam-colonnes:3}
.main-navigation ul li.cam-menu-panneau--4 > ul.sub-menu{--cam-colonnes:4}
.main-navigation ul li.cam-menu-panneau--5 > ul.sub-menu{--cam-colonnes:5}
.main-navigation ul li.cam-menu-panneau--6 > ul.sub-menu{--cam-colonnes:6}

/* Chaque colonne : le niveau en titre, ses matières dessous. Le troisième
   étage est sorti du flottant de GeneratePress (qui le cache à
   `left:-99999px`) et affiché à plat dans la colonne. */
.main-navigation:not(.toggled) ul li.cam-menu-panneau > ul.sub-menu > li{
	width:auto;
}
.main-navigation:not(.toggled) ul li.cam-menu-panneau > ul.sub-menu > li > a{
	/* Une CARTE par niveau. Le menu ne déplie plus les matières (9 octobre
	   2026) : le titre n'est plus un en-tête de colonne, c'est la cible du
	   clic, et il lui faut une surface pour se cliquer au doigt comme à la
	   souris. */
	display:block;
	text-align:center;
	font-size:1.12rem;
	color:var(--violet-fonce,#3b2bb5);
	padding:14px 10px 12px;
	line-height:1.2;
	background:#fff;
	border:1px solid #eceaf6;
	border-radius:12px;
}
/* Le survol d'un niveau héritait du pavé violet plein du sous-menu : sur un
   titre de colonne, ça faisait une grosse tache. On garde le fond du panneau
   et on ne change que la couleur, avec un soulignement.
   La classe `cam-survol` n'est jamais posée en production : elle permet de
   photographier l'état de survol, que le navigateur sans souris ne sait pas
   déclencher. */
.main-navigation:not(.toggled) ul li.cam-menu-panneau > ul.sub-menu > li > a:hover,
.main-navigation:not(.toggled) ul li.cam-menu-panneau > ul.sub-menu > li > a:focus-visible,
.main-navigation:not(.toggled) ul li.cam-menu-panneau > ul.sub-menu > li > a.cam-survol{
	background:var(--violet-clair,#ece8ff);
	border-color:var(--violet,#5b46f0);
	color:var(--violet-fonce,#3b2bb5);
}
/* Le soulignement porte sur le NOM seul, pas sur le lien entier : sinon il
   traverse aussi le compteur. */
/* Pas de soulignement : la carte entière change de fond et de bordure, c'est
   un signal plus lisible qu'un trait sous deux lettres. */
.main-navigation:not(.toggled) .cam-menu-nom{
	display:block;
	font-family:'Fredoka',sans-serif;
	font-weight:600;
}
/* Le compteur, sous le nom du niveau : il se calcule dans inc/menu.php. */
.main-navigation:not(.toggled) .cam-menu-compte{
	display:block;
	font-family:'Nunito',system-ui,sans-serif;
	font-size:.72rem;
	font-weight:600;
	color:#8a84b5;
	margin-top:1px;
}
.main-navigation.toggled .cam-menu-compte{display:none}
.main-navigation:not(.toggled) ul li.cam-menu-panneau li.cam-menu-classe > ul.sub-menu{
	position:static;
	left:auto;right:auto;
	width:auto;min-width:0;
	opacity:1;visibility:visible;height:auto;
	background:transparent;
	border:0;border-radius:0;box-shadow:none;
	margin:0;padding:0 0 8px;
	display:block;
	pointer-events:auto;
	transform:none;
	transition:none;
}
.main-navigation:not(.toggled) ul li.cam-menu-panneau li.cam-menu-matiere > a{
	font-family:'Nunito',system-ui,sans-serif;
	font-size:.9rem;
	padding:7px 0;
	color:var(--encre);
	border-bottom:1px solid #f1eefc;
	border-radius:0;
}
.main-navigation:not(.toggled) ul li.cam-menu-panneau li.cam-menu-matiere:last-child > a{
	border-bottom:0;
}
.main-navigation:not(.toggled) ul li.cam-menu-panneau li.cam-menu-matiere > a:hover,
.main-navigation:not(.toggled) ul li.cam-menu-panneau li.cam-menu-matiere > a:focus-visible,
.main-navigation:not(.toggled) ul li.cam-menu-panneau li.cam-menu-matiere > a.cam-survol{
	background:transparent;
	color:var(--violet);
	text-decoration:underline;
	text-underline-offset:3px;
}
/* Le panneau occupe la largeur du contenu du site, comme dans la maquette :
   il commence au bord gauche du conteneur, pas sous son entrée de menu. */
/* Le panneau ne prend plus toute la largeur du contenu : il est calé à
   droite, sous les entrées de menu, et sa largeur suit le nombre de colonnes.
   Le `min()` évite qu'il déborde sur un écran étroit. */
.main-navigation:not(.toggled) ul li.cam-menu-panneau.sfHover > ul.sub-menu,
.main-navigation:not(.toggled) ul li.cam-menu-panneau:hover > ul.sub-menu{
	left:auto;right:30px;
	/* La largeur suit le nombre de colonnes, en tenant compte des gouttières
	   et du rembourrage : en dessous, « Orthographe / grammaire » repasse sur
	   deux lignes. Mesuré. */
	/* 126 px par carte suffisent : « CM1 » et « 9 matières » tiennent sur une
	   ligne chacun. C'était 185 px quand la colonne portait aussi les noms de
	   matières, dont « Orthographe / grammaire ». */
	width:min(calc(var(--cam-colonnes,1) * 126px + 40px), calc(100% - 60px));
}
/* Entre le point de rupture du menu et 1040 px, six cartes sur une ligne
   tombent sous 110 px et « 9 matières » se coupe. Deux rangées de trois
   tiennent, et la grille le fait toute seule - rien à écrire par niveau. */
@media (max-width:1040px){
	.main-navigation:not(.toggled) ul li.cam-menu-panneau > ul.sub-menu{
		grid-template-columns:repeat(3,minmax(0,1fr));
	}
	.main-navigation:not(.toggled) ul li.cam-menu-panneau.sfHover > ul.sub-menu,
	.main-navigation:not(.toggled) ul li.cam-menu-panneau:hover > ul.sub-menu{
		width:min(420px, calc(100% - 40px));
	}
}

/* La flèche du niveau n'a pas de sens dans le panneau : tout est déjà
   déplié. Elle reste dans le tiroir du téléphone, où elle sert. */
.main-navigation:not(.toggled) ul li.cam-menu-panneau .cam-menu-classe > a .dropdown-menu-toggle{
	display:none;
}

/* --- Le même menu sur téléphone : un accordéon ------------------------- */

/* Au doigt, le survol n'existe pas : chaque étage s'ouvre au clic, et c'est
   GeneratePress qui gère l'ouverture (classe `toggled-on` posée par son
   script). On ne touche donc PAS au positionnement ici : forcer
   `position:static` annulait son masquage, et les cinq niveaux s'ouvraient
   tous en même temps - un tiroir de deux mille pixels. Mesuré à 420 px.
   Ici on ne règle que l'apparence. */
.main-navigation.toggled ul li.cam-menu-panneau > ul.sub-menu{
	display:block;
	grid-template-columns:none;
	padding:0;
}
.main-navigation.toggled ul li.cam-menu-panneau li.cam-menu-classe > ul.sub-menu{
	border-left:var(--trait) solid var(--violet);
	margin:0 0 4px;padding:0 0 0 14px;
	background:transparent;
}
/* Sur le tiroir en fond nuit, deux défauts mesurés à 420 px : le niveau
   OUVERT passait au bleu par défaut de GeneratePress (#1e73be, illisible sur
   le nuit), et les matières s'affichaient PLUS GROSSES que leur niveau -
   14,7 px contre 14. La hiérarchie était inversée. */
/* Le parent tombe dans le même piège que les niveaux : une fois ouvert, il
   passe au bleu par défaut de GeneratePress. */
.main-navigation.toggled ul li.cam-menu-panneau > a,
.main-navigation.toggled ul li.cam-menu-panneau.sfHover > a{
	color:var(--creme);
}
.main-navigation.toggled ul li.cam-menu-classe > a,
.main-navigation.toggled ul li.cam-menu-classe.sfHover > a,
.main-navigation.toggled ul li.cam-menu-classe > a:hover{
	color:var(--creme);
	font-family:'Fredoka',sans-serif;
	font-size:1rem;
}
.main-navigation.toggled ul li.cam-menu-matiere > a{
	color:var(--creme);
	font-family:'Nunito',system-ui,sans-serif;
	font-size:.85rem;
	opacity:.88;
}
.main-navigation.toggled ul li.cam-menu-matiere > a:hover,
.main-navigation.toggled ul li.cam-menu-matiere > a:focus-visible{
	opacity:1;
}

/* Le tiroir du téléphone héritait du `background:transparent` posé pour que
   l'en-tête se fonde dans la bannière : ouvert, il laissait voir la page au
   travers et ses libellés devenaient illisibles. Défaut présent depuis le
   début, vu en ouvrant réellement le tiroir. */
.main-navigation.toggled{
	background:var(--nuit) !important;
	border-radius:0 0 22px 22px;
	box-shadow:0 14px 30px rgba(0,0,0,.38);
}
.main-navigation.toggled .main-nav > ul > li > a{color:var(--creme)}
.main-navigation.toggled .main-nav > ul > li > a:hover{color:var(--jaune)}
.main-navigation.toggled .dropdown-menu-toggle{color:var(--jaune)}

/* --- Le bloc « réviser » du bas de la page d'accueil -------------------- */

/* Un long texte de fond de page, avec le maillage DANS les phrases. Première
   version rejetée : elle alignait des cartes de liens, ce qui est un sommaire
   déguisé et pas du maillage éditorial. Ici, pas de bloc : du texte, et des
   liens dedans. */
.cam-revisions{
	background:var(--creme);
	border-top:var(--trait) solid var(--encre);
	padding:56px 0 64px;
}
.cam-revisions .cam-wrap{max-width:820px;margin:0 auto;padding:0 24px}
.cam-revisions h2{
	font-family:'Fredoka',sans-serif;
	font-size:clamp(1.5rem,3vw,2.1rem);
	color:var(--encre);
	margin:0 0 16px;
}
.cam-revisions h3{
	font-family:'Fredoka',sans-serif;
	font-size:1.18rem;
	color:var(--violet-fonce,#3b2bb5);
	margin:30px 0 8px;
}
.cam-revisions p{
	font-size:1rem;
	line-height:1.75;
	color:var(--encre);
	margin:0 0 14px;
}
.cam-revisions a{
	color:var(--violet);
	text-decoration:underline;
	text-underline-offset:3px;
	text-decoration-thickness:1px;
}
.cam-revisions a:hover,.cam-revisions a:focus-visible{
	color:var(--violet-fonce,#3b2bb5);
	text-decoration-thickness:2px;
}

@media (max-width:600px){
	.cam-revisions{padding:40px 0 46px}
	.cam-revisions .cam-wrap{padding:0 18px}
	.cam-revisions p{font-size:.98rem;line-height:1.7}
}

/* Le lien vers l'accueil posé dans la bannière produit et en clôture des hubs.
   Dans la bannière, le fond est nuit : la règle générique des liens du contenu
   (.cam .cam-prose a) est plus spécifique que la couleur du bloc, il faut donc
   la battre explicitement, sinon le lien sort en violet foncé sur fond sombre. */
.cam .cam-prose .cam-promo-corps a{
	color:var(--jaune);
	text-decoration:underline;
	text-underline-offset:3px;
	text-decoration-thickness:1px;
}
.cam .cam-prose .cam-promo-corps a:hover{text-decoration-thickness:2px}
/* Les hubs n'ont pas la classe .cam-prose : cibler .cam-accueil-note seule,
   sinon la règle ne s'applique nulle part. */
.cam .cam-sec--accueil{padding:0 0 40px}
.cam .cam-accueil-note{
	margin:0;
	padding-top:20px;
	border-top:1px dashed rgba(27,21,64,.16);
	font-size:.97rem;
	line-height:1.7;
	color:#3c3470;
}

/* --- La page /app : cible des QR codes imprimés ------------------------- */

.cam-app-bloc{
	background:var(--nuit);
	color:var(--creme);
	padding:clamp(40px,6vw,80px) 0 clamp(44px,6vw,86px);
}
.cam-app-grille{
	display:grid;
	grid-template-columns:1.25fr .75fr;
	gap:clamp(24px,4vw,54px);
	align-items:center;
}
.cam-app-pastille{
	display:inline-block;margin:0 0 14px;
	padding:6px 16px;border-radius:999px;
	background:var(--jaune);color:var(--encre);
	font-family:'Fredoka','Nunito',sans-serif;font-size:.86rem;
	text-transform:uppercase;letter-spacing:.05em;
}
.cam-app-texte h1{
	font-family:'Fredoka','Nunito',sans-serif;font-weight:600;
	font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.08;
	color:#fff;margin:0 0 16px;
}
.cam-app-texte h1 em{font-style:normal;color:var(--jaune)}
.cam-app-chapo{
	margin:0 0 26px;max-width:46ch;
	font-size:clamp(1rem,1.5vw,1.1rem);line-height:1.6;
	color:rgba(255,248,236,.82);
}
.cam-app-boutons{display:flex;flex-wrap:wrap;gap:14px}
.cam-app-store{
	display:inline-flex;align-items:center;
	padding:13px 24px;border-radius:14px;
	background:var(--creme);color:var(--encre);
	border:var(--trait) solid var(--encre);box-shadow:3px 3px 0 var(--encre);
	font-family:'Fredoka','Nunito',sans-serif;font-size:1rem;text-decoration:none;
}
a.cam-app-store:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--encre);color:var(--encre)}
.cam-app-store--attente{opacity:.66;box-shadow:none}
.cam-app-note{
	margin:20px 0 0;max-width:46ch;
	font-size:.95rem;line-height:1.6;color:rgba(255,248,236,.62);
}
.cam-app-retour{margin:22px 0 0}
.cam-app-retour a{color:var(--jaune);font-weight:700}
.cam-app-visuel{position:relative;display:flex;justify-content:center}
.cam-app-ecran{width:min(100%,300px);border-radius:22px}
.cam-app-mascotte{
	position:absolute;left:-6%;bottom:-4%;
	width:clamp(86px,14vw,128px);
}

@media (max-width:820px){
	.cam-app-grille{grid-template-columns:1fr}
	.cam-app-visuel{order:-1;margin-bottom:18px}
	.cam-app-ecran{width:min(100%,240px)}
	.cam-app-mascotte{left:2%;bottom:-6%;width:84px}
}