/* KidiPrints — direction « protège-cahier »
   Fond carton, pochettes plastique de couleur, feuille A4 blanche glissée dedans. */

:root{
  --carton:#E4E2DA;
  --carton-fonce:#D6D3C9;
  --encre:#14161C;
  --encre-doux:#4E5361;
  --encre-clair:#858A97;
  --blanc:#FFFFFF;
  --jaune:#F5C518;
  --reglure:#C4D3E8;
  --marge:#E4788C;
  --c:#D93A2B;
  --max:1140px;
  --rayon:12px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--carton);
  color:var(--encre);
  font-family:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* grain de papier, très léger */
body::before{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{max-width:100%;height:auto;display:block}
a{color:var(--encre)}
:focus-visible{outline:3px solid var(--encre);outline-offset:3px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 18px}

/* ---------------- typographie ---------------- */

h1,h2,h3,.matiere{
  font-family:"Bricolage Grotesque","Instrument Sans",sans-serif;
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.02;
  margin:0;
}
h1{font-size:clamp(34px,8.5vw,64px)}
h2{font-size:clamp(26px,5vw,40px)}
h3{font-size:19px;letter-spacing:-.02em;line-height:1.2}

.label{
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--encre-clair);
}

.lede{font-size:19px;color:var(--encre-doux);max-width:46ch;margin:18px 0 0}

/* ---------------- barre de tête ---------------- */

.topbar{position:sticky;top:0;z-index:50;background:var(--carton);border-bottom:1px solid var(--carton-fonce)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:58px;gap:14px}
.marque{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:21px;
  letter-spacing:-.035em;text-decoration:none;display:flex;align-items:center;gap:9px;
}
.marque i{width:13px;height:17px;background:var(--c);border-radius:2px 2px 1px 1px;display:block}
.topbar nav a{font-size:14px;font-weight:600;text-decoration:none;color:var(--encre-doux)}
.topbar nav a:hover{color:var(--encre)}

/* ---------------- puce ---------------- */

.puce{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--jaune);color:var(--encre);
  font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:7px 13px;border-radius:100px;
}

/* ---------------- boutons ---------------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:"Instrument Sans",sans-serif;font-size:16px;font-weight:600;
  background:var(--encre);color:var(--blanc);
  padding:15px 24px;border:2px solid var(--encre);border-radius:100px;
  text-decoration:none;cursor:pointer;transition:transform .12s ease,background .12s ease;
}
.btn:hover{transform:translateY(-2px);background:#000;color:var(--blanc)}
.btn-2{background:transparent;color:var(--encre)}
.btn-2:hover{background:var(--encre);color:var(--blanc)}
.btn-rangee{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}

/* ---------------- LE PROTÈGE-CAHIER (élément signature) ---------------- */

.protege{
  display:block;text-decoration:none;color:var(--encre);
  background:var(--c);
  border-radius:var(--rayon);
  padding:16px 16px 0;
  overflow:hidden;
  position:relative;
  box-shadow:0 2px 0 rgba(0,0,0,.16), 0 10px 26px -12px rgba(20,22,28,.5);
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease;
}
/* reflet plastique */
.protege::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:var(--rayon);
  background:linear-gradient(112deg,rgba(255,255,255,.16) 0 30%,rgba(255,255,255,.05) 34%,rgba(255,255,255,0) 40%);
}
a.protege:hover{transform:translateY(-4px);box-shadow:0 2px 0 rgba(0,0,0,.16), 0 22px 40px -16px rgba(20,22,28,.6)}

.feuille{
  position:relative;
  aspect-ratio:1/1.414;
  background:var(--blanc);
  border-radius:3px 3px 0 0;
  overflow:hidden;
  box-shadow:0 -1px 0 rgba(0,0,0,.06), 0 -12px 24px -18px rgba(0,0,0,.7);
  transform:translateY(10px);
  transition:transform .18s cubic-bezier(.2,.7,.3,1);
}
a.protege:hover .feuille{transform:translateY(2px)}
.feuille img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}

/* rendu de secours quand l'aperçu n'est pas encore déposé */
.feuille-vide{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;
  padding:12% 10%;
  background-image:
    repeating-linear-gradient(to bottom,transparent 0 15px,var(--reglure) 15px 16px),
    repeating-linear-gradient(to right,transparent 0 15px,rgba(196,211,232,.5) 15px 16px);
}
.feuille-vide::before{
  content:"";position:absolute;top:0;bottom:0;left:15%;width:1px;background:var(--marge);opacity:.7;
}
.feuille-vide .titre{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:clamp(15px,3.4vw,26px);letter-spacing:-.03em;line-height:1;
  color:var(--c);text-align:center;position:relative;
}
.feuille-vide .cadre{
  border:1.5px solid var(--encre);border-radius:4px;background:var(--blanc);
  font-size:8px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-clair);
  padding:7px 11px;position:relative;
}

/* étiquette blanche collée en bas du protège-cahier */
.etiquette{
  background:var(--blanc);border-radius:6px;
  margin:14px 0 16px;padding:11px 13px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  position:relative;z-index:3;
}
.matiere{font-size:18px}
.etiquette .format{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-clair)}

/* ---------------- accueil : hero ---------------- */

.hero{padding:40px 0 46px}
.hero-grid{display:grid;grid-template-columns:1fr;gap:44px;align-items:center}

.pile{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pile .protege{padding:11px 11px 0}
.pile .etiquette{margin:10px 0 11px;padding:8px 9px}
.pile .matiere{font-size:14px}
.pile .etiquette .format{display:none}
.pile > *:nth-child(1){transform:rotate(-4deg)}
.pile > *:nth-child(2){transform:translateY(-14px)}
.pile > *:nth-child(3){transform:rotate(4deg)}

@keyframes pose{from{opacity:0;transform:translateY(26px)}}
.pile > *{animation:pose .55s cubic-bezier(.2,.8,.3,1) backwards}
.pile > *:nth-child(1){animation-delay:.04s}
.pile > *:nth-child(2){animation-delay:.12s}
.pile > *:nth-child(3){animation-delay:.2s}

/* bandeau de faits, sur fond encre */
.bandeau{background:var(--encre);color:var(--carton)}
.bandeau .wrap{display:flex;flex-wrap:wrap;gap:10px 30px;padding-top:15px;padding-bottom:15px}
.bandeau span{font-size:13px;font-weight:600;letter-spacing:.04em}
.bandeau span::before{content:"\2192";margin-right:9px;color:var(--jaune)}

/* ---------------- sections ---------------- */

.bloc{padding:56px 0}
.bloc-tete{margin-bottom:30px}
.bloc-tete p{color:var(--encre-doux);margin:10px 0 0;max-width:52ch}

.grille{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}

/* section sombre : les cahiers vendus */
.sombre{background:var(--encre);color:var(--carton)}
.sombre h2,.sombre h3{color:var(--blanc)}
.sombre .bloc-tete p{color:#9BA1AF}
.livre{
  background:#1D2029;border:1px solid #2C3040;border-radius:var(--rayon);
  padding:22px;display:flex;flex-direction:column;gap:9px;
}
.livre .format{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--jaune)}
.livre p{margin:0;font-size:15px;color:#9BA1AF;flex:1}
.livre a{color:var(--blanc);font-weight:600;font-size:15px;text-decoration:none;border-bottom:2px solid var(--jaune);align-self:flex-start;padding-bottom:2px}

/* ---------------- page matière ---------------- */

.fiche{display:grid;grid-template-columns:1fr;gap:34px;align-items:start;padding:26px 0 46px}
.fiche .protege{max-width:340px}
.note{font-size:14px;color:var(--encre-clair);margin:14px 0 0}

.ariane{font-size:13px;color:var(--encre-clair);padding-top:18px}
.ariane a{color:var(--encre-clair)}

/* étapes : c'est une vraie séquence, donc numérotées */
.etapes{list-style:none;margin:0;padding:0;counter-reset:e;display:grid;gap:22px}
.etapes li{counter-increment:e;display:grid;grid-template-columns:38px 1fr;gap:16px}
.etapes li::before{
  content:counter(e);
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:22px;
  color:var(--c);line-height:1;
}
.etapes p{margin:0;color:var(--encre-doux)}
.etapes strong{color:var(--encre)}

.liste{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.liste li{padding-left:26px;position:relative;color:var(--encre-doux)}
.liste li::before{
  content:"";position:absolute;left:0;top:9px;width:11px;height:11px;
  background:var(--c);border-radius:2px;
}

/* barre de téléchargement collante, mobile */
.barre{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--blanc);border-top:1px solid var(--carton-fonce);
  padding:11px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;
  box-shadow:0 -8px 24px -18px rgba(20,22,28,.8);
}
.barre .quoi{font-size:13px;font-weight:600;line-height:1.2}
.barre .quoi small{display:block;font-weight:400;color:var(--encre-clair);font-size:11px}
.barre .btn{padding:12px 18px;font-size:15px}

/* ---------------- lettre d'information ---------------- */

.lettre{background:var(--jaune);border-radius:var(--rayon);padding:32px 26px}
.lettre p{color:#5A4A00;margin:10px 0 0;max-width:48ch}
.lettre form{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.lettre input[type=email]{
  flex:1 1 230px;min-width:0;font-family:inherit;font-size:16px;padding:14px 16px;
  border:2px solid var(--encre);border-radius:100px;background:var(--blanc);color:var(--encre);
}
.lettre .msg{font-size:15px;font-weight:600;margin-top:10px}
.lettre .msg.ko{color:#8A1C10}

/* ---------------- pub ---------------- */

.pub{margin:8px 0 40px}
.pub-vide{
  border:2px dashed var(--carton-fonce);border-radius:var(--rayon);padding:26px;text-align:center;
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-clair);
}

/* ---------------- pied ---------------- */

.pied{background:var(--encre);color:#9BA1AF;padding:40px 0 96px;font-size:14px}
.pied a{color:var(--carton);text-decoration:none}
.pied a:hover{text-decoration:underline}
.pied-liens{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:16px}
.pied p{max-width:60ch;margin:0}

.prose p{max-width:66ch;color:var(--encre-doux)}
.prose h2{margin-bottom:16px}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------- écrans larges ---------------- */

@media (min-width:720px){
  .grille{grid-template-columns:repeat(3,1fr);gap:18px}
  .fiche{grid-template-columns:.85fr 1.15fr;gap:52px;padding:32px 0 60px}
  .bloc{padding:76px 0}
  .hero{padding:56px 0 66px}
  .barre{display:none}
  .pied{padding-bottom:44px}
  .feuille-vide{background-image:
    repeating-linear-gradient(to bottom,transparent 0 21px,var(--reglure) 21px 22px),
    repeating-linear-gradient(to right,transparent 0 21px,rgba(196,211,232,.5) 21px 22px)}
  .feuille-vide .cadre{font-size:9px;padding:9px 14px}
}

@media (min-width:980px){
  .hero-grid{grid-template-columns:1.05fr .95fr;gap:60px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

/* ---- corrections : noms longs (« Mathématiques », « Histoire-Géographie ») ---- */
.feuille-vide .titre{max-width:100%;overflow-wrap:break-word;hyphens:auto}
.etiquette .matiere{min-width:0;overflow-wrap:break-word;line-height:1.1}
.pile .feuille-vide .titre{font-size:clamp(11px,2.6vw,17px)}
.pile .feuille-vide .cadre{font-size:7px;padding:6px 8px;letter-spacing:.08em}
.pile .matiere{font-size:12px}
@media (min-width:720px){ .pile .matiere{font-size:13px} }