/* ============================================================
   Fiches Enseignants — cahiersenfants.com — prototype funnel
   Esthétique « cahier d'écolier » : papier crème, lignes Seyès,
   badges autocollants, annotations stylo rouge, polaroïds.
   ============================================================ */

:root {
  --paper: #fdf8ee;
  --paper-deep: #f7efdd;
  --card: #fffdf8;
  --ink: #2d2a26;
  --ink-soft: #5c554b;
  --orange: #e86a1a;
  --orange-dark: #c65510;
  --orange-pale: #fdeadd;
  --red-pen: #d64040;
  --seyes-blue: rgba(122, 168, 214, 0.35);
  --seyes-margin: rgba(214, 100, 100, 0.45);
  --board: #33453b;
  --board-ink: #f2ead8;
  --kit: var(--orange);          /* accent du kit, surchargé par page */
  --kit-pale: var(--orange-pale);
  --shadow-soft: 0 10px 30px rgba(87, 62, 32, 0.12);
  --shadow-pop: 0 14px 36px rgba(87, 62, 32, 0.18);
  --radius: 18px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Nunito', 'Segoe UI', sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.65;
  font-size: 1.05rem;
  overflow-x: hidden;
}

/* -- Fond papier grain léger -- */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(rgba(87, 62, 32, 0.045) 1px, transparent 1.4px);
  background-size: 22px 22px;
}

main, header, footer { position: relative; z-index: 1; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; }
.wrap-narrow { max-width: 860px; margin: 0 auto; padding: 0 22px; }

h1, h2, h3 { font-family: 'Nunito', sans-serif; line-height: 1.22; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 900; margin-bottom: 0.6em; }
h3 { font-size: 1.22rem; font-weight: 800; }

.hand { font-family: 'Caveat', cursive; font-weight: 600; }

section { padding: 72px 0; }

/* ============ Header du site — CODE EXACT cahiersenfants.com (GeneratePress + custom), extrait le 13/07/2026. NE PAS retoucher : re-extraire du site si le theme change. ============ */
:root{--contrast:#222222;--contrast-2:#575760;--base:#f0f0f0;--base-2:#f7f8f9;--base-3:#ffffff;--ce-orange:#e86a1a;--ce-text:#2d3748;--ce-step-0:clamp(1rem, 0.91rem + 0.43vw, 1.25rem);--ce-ease:cubic-bezier(0.16, 1, 0.3, 1);--ce-duration-fast:150ms;--ce-duration:280ms;}
/* -- 1. GeneratePress core -- */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{background-color:#f1f1f1;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;clip-path:none;color:#21759b;display:block;font-size:.875rem;font-weight:700;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.main-navigation{z-index:100;padding:0;clear:both;display:block}
.main-navigation a{display:block;text-decoration:none;font-weight:400;text-transform:none;font-size:15px}
.main-navigation ul{list-style:none;margin:0;padding-left:0}
.main-navigation .main-nav ul li a{padding-left:20px;padding-right:20px;line-height:60px}
.main-navigation .inside-navigation{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between}
.main-navigation .main-nav>ul{display:flex;flex-wrap:wrap;align-items:center}
.main-navigation li{position:relative}
.main-navigation .menu-bar-items{display:flex;align-items:center;font-size:15px}
.main-navigation .menu-bar-items a{color:inherit}
.main-navigation .menu-bar-item{position:relative}
.main-navigation .menu-bar-item.search-item{z-index:20}
.main-navigation .menu-bar-item>a{padding-left:20px;padding-right:20px;line-height:60px}
.sidebar .main-navigation .main-nav{flex-basis:100%}
.sidebar .main-navigation .main-nav>ul{flex-direction:column}
.sidebar .main-navigation .menu-bar-items{margin:0 auto}
.sidebar .main-navigation .menu-bar-items .search-item{order:10}
.nav-align-center .main-nav>ul{justify-content:center}
.main-navigation ul ul{display:block;box-shadow:1px 1px 0 rgba(0,0,0,.1);float:left;position:absolute;left:-99999px;opacity:0;z-index:99999;width:200px;text-align:left;top:auto;transition:opacity 80ms linear;transition-delay:0s;pointer-events:none;height:0;overflow:hidden}
.main-navigation ul ul a{display:block}
.main-navigation ul ul li{width:100%}
.main-navigation .main-nav ul ul li a{line-height:normal;padding:10px 20px;font-size:14px}
.main-navigation .main-nav ul li.menu-item-has-children>a{padding-right:0;position:relative}
.main-navigation.sub-menu-left ul ul{box-shadow:-1px 1px 0 rgba(0,0,0,.1)}
.main-navigation.sub-menu-left .sub-menu{right:0}
.main-navigation:not(.toggled) ul li.sfHover>ul,.main-navigation:not(.toggled) ul li:hover>ul{left:auto;opacity:1;transition-delay:150ms;pointer-events:auto;height:auto;overflow:visible}
.main-navigation:not(.toggled) ul ul li.sfHover>ul,.main-navigation:not(.toggled) ul ul li:hover>ul{left:100%;top:0}
.main-navigation.sub-menu-left:not(.toggled) ul ul li.sfHover>ul,.main-navigation.sub-menu-left:not(.toggled) ul ul li:hover>ul{right:100%;left:auto}
.nav-float-right .main-navigation ul ul ul{top:0}
.nav-float-right .header-widget{margin-left:20px}
.nav-float-right #site-navigation{margin-left:auto}
.nav-float-left #site-navigation{margin-right:auto;order:-10}
.nav-float-left .header-widget{margin-left:0;margin-right:20px;order:-15}
.header-aligned-right:not([class*=nav-float-]) .header-widget{margin-right:auto;margin-left:0;order:-10}
.nav-float-left .has-inline-mobile-toggle #site-navigation{order:10;}
.menu-item-has-children .dropdown-menu-toggle{display:inline-block;height:100%;clear:both;padding-right:20px;padding-left:10px}
.menu-item-has-children ul .dropdown-menu-toggle{padding-top:10px;padding-bottom:10px;margin-top:-10px}
.sidebar .menu-item-has-children .dropdown-menu-toggle,nav ul ul .menu-item-has-children .dropdown-menu-toggle{float:right}
.widget-area .main-navigation li{float:none;display:block;width:100%;padding:0;margin:0}
.sidebar .main-navigation.sub-menu-right ul li.sfHover ul,.sidebar .main-navigation.sub-menu-right ul li:hover ul{top:0;left:100%}
.sidebar .main-navigation.sub-menu-left ul li.sfHover ul,.sidebar .main-navigation.sub-menu-left ul li:hover ul{top:0;right:100%}
.site-header{position:relative}
.inside-header{padding:20px 40px}
.site-logo{display:inline-block;max-width:100%}
.site-header .header-image{vertical-align:middle}
.inside-header{display:flex;align-items:center}
.header-aligned-center:not([class*=nav-float-]) .inside-header{justify-content:center;flex-direction:column;text-align:center}
.header-aligned-center:not([class*=nav-float-]) .inside-header>:not(:first-child){margin-top:1em}
.header-aligned-right:not([class*=nav-float-]) .inside-header{justify-content:flex-end}
.site-branding-container .site-logo{margin-right:1em}
.entry-header .gp-icon,.posted-on .updated{display:none}
.grid-container{margin-left:auto;margin-right:auto;max-width:1200px}
.widget-area .main-navigation{margin-bottom:20px}
.gp-icon{display:inline-flex;align-self:center}
.gp-icon svg{height:1em;width:1em;top:.125em;position:relative;fill:currentColor}
.entry-meta .gp-icon{margin-right:.6em;opacity:.7}
nav.toggled .sfHover>a>.dropdown-menu-toggle .gp-icon svg{transform:rotate(180deg)}
nav.toggled .sfHover>a>.dropdown-menu-toggle .gp-icon.icon-arrow-left svg{transform:rotate(-270deg)}
nav.toggled .sfHover>a>.dropdown-menu-toggle .gp-icon.icon-arrow-right svg{transform:rotate(270deg)}
.menu-toggle,.mobile-bar-items,.sidebar-nav-mobile{display:none}
.menu-toggle{padding:0 20px;line-height:60px;margin:0;font-weight:400;text-transform:none;font-size:15px;cursor:pointer}
.menu-toggle .mobile-menu{padding-left:3px}
.menu-toggle .gp-icon+.mobile-menu{padding-left:9px}
.menu-toggle .mobile-menu:empty{display:none}
button.menu-toggle{background-color:transparent;flex-grow:1;border:0;text-align:center}
button.menu-toggle:active,button.menu-toggle:focus,button.menu-toggle:hover{background-color:transparent}
.has-menu-bar-items button.menu-toggle{flex-grow:0}
.toggled .menu-item-has-children .dropdown-menu-toggle{padding-left:20px}
.main-navigation.toggled .main-nav{flex-basis:100%;order:3}
.main-navigation.toggled .main-nav>ul{display:block}
.main-navigation.toggled .main-nav li{width:100%;text-align:left}
.main-navigation.toggled .main-nav ul ul{transition:0s;visibility:hidden;box-shadow:none;border-bottom:1px solid rgba(0,0,0,.05)}
.main-navigation.toggled .main-nav ul ul li:last-child>ul{border-bottom:0}
.main-navigation.toggled .main-nav ul ul.toggled-on{position:relative;top:0;left:auto!important;right:auto!important;width:100%;pointer-events:auto;height:auto;opacity:1;display:block;visibility:visible;float:none}
.main-navigation.toggled .menu-item-has-children .dropdown-menu-toggle{float:right}
.mobile-menu-control-wrapper{display:none;margin-left:auto;align-items:center}
.nav-float-left .mobile-menu-control-wrapper{order:-10;margin-left:0;margin-right:auto;flex-direction:row-reverse}
@media(max-width:768px){.inside-header{flex-direction:column;text-align:center}.site-header .header-widget{margin-top:1.5em;margin-left:auto;margin-right:auto;text-align:center}}
/* -- 2. logo mobile -- */
@media(max-width:767px){.site-logo .header-image.is-logo-image{display:none;}.site-logo .ce-mobile-logo{display:block;max-height:40px;width:auto;}}
@media(min-width:768px){.site-logo .ce-mobile-logo{display:none;}}
/* -- 3. GP dynamic (couleurs) -- */
.entry-title a, .site-branding a, a.button, .wp-block-button__link, .main-navigation a{text-decoration:none;}
.site-header .header-image{width:300px;}
.site-header{background-color:var(--base-3);}
.mobile-menu-control-wrapper .menu-toggle,.mobile-menu-control-wrapper .menu-toggle:hover,.mobile-menu-control-wrapper .menu-toggle:focus,.has-inline-mobile-toggle #site-navigation.toggled{background-color:rgba(0, 0, 0, 0.02);}
.main-navigation,.main-navigation ul ul{background-color:var(--base-3);}
.main-navigation .main-nav ul li a, .main-navigation .menu-toggle, .main-navigation .menu-bar-items{color:var(--contrast);}
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a, .main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a, .main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a, .main-navigation .menu-bar-item:hover > a, .main-navigation .menu-bar-item.sfHover > a{color:#e86a1a;}
button.menu-toggle:hover,button.menu-toggle:focus{color:var(--contrast);}
.main-navigation .main-nav ul li[class*="current-menu-"] > a{color:#e86a1a;}
.navigation-search input[type="search"],.navigation-search input[type="search"]:active, .navigation-search input[type="search"]:focus, .main-navigation .main-nav ul li.search-item.active > a, .main-navigation .menu-bar-items .search-item.active > a{color:#e86a1a;}
.main-navigation ul ul{background-color:var(--base);}
@media(max-width:768px){.main-navigation .menu-bar-item:hover > a, .main-navigation .menu-bar-item.sfHover > a{background:none;color:var(--contrast);}}
.nav-below-header .main-navigation .inside-navigation.grid-container, .nav-above-header .main-navigation .inside-navigation.grid-container{padding:0px 20px 0px 20px;}
.rtl .menu-item-has-children .dropdown-menu-toggle{padding-left:20px;}
.rtl .main-navigation .main-nav ul li.menu-item-has-children > a{padding-right:20px;}
@media(max-width:768px){.inside-header{padding-right:30px;padding-left:30px;}}
@media(max-width:768px){.main-navigation .menu-toggle,.sidebar-nav-mobile:not(#sticky-placeholder){display:block;}.main-navigation ul,.gen-sidebar-nav,.main-navigation:not(.slideout-navigation):not(.toggled) .main-nav > ul,.has-inline-mobile-toggle #site-navigation .inside-navigation > *:not(.navigation-search):not(.main-nav){display:none;}.has-inline-mobile-toggle .mobile-menu-control-wrapper{display:flex;flex-wrap:wrap;}.has-inline-mobile-toggle .inside-header{flex-direction:row;text-align:left;flex-wrap:wrap;}}
/* -- 4. custom CSS v2 (sticky + typo nav) -- */
.site-header{position:sticky;top:0;z-index:999;background:rgba(255, 255, 255, 0.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:none;transition:box-shadow var(--ce-duration) var(--ce-ease);}
.inside-header{display:flex;align-items:center;min-height:80px;padding-top:10px;padding-bottom:10px;transition:min-height var(--ce-duration) var(--ce-ease);}
.site-logo img{max-height:70px;width:auto;transition:max-height var(--ce-duration) var(--ce-ease);}
.site-header.scrolled .inside-header{min-height:60px;padding-top:5px;padding-bottom:5px;}
.site-header.scrolled .site-logo img{max-height:48px;}
.site-header.scrolled{box-shadow:0 2px 12px rgba(0, 0, 0, 0.1);}
.main-navigation .main-nav ul li a{font-family:'Fredoka', 'Nunito', system-ui, sans-serif;line-height:1;padding:10px 8px;font-size:var(--ce-step-0);font-weight:500;color:var(--ce-text);transition:color var(--ce-duration-fast) var(--ce-ease);}
.main-navigation .main-nav ul li a:hover{color:var(--ce-orange);}
.main-navigation .main-nav ul li[class*="current"] > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a,
.main-navigation .main-nav ul li.current-menu-item > a, .main-navigation .main-nav ul li.current_page_item > a{color:var(--ce-orange) !important;}
/* -- 5. ce-header-harmonized (style radio 52px) -- */
.site-header{box-shadow:0 2px 10px rgba(15,27,61,.08)}
.inside-header{min-height:52px;padding-top:5px;padding-bottom:5px}
.site-logo img{max-height:42px}
.site-header.scrolled .inside-header{min-height:58px;padding-top:8px;padding-bottom:8px}
.site-header.scrolled .site-logo img{max-height:42px}
.main-navigation .main-nav ul li a{font-family:'Nunito',system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:700;font-size:.95rem;line-height:1.2;
padding:10px 12px;border-radius:8px;transition:color .15s,background .15s;}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li a:focus{color:#e86a1a;background:#fff3e0}

/* ============ Héro cahier Seyès ============ */
.hero {
  position: relative;
  padding: 84px 0 96px;
  background: linear-gradient(180deg, #ffffff 0%, #fff7f0 55%, #fdeadd 100%);
  overflow: hidden;
}
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; }
@media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; } }

.hero .eyebrow {
  display: inline-block;
  background: var(--kit);
  color: #fff;
  font-weight: 800;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  padding: 7px 16px;
  border-radius: 999px;
  transform: rotate(-1.4deg);
  box-shadow: var(--shadow-soft);
  margin-bottom: 22px;
}
.hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  font-weight: 900;
  margin-bottom: 18px;
}
.hero h1 .hl {
  color: var(--kit);
  position: relative;
  white-space: nowrap;
}
.hero h1 .hl::after {
  content: "";
  position: absolute; left: 2%; right: -2%; bottom: 4px;
  height: 0.34em;
  background: var(--kit-pale);
  z-index: -1;
  border-radius: 4px;
  transform: rotate(-0.6deg);
}
.hero .sub { font-size: 1.18rem; color: var(--ink-soft); font-weight: 600; max-width: 40em; margin-bottom: 30px; }

/* Titre bicolore aux couleurs du logo (bleu marine + orange) */
.hero h1.h1-brand { color: #1a3a5c; text-align: center; }
.h1-brand .t-orange { color: #e86a1a; }

/* Hero 2 colonnes : texte à gauche, photo enseignante à droite */
.hero-2col {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
  max-width: 1160px;
}
.hero-2col .hero-txt { text-align: left; }
.hero-2col .hero-txt .mat-checks { justify-content: flex-start; }
.hero-2col .hero-txt .hero-ctas { text-align: left; }
.hero-photo { position: relative; }
.hero-photo img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  transform: rotate(1.4deg);
}
@media (max-width: 900px) {
  .hero-2col { grid-template-columns: 1fr; gap: 30px; text-align: center; max-width: 620px; }
  .hero-2col .hero-txt { text-align: center; order: 2; }
  .hero-2col .hero-txt .mat-checks { justify-content: center; }
  .hero-2col .hero-txt .hero-ctas { text-align: center; }
  .hero-photo { order: 1; max-width: 440px; margin: 0 auto; }
  .hero-photo img { transform: none; }
  .hero .sub { margin-left: auto; margin-right: auto; }
}

.hero-note {
  position: absolute;
  top: 26px; right: 4%;
  font-size: 1.5rem;
  color: var(--red-pen);
  transform: rotate(3deg);
  opacity: 0.9;
}
@media (max-width: 880px) { .hero-note { display: none; } }

/* Carte « couverture de kit » dans le héro */
.kit-cover {
  background: var(--card);
  border: 2px solid rgba(87, 62, 32, 0.12);
  border-radius: var(--radius);
  padding: 30px 28px 26px;
  box-shadow: var(--shadow-pop);
  transform: rotate(1.6deg);
  position: relative;
}
.kit-cover::before {
  content: "";
  position: absolute; top: -14px; left: 50%;
  width: 120px; height: 30px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(232, 106, 26, 0.28);
  border-left: 1px dashed rgba(255,255,255,.6);
  border-right: 1px dashed rgba(255,255,255,.6);
}
.kit-cover .kc-level {
  display: inline-block;
  background: var(--kit);
  color: #fff;
  font-weight: 900;
  font-size: 1.5rem;
  padding: 6px 18px;
  border-radius: 12px;
  margin-bottom: 14px;
}
.kit-cover .kc-title { font-weight: 900; font-size: 1.3rem; margin-bottom: 12px; }
.kit-cover ul { list-style: none; }
.kit-cover li { padding: 7px 0 7px 30px; position: relative; font-weight: 700; font-size: 0.98rem; border-bottom: 1px dashed rgba(87,62,32,.14); }
.kit-cover li:last-child { border-bottom: 0; }
.kit-cover li::before { content: "✔"; position: absolute; left: 2px; color: var(--kit); font-weight: 900; }
.kit-cover .kc-price { margin-top: 16px; text-align: center; }
.kit-cover .kc-price .amount { font-size: 2.4rem; font-weight: 900; color: var(--kit); }
.kit-cover .kc-price .cond { display: block; font-size: 0.85rem; color: var(--ink-soft); font-weight: 700; }

/* ============ Boutons ============ */
.btn {
  display: inline-block;
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 1.08rem;
  text-decoration: none;
  text-align: center;
  color: #fff;
  background: linear-gradient(180deg, var(--orange) 0%, var(--orange-dark) 100%);
  padding: 16px 36px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 0 rgba(140, 60, 8, 0.9), var(--shadow-soft);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 rgba(140, 60, 8, 0.9), var(--shadow-pop); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(140, 60, 8, 0.9); }
.btn-ghost {
  background: #fff;
  color: var(--orange-dark);
  border: 2px solid var(--orange);
  box-shadow: none;
}
.btn-ghost:hover { background: var(--orange-pale); box-shadow: none; }
.btn-big { font-size: 1.22rem; padding: 19px 46px; }
.cta-under { margin-top: 12px; font-size: 0.9rem; color: var(--ink-soft); font-weight: 700; }
.cta-under span { margin: 0 8px; white-space: nowrap; }

/* ============ Titres de section avec trait orange fin ============ */
.sec-head { text-align: center; max-width: 46em; margin: 0 auto 46px; }
.sec-head .lead { color: var(--ink-soft); font-weight: 600; font-size: 1.08rem; }
.sec-head::after {
  content: "";
  display: block;
  width: 120px;
  margin: 22px auto 0;
  border-top: 2px solid var(--orange);
  opacity: 0.5;
}

/* ============ Cartes douleurs ============ */
.pains { background: var(--paper-deep); }
/* Continuité avec le bas du dégradé du hero (#fdeadd) */
.pains-hero-continue { background: #fdeadd; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 960px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 880px) { .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .grid-4, .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: var(--card);
  border: 2px solid rgba(87, 62, 32, 0.1);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: var(--shadow-soft);
}
.card .emoji { font-size: 2rem; display: block; margin-bottom: 10px; }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--ink-soft); font-weight: 600; font-size: 0.98rem; }
.card-pain { border-top: 5px solid var(--red-pen); }
.card-benefit { border-top: 5px solid var(--kit); }
.card-benefit.tilt-l { transform: rotate(-0.7deg); }
.card-benefit.tilt-r { transform: rotate(0.7deg); }

/* ============ Checklist « fait pour vous si » ============ */
.foryou-box {
  background: var(--card);
  border: 2px dashed var(--kit);
  border-radius: var(--radius);
  padding: 38px 40px;
  box-shadow: var(--shadow-soft);
}
.foryou-box ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 34px; }
@media (max-width: 760px) { .foryou-box ul { grid-template-columns: 1fr; } }
.foryou-box li { padding-left: 38px; position: relative; font-weight: 700; }
.foryou-box li::before {
  content: "✔";
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px;
  background: var(--kit);
  color: #fff;
  border-radius: 8px;
  display: grid; place-items: center;
  font-size: 0.85rem;
  transform: rotate(-4deg);
}

/* ============ Contenu détaillé (modules) ============ */
.module {
  background: var(--card);
  border: 2px solid rgba(87, 62, 32, 0.1);
  border-left: 8px solid var(--kit);
  border-radius: var(--radius);
  padding: 28px 30px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-soft);
}
.module .mod-tag {
  display: inline-block;
  background: var(--kit-pale);
  color: var(--ink);
  font-weight: 900;
  font-size: 0.85rem;
  padding: 4px 14px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.module ul { list-style: none; margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; }
@media (max-width: 760px) { .module ul { grid-template-columns: 1fr; } }
.module li { padding-left: 26px; position: relative; font-weight: 600; color: var(--ink-soft); font-size: 0.98rem; }
.module li::before { content: "✏️"; position: absolute; left: 0; font-size: 0.85rem; }

/* ============ Aperçus polaroïd ============ */
.previews { background: var(--paper-deep); }
.polaroid-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px; }
.polaroid {
  background: #fff;
  padding: 12px 12px 16px;
  border-radius: 6px;
  box-shadow: var(--shadow-pop);
  width: 225px;
  transform: rotate(var(--tilt, -2deg));
  transition: transform 0.18s ease;
  position: relative;
}
.polaroid:hover { transform: rotate(0deg) scale(1.04); z-index: 2; }
.polaroid::before {
  content: "";
  position: absolute; top: -12px; left: 50%;
  width: 86px; height: 24px;
  transform: translateX(-50%) rotate(-1deg);
  background: rgba(232, 106, 26, 0.25);
}
.polaroid .ph {
  height: 240px;
  border-radius: 4px;
  background:
    linear-gradient(to right, transparent 0, transparent 20px, var(--seyes-margin) 20px, var(--seyes-margin) 21px, transparent 21px),
    repeating-linear-gradient(to bottom, transparent 0, transparent 17px, var(--seyes-blue) 17px, var(--seyes-blue) 18px),
    #fffdf6;
  border: 1px solid rgba(87, 62, 32, 0.15);
  display: grid; place-items: center;
  text-align: center;
  padding: 14px;
  color: var(--ink-soft);
  font-weight: 800;
  font-size: 0.95rem;
}
.polaroid .cap { text-align: center; font-family: 'Caveat', cursive; font-size: 1.25rem; margin-top: 10px; color: var(--ink); }
.preview-note { text-align: center; margin-top: 30px; font-size: 0.95rem; color: var(--ink-soft); font-weight: 700; }

/* ============ Cadeaux offerts avec les kits ============ */
/* Grille et non flex : huit tuiles doivent s'aligner en colonnes régulières, alors que
   les polaroïds d'aperçu se veulent posés en vrac. `minmax(0, 1fr)` et pas `1fr` : le
   minimum automatique d'une piste suit son contenu et fait déborder la ligne. */
.cadeaux { background: linear-gradient(180deg, #fff7f0 0%, var(--paper-deep) 100%); }
.cadeau-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 1000px) { .cadeau-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .cadeau-row { grid-template-columns: minmax(0, 1fr); } }
.cadeau {
  background: #fff;
  border: 2px solid rgba(232, 106, 26, 0.18);
  border-radius: 14px;
  padding: 14px 14px 16px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
/* Pas d'inclinaison ici, contrairement aux polaroids d'aperçu : huit tuiles penchées
   chacune de son côté dans une grille régulière font désordre, pas spontané. */
.cadeau:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); }
.cadeau .ph-img {
  display: block;
  border: 1px solid rgba(87, 62, 32, 0.15);
  border-radius: 6px;
  overflow: hidden;
  background: #fffdf6;
}
.cadeau .ph-img img { display: block; width: 100%; height: auto; }
.cadeau figcaption { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.cadeau-t { font-weight: 800; font-size: 0.98rem; line-height: 1.3; color: var(--ink); }
.cadeau-r { font-size: 0.88rem; line-height: 1.45; color: var(--ink-soft); font-weight: 600; }
.cadeau-n {
  align-self: flex-start;
  margin-top: auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--orange-pale);
  color: var(--orange-dark);
  font-weight: 800;
  font-size: 0.78rem;
}
.cadeau-note {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex-wrap: wrap;
  text-align: center; margin-top: 30px;
  font-size: 0.95rem; color: var(--ink-soft); font-weight: 700;
}

/* ============ 3 étapes ============ */
.steps { counter-reset: step; }
.step-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 800px) { .step-row { grid-template-columns: 1fr; } }
.step {
  background: var(--card);
  border: 2px solid rgba(87, 62, 32, 0.1);
  border-radius: var(--radius);
  padding: 30px 26px 26px;
  text-align: center;
  box-shadow: var(--shadow-soft);
  position: relative;
}
.step .num {
  width: 54px; height: 54px;
  margin: 0 auto 14px;
  background: var(--kit);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 900;
  border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: 0 4px 0 rgba(87, 62, 32, 0.25);
  transform: rotate(-4deg);
}
.step p { color: var(--ink-soft); font-weight: 600; font-size: 0.98rem; margin-top: 6px; }

/* ============ Bonus ============ */
.bonus { background: var(--paper-deep); }
.bonus-card {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 22px;
  align-items: center;
  background: var(--card);
  border: 2px solid rgba(87, 62, 32, 0.1);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-soft);
}
@media (max-width: 640px) { .bonus-card { grid-template-columns: 64px 1fr; } .bonus-card .stamp { display: none; } }
.bonus-card .bnum {
  font-family: 'Caveat', cursive;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  background: var(--kit);
  border-radius: 12px;
  padding: 10px 6px;
  text-align: center;
  transform: rotate(-3deg);
  line-height: 1.15;
}
.bonus-card .bnum b { display: block; font-family: 'Nunito', sans-serif; font-size: 1.5rem; }
.bonus-card p { color: var(--ink-soft); font-weight: 600; font-size: 0.98rem; }
.bonus-card .stamp {
  font-weight: 900;
  color: var(--kit);
  border: 2px dashed var(--kit);
  border-radius: 10px;
  padding: 8px 14px;
  transform: rotate(4deg);
  font-size: 0.9rem;
  white-space: nowrap;
}

/* ============ Témoignages (placeholders honnêtes) ============ */
.reviews .card { border-top: 5px solid var(--kit); min-height: 160px; }
.reviews .ghost {
  border-style: dashed;
  background: transparent;
  box-shadow: none;
  display: grid; place-items: center;
  text-align: center;
  color: var(--ink-soft);
}
.reviews .ghost .hand { font-size: 1.5rem; color: var(--ink-soft); }

/* ============ Bandeau audience croisée (enseignants <-> parents) ============ */
.audience-switch {
  max-width: 860px;
  margin: 0 auto;
  background: var(--card);
  border: 2px dashed rgba(87, 62, 32, 0.25);
  border-radius: var(--radius);
  padding: 18px 26px;
  text-align: center;
  font-weight: 700;
}
.audience-switch a { color: var(--orange-dark); }

/* ============ Offre / tarif ============ */
.offer { background:
    repeating-linear-gradient(to bottom, transparent 0, transparent 30px, var(--seyes-blue) 30px, var(--seyes-blue) 31px),
    linear-gradient(180deg, var(--paper-deep) 0%, #fffdf6 100%);
}
.offer-box {
  max-width: 620px;
  margin: 0 auto;
  background: var(--card);
  border: 3px solid var(--kit);
  border-radius: 24px;
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  position: relative;
}
.offer-box .ob-head {
  background: var(--kit);
  color: #fff;
  text-align: center;
  padding: 18px 24px;
  font-weight: 900;
  font-size: 1.25rem;
}
.offer-box .ob-body { padding: 32px 38px 38px; }
.offer-box ul { list-style: none; margin-bottom: 26px; }
.offer-box li { padding: 9px 0 9px 34px; position: relative; font-weight: 700; border-bottom: 1px dashed rgba(87,62,32,.15); }
.offer-box li:last-child { border-bottom: 0; }
.offer-box li::before { content: "✔"; position: absolute; left: 0; color: var(--kit); font-weight: 900; }
.offer-box li .li-note { color: var(--ink-soft); font-weight: 600; font-size: 0.9rem; }
.price-line { text-align: center; margin-bottom: 8px; }
.price-line .was { color: var(--ink-soft); font-weight: 700; font-size: 1.05rem; }
.price-line .was s { opacity: 0.75; }
.price-line .now { font-size: 3.4rem; font-weight: 900; color: var(--kit); line-height: 1.1; display: block; }
.price-line .cond { display: block; color: var(--ink-soft); font-weight: 700; font-size: 0.92rem; }
.offer-box .btn { width: 100%; margin-top: 18px; }
.offer-box .secure { text-align: center; margin-top: 14px; font-size: 0.88rem; color: var(--ink-soft); font-weight: 700; }

/* Cross-sell pack */
.pack-hint {
  max-width: 620px;
  margin: 26px auto 0;
  background: var(--orange-pale);
  border: 2px dashed var(--orange);
  border-radius: var(--radius);
  padding: 20px 26px;
  text-align: center;
  font-weight: 700;
}
.pack-hint a { color: var(--orange-dark); }

/* ============ FAQ ============ */
/* Deux questions par ligne (Franck, 09/09) : onze questions empilées faisaient
   un mur. `align-items:start` est indispensable — sans lui, ouvrir une réponse
   étire la carte voisine à la même hauteur, et un vide s'installe à côté. */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
}
@media (max-width: 820px) { .faq-grid { grid-template-columns: minmax(0, 1fr); } }
.faq details {
  background: var(--card);
  border: 2px solid rgba(87, 62, 32, 0.1);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  font-weight: 800;
  padding: 18px 22px;
  list-style: none;
  position: relative;
  padding-right: 52px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute; right: 20px; top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  background: var(--orange-pale);
  color: var(--orange-dark);
  border-radius: 8px;
  display: grid; place-items: center;
  font-weight: 900;
  font-size: 1.2rem;
}
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 22px 20px; color: var(--ink-soft); font-weight: 600; }

/* ============ CTA final + footer tableau noir ============ */
.final-cta { text-align: center; }
.final-cta h2 { max-width: 24em; margin-left: auto; margin-right: auto; }
.final-cta .hand { display: block; font-size: 1.7rem; color: var(--red-pen); margin: 10px 0 26px; }

/* Footer du site (clone GeneratePress site-info) */
.site-footer {
  background: #fff;
  border-top: 1px solid #ececec;
  text-align: center;
  padding: 26px 16px 30px;
}
.site-footer .foot-links { font-size: 0.9rem; font-weight: 700; margin-bottom: 8px; }
.site-footer .foot-links a { color: #1a3a5c; text-decoration: none; margin: 0 8px; }
.site-footer .foot-links a:hover { color: var(--orange); text-decoration: underline; }
.site-footer .copyright { font-size: 0.85rem; color: var(--ink-soft); font-weight: 600; }

/* Page légale (CGV) */
.legal { max-width: 780px; margin: 0 auto; padding: 46px 22px 70px; }
.legal h1 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 900; margin-bottom: 6px; }
.legal .legal-updated { color: var(--ink-soft); font-weight: 600; font-size: 0.92rem; margin-bottom: 34px; }
.legal h2 { font-size: 1.25rem; font-weight: 800; margin: 34px 0 10px; }
.legal p, .legal li { color: var(--ink-soft); font-weight: 600; font-size: 0.99rem; }
.legal ul { padding-left: 22px; margin: 8px 0; }
.legal a { color: var(--orange-dark); }

/* ============ Hub : cartes kits ============ */
.kit-card {
  background: var(--card);
  border: 2px solid rgba(87, 62, 32, 0.12);
  border-radius: 22px;
  padding: 32px 28px 30px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kit-card:hover { transform: translateY(-5px) rotate(-0.4deg); box-shadow: var(--shadow-pop); }
.kit-card .kc-badge {
  align-self: flex-start;
  background: var(--kit);
  color: #fff;
  font-weight: 900;
  font-size: 1.25rem;
  padding: 6px 18px;
  border-radius: 12px;
  transform: rotate(-2deg);
  margin-bottom: 16px;
}
.kit-card h3 { font-size: 1.3rem; margin-bottom: 8px; }
.kit-card .kc-desc { color: var(--ink-soft); font-weight: 600; font-size: 0.98rem; margin-bottom: 16px; }
.kit-card ul { list-style: none; margin-bottom: 20px; flex: 1; }
.kit-card li { padding: 5px 0 5px 26px; position: relative; font-weight: 700; font-size: 0.94rem; }
.kit-card li::before { content: "✔"; position: absolute; left: 0; color: var(--kit); font-weight: 900; }
.kit-card .kc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kit-card .kc-foot .amount { font-size: 1.9rem; font-weight: 900; color: var(--kit); }
.kit-card .btn { padding: 12px 24px; font-size: 0.98rem; }

.kit-card.pack {
  border: 3px solid var(--orange);
  background: linear-gradient(180deg, #fffdf6 0%, var(--orange-pale) 130%);
}
/* Bandeau matières avec gros checks verts (héros) */
.mat-checks {
  display: flex; flex-wrap: nowrap; justify-content: center;
  gap: 10px;
  margin: 6px 0 22px;
  animation: rise 0.6s 0.2s ease both;
}
.mc {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff;
  border: 2px solid #3f9d4e;
  border-radius: 999px;
  padding: 8px 16px 8px 10px;
  font-weight: 900;
  font-size: 0.98rem;
  color: var(--ink);
  box-shadow: var(--shadow-soft);
  white-space: nowrap;
}
.mc-check {
  width: 30px; height: 30px; flex: none;
  background: #3f9d4e;
  color: #fff;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.05rem;
  font-weight: 900;
  box-shadow: 0 2px 0 rgba(35, 90, 45, 0.4);
}
@media (max-width: 720px) {
  .mat-checks { flex-wrap: wrap; gap: 8px 10px; }
  .mc { font-size: 0.92rem; padding: 7px 16px 7px 9px; gap: 7px; }
  .mc-check { width: 24px; height: 24px; font-size: 0.85rem; }
}

/* Grille de l'offre (porte d'entrée) */
.offre-grille td:first-child { font-weight: 800; }
.offre-grille td small { color: var(--ink-soft); font-weight: 600; font-size: 0.8rem; }
.offre-grille th a { color: #fff; text-decoration: none; }
.offre-grille a.cell {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 84px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid #3f9d4e;
  color: var(--ink);
  font-weight: 900;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.offre-grille a.cell:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.offre-grille a.cell .mc-check { width: 22px; height: 22px; font-size: 0.8rem; }
.offre-grille a.cell.strong { background: var(--orange); border-color: var(--orange-dark); color: #fff; }
.offre-grille a.cell.strong:hover { background: var(--orange-dark); }
.offre-grille .row-integrale td { background: var(--orange-pale); }
.offre-grille .row-classe td { border-top: 2px solid rgba(87, 62, 32, 0.18); }

/* Portes d'entrée (choix audience) */
.door {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--card);
  border: 2px solid rgba(87, 62, 32, 0.12);
  border-radius: 22px;
  padding: 36px 30px;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-soft);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.door:hover { transform: translateY(-6px); box-shadow: var(--shadow-pop); border-color: var(--orange); }
.door .door-emoji { font-size: 3.2rem; line-height: 1; }
.door h3 { font-size: 1.45rem; }
.door p { color: var(--ink-soft); font-weight: 600; font-size: 0.98rem; flex: 1; }
.door .door-go {
  align-self: center;
  background: var(--orange);
  color: #fff;
  font-weight: 900;
  padding: 11px 26px;
  border-radius: 999px;
  box-shadow: 0 4px 0 rgba(140, 60, 8, 0.9);
}
.door:hover .door-go { background: var(--orange-dark); }

/* Cartes classe cliquables */
a.classe-card { text-decoration: none; color: var(--ink); }
a.classe-card .btn { pointer-events: none; padding: 12px 24px; font-size: 0.95rem; }

/* Chip matière (texte, sans icône) */
.mat-chip {
  align-self: flex-start;
  display: inline-block;
  background: var(--kit-pale);
  color: var(--ink);
  border-left: 5px solid var(--kit);
  font-weight: 900;
  font-size: 1.02rem;
  padding: 7px 16px;
  border-radius: 8px;
  margin-bottom: 12px;
}
.mat-card .kc-desc { min-height: 2.6em; }
.mat-card .amount { white-space: nowrap; }
.kit-card .best {
  position: absolute; top: -16px; right: 22px;
  background: var(--red-pen);
  color: #fff;
  font-weight: 900;
  font-size: 0.82rem;
  padding: 6px 14px;
  border-radius: 999px;
  transform: rotate(3deg);
  box-shadow: var(--shadow-soft);
}

/* Tableau comparatif hub */
.compare table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); }
.compare th, .compare td { padding: 14px 18px; text-align: center; border-bottom: 1px solid rgba(87,62,32,.1); font-weight: 700; }
.compare th { background: var(--orange); color: #fff; font-weight: 900; }
.compare td:first-child, .compare th:first-child { text-align: left; }
.compare tr:last-child td { border-bottom: 0; }
.compare .yes { color: #3f9d4e; font-weight: 900; }
.compare-scroll { overflow-x: auto; }

/* ============ Page merci ============ */
.thanks-hero { text-align: center; padding: 90px 0 60px; }
.thanks-hero .big { font-size: 4rem; }

/* ============ Modale paiement (prototype) ============ */
.pay-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(45, 42, 38, 0.55);
  display: none;
  place-items: center;
  z-index: 100;
  padding: 20px;
}
.pay-modal-backdrop.open { display: grid; }
.pay-modal {
  background: var(--card);
  border-radius: 20px;
  max-width: 440px;
  padding: 38px 34px;
  text-align: center;
  box-shadow: var(--shadow-pop);
  border-top: 6px solid var(--orange);
}
.pay-modal .emoji { font-size: 2.6rem; display: block; margin-bottom: 12px; }
.pay-modal h3 { margin-bottom: 10px; }
.pay-modal p { color: var(--ink-soft); font-weight: 600; margin-bottom: 20px; }

/* ============ Offre de lancement ============ */
.launch-pill {
  display: inline-block;
  background: var(--red-pen);
  color: #fff;
  font-weight: 900;
  font-size: 0.92rem;
  padding: 8px 20px;
  border-radius: 999px;
  transform: rotate(1.2deg);
  box-shadow: var(--shadow-soft);
  margin-bottom: 14px;
}
.launch-strip {
  max-width: 720px;
  margin: 0 auto 26px;
  background: var(--orange-pale);
  border: 2px dashed var(--orange);
  border-radius: var(--radius);
  padding: 14px 24px;
  text-align: center;
  font-weight: 700;
}
.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-bottom: 6px; animation: rise 0.6s 0.24s ease both; }

/* Prix barrés */
.offre-grille a.cell s, .was-sm { color: var(--ink-soft); opacity: 0.75; font-weight: 700; font-size: 0.82em; margin-right: 3px; }
.kit-card .kc-foot .amount .was-sm, .kit-cover .kc-price .amount .was-sm { font-size: 0.6em; vertical-align: middle; }

/* ============ Chips audience (bi-audience) ============ */
.aud-chip {
  display: inline-block;
  background: var(--orange-pale);
  color: var(--ink);
  border-left: 5px solid var(--orange);
  font-weight: 900;
  font-size: 0.9rem;
  padding: 5px 14px;
  border-radius: 8px;
  margin-bottom: 12px;
}
.aud-chip.big { font-size: 1.05rem; padding: 8px 18px; margin-bottom: 18px; }
.foryou-box ul.one-col { grid-template-columns: 1fr; }

/* ============ Aperçus : vraies pages dans les polaroïds ============ */
.polaroid { text-decoration: none; display: block; color: var(--ink); }
.polaroid .ph-img { height: auto; padding: 0; display: block; overflow: hidden; }
.polaroid .ph-img img { width: 100%; height: auto; display: block; border-radius: 3px; }

/* ============ Bloc fiche d'essai (lead magnet) ============ */
.essai-box {
  max-width: 860px;
  margin: 44px auto 0;
  background: var(--card);
  border: 3px solid var(--orange);
  border-radius: 24px;
  box-shadow: var(--shadow-pop);
  padding: 34px 38px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
}
@media (max-width: 760px) { .essai-box { grid-template-columns: 1fr; padding: 26px 22px; } }
.essai-box h3 { margin-bottom: 8px; }
.essai-box p { color: var(--ink-soft); font-weight: 600; }
.essai-form { display: flex; flex-direction: column; gap: 12px; }
.essai-form input[type="email"] {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  padding: 14px 18px;
  border: 2px solid rgba(87, 62, 32, 0.25);
  border-radius: 12px;
  background: #fffdf6;
  color: var(--ink);
}
.essai-form input[type="email"]:focus { outline: none; border-color: var(--orange); }
.essai-consent {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 0.82rem; color: var(--ink-soft); font-weight: 600; line-height: 1.45;
}
.essai-consent input { margin-top: 3px; accent-color: var(--orange); }
/* Question profil (obligatoire) : deux pastilles, pas d'emoji d'interface (charte graphique). */
.essai-profil-q { font-size: 0.86rem; color: var(--ink-soft); font-weight: 700; margin-bottom: 8px; display: block; }
.essai-profil-opts { display: flex; gap: 10px; }
.essai-profil-opts label {
  flex: 1; text-align: center; cursor: pointer;
  font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 0.96rem;
  padding: 11px 8px; border: 2px solid rgba(87, 62, 32, 0.25); border-radius: 12px;
  background: #fffdf6; color: var(--ink);
}
.essai-profil-opts input { position: absolute; opacity: 0; width: 0; height: 0; }
.essai-profil-opts label.on { background: var(--orange); border-color: var(--orange); color: #fff; }
.essai-err { color: var(--red-pen); font-weight: 700; font-size: 0.9rem; }
.essai-ok { text-align: center; }
.essai-ok p { margin-bottom: 14px; font-weight: 700; color: var(--ink); }

/* ============ Témoignages (cartes citation) ============ */
.temoin { border-top: 5px solid var(--kit); position: relative; padding-top: 34px; }
.temoin::before {
  content: "“";
  position: absolute; top: 2px; left: 18px;
  font-family: Georgia, serif;
  font-size: 3.4rem;
  line-height: 1;
  color: var(--orange);
  opacity: 0.55;
}
.temoin.tilt-l { transform: rotate(-0.5deg); }
.temoin.tilt-r { transform: rotate(0.5deg); }
.temoin .t-quote { color: var(--ink); font-weight: 600; font-size: 1.02rem; margin-bottom: 14px; }
.temoin .t-who { font-size: 1.3rem; color: var(--red-pen); }

/* ============ Animations d'entrée ============ */
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.hero .eyebrow, .hero h1, .hero .sub, .hero .btn, .hero .cta-under { animation: rise 0.6s ease both; }
.hero h1 { animation-delay: 0.08s; }
.hero .sub { animation-delay: 0.16s; }
.hero .btn { animation-delay: 0.24s; }
.hero .cta-under { animation-delay: 0.3s; }
.kit-cover { animation: rise 0.7s 0.2s ease both; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ============================================================================
   KITS DE CAHIERS PDF (page /kits/, refonte du 09/09/2026)
   Un kit = plusieurs cahiers du catalogue PDF livrés ensemble, a -30 %.
   ========================================================================== */

/* --- Les cadeaux, rappeles dans CHAQUE offre, juste au-dessus de la case a cocher --- */
.kc-cadeaux { margin: 14px auto 4px; max-width: 760px; text-align: center; }
.kc-cadeaux a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  background: var(--orange-pale);
  border: 2px dashed rgba(232, 106, 26, 0.42);
  color: var(--orange-dark); text-decoration: none;
  font-weight: 800; font-size: 0.92rem; line-height: 1.35;
  transition: background 0.15s ease, transform 0.15s ease;
}
.kc-cadeaux a:hover { background: #fbdcc6; transform: translateY(-2px); }

/* --- Renonciation au droit de retractation : elle arme tous les CTA de la page --- */
.consent-box {
  display: flex; gap: 12px; align-items: flex-start;
  max-width: 760px; margin: 0 auto 8px;
  background: var(--card); border: 2px dashed rgba(87, 62, 32, 0.28);
  border-radius: 14px; padding: 16px 20px;
}
.consent-box input { margin-top: 4px; accent-color: var(--orange); width: 20px; height: 20px; flex: none; }
.consent-box label { font-size: 0.9rem; color: var(--ink-soft); font-weight: 600; line-height: 1.5; }
.consent-box a { color: var(--orange-dark); }
.consent-box.shake { animation: shake 0.45s ease 2; border-color: var(--orange); }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); }
                   75% { transform: translateX(6px); } }
.consent-hint {
  text-align: center; font-size: 0.9rem; font-weight: 700;
  color: var(--ink-soft); margin: 0 auto 30px;
}

/* Un CTA sans href (case decochee) reste visible mais clairement inactif. */
.btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.btn[aria-disabled="true"]:hover { transform: none; }

/* --- Rangee de couvertures d'un kit --- */
.kc-covers { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-bottom: 16px; }
.kc-covers img {
  width: 58px; height: auto; border-radius: 4px;
  box-shadow: 0 4px 12px rgba(87, 62, 32, 0.24);
}

/* --- Liste des cahiers inclus --- */
.kc-titres { list-style: none; margin: 0 0 16px; }
.kc-titres li {
  padding: 6px 0 6px 26px; position: relative;
  font-weight: 700; font-size: 0.93rem; color: var(--ink);
  border-bottom: 1px dashed rgba(87, 62, 32, 0.14);
}
.kc-titres li:last-child { border-bottom: 0; }
.kc-titres li::before { content: "✔"; position: absolute; left: 0; color: var(--kit); font-weight: 900; }

/* --- Bloc prix d'un kit --- */
.kc-prix { text-align: center; margin-bottom: 18px; }
.kc-prix s { color: var(--ink-soft); font-weight: 700; font-size: 1.05rem; opacity: 0.75; margin-right: 10px; }
.kc-prix strong { font-size: 2.4rem; font-weight: 900; color: var(--kit); line-height: 1.1; }
.kc-prix small { display: block; color: var(--ink-soft); font-weight: 700; font-size: 0.88rem; margin-top: 2px; }

/* --- Pastille de remise --- */
.kc-pct {
  position: absolute; top: -14px; right: -10px; z-index: 3;
  background: var(--red-pen); color: #fff;
  font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 1.05rem;
  padding: 8px 14px; border-radius: 999px;
  box-shadow: 0 6px 16px rgba(87, 62, 32, 0.28);
  transform: rotate(6deg);
}

/* --- Kit vedette (Lecture) : deux colonnes --- */
.kit-vedette {
  position: relative;
  display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 34px; align-items: center;
  background: var(--card); border: 3px solid var(--kit); border-radius: var(--radius);
  padding: 34px 34px 30px; margin-bottom: 30px; box-shadow: var(--shadow-pop);
}
.kit-vedette .kc-badge {
  position: absolute; top: -15px; left: 28px;
  background: var(--kit); color: #fff;
  font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 0.9rem;
  padding: 6px 16px; border-radius: 999px;
}
.kit-vedette .kv-left .kc-covers img { width: 84px; }
.kit-vedette .kv-niveaux {
  text-align: center; margin-top: 4px;
  font-family: 'Caveat', cursive; font-weight: 700; font-size: 1.35rem; color: var(--red-pen);
}
.kit-vedette h3 { font-size: 1.75rem; margin-bottom: 8px; }
.kit-vedette .kc-desc { color: var(--ink-soft); font-weight: 600; margin-bottom: 14px; }
.kit-vedette > .kv-right > ul { list-style: none; margin-bottom: 16px; }
.kit-vedette > .kv-right > ul li {
  padding: 5px 0 5px 28px; position: relative; font-weight: 700; font-size: 0.97rem;
}
.kit-vedette > .kv-right > ul li::before {
  content: "✔"; position: absolute; left: 0; color: var(--kit); font-weight: 900;
}
.kit-vedette .kc-prix { text-align: left; }
.kit-vedette .kc-prix strong { font-size: 3rem; }
.kit-vedette .btn { width: 100%; }

/* --- Kits secondaires --- */
.kits-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; align-items: stretch; }
.kits-grid .kit-card { position: relative; }
.kits-grid .kit-card .btn { width: 100%; }

/* --- Bandeau Integrale : les couvertures y sont plus petites --- */
.offer-box .kc-covers { margin-bottom: 22px; }
.offer-box .kc-covers img { width: 46px; }

/* --- Temoignages (memes avis que les pages produit PDF) --- */
.grid-3-temoins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.temoin .t-stars { position: absolute; top: 12px; right: 16px; color: #f5a623; font-size: 1rem; letter-spacing: 1px; }
.temoin .t-foot { display: flex; align-items: center; gap: 12px; }
.temoin .t-avatar { width: 48px; height: 48px; border-radius: 50%; flex: none; }

/* --- Apercus : un sous-titre par kit --- */
.apercu-groupe {
  text-align: center; font-size: 1.2rem; font-weight: 900;
  margin: 34px 0 18px; color: var(--ink);
}
.apercu-groupe:first-of-type { margin-top: 0; }

/* --- Photo enseignante + callout sous les 3 etapes --- */
.commander-duo {
  display: flex; flex-wrap: wrap; gap: 26px; align-items: center;
  max-width: 900px; margin: 34px auto 0;
}
/* 🔴 Enfant DIRECT seulement : `.commander-duo img` attrapait aussi les icônes du
   callout (spécificité 0-1-1 contre 0-1-0 pour .ce-ico--inline) et les affichait en
   250 px, arrondies et ombrées. Bug vécu le 09/09. */
.commander-duo > img {
  width: 250px; height: auto; border-radius: 20px;
  box-shadow: 0 6px 20px rgba(87, 62, 32, 0.16);
}
.commander-duo .callout {
  flex: 1 1 320px;
  background: var(--card); border-left: 5px solid var(--orange);
  border-radius: 14px; padding: 20px 22px;
  color: var(--ink-soft); font-weight: 600;
}
.commander-duo .callout strong { color: var(--ink); }

@media (max-width: 900px) {
  .kit-vedette { grid-template-columns: 1fr; gap: 22px; }
  .kit-vedette .kc-prix { text-align: center; }
  .kits-grid { grid-template-columns: 1fr; }
  .grid-3-temoins { grid-template-columns: 1fr; }
  .commander-duo { justify-content: center; }
  .commander-duo > img { width: 200px; }
}

/* --- Correctif hero 2 colonnes -------------------------------------------
   `1.05fr 0.95fr` seul ne partage PAS la largeur : une piste `fr` vaut
   minmax(auto, Xfr), et le min-content du bloc de texte (H1 + sous-titre)
   ecrasait la colonne photo (mesure : 945 px contre 124 px). minmax(0, …)
   autorise la colonne texte a retrecir. Le H1 s'aligne a gauche comme le
   reste de la colonne (centre, il flottait au-dessus d'un texte ferre a gauche). */
.hero-2col { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.9fr); }
.hero-2col .hero-txt h1.h1-brand { text-align: left; }
.hero-2col .hero-txt .sub { max-width: none; }
@media (max-width: 900px) {
  .hero-2col { grid-template-columns: 1fr; }
  .hero-2col .hero-txt h1.h1-brand { text-align: center; }
}
/* Les 4 preuves du hero doivent passer a la ligne : dans la colonne texte du hero
   2 colonnes, `flex-wrap: nowrap` les faisait deborder sous la photo (mesure). */
.hero-2col .hero-txt .mat-checks { flex-wrap: wrap; }

/* Icône « Sami & Julie » en tête du sous-titre du hero, à la place d'un emoji
   (charte §4 : aucun emoji comme icône d'interface). */
.hero .sub .sub-icon {
  width: 66px; height: auto; float: left;
  margin: -4px 12px 2px 0; shape-outside: margin-box;
}
@media (max-width: 900px) {
  .hero .sub .sub-icon { float: none; display: block; margin: 0 auto 10px; width: 90px; }
}

/* Ligne de réassurance du hero : elle collait au bouton (Franck, 09/09). */
.hero-2col .hero-txt .cta-under { margin-top: 22px; }
/* La photo de l'enseignante reste DROITE : la rotation de 1,4° du gabarit d'origine
   penchait le tableau de la salle de classe (Franck, 09/09). */
.hero-photo img { transform: none; }

/* Case de renonciation posée DANS chaque bloc produit (Franck, 09/09) : plus compacte
   que la version pleine largeur, et calée sur la largeur de la carte. */
.kit-vedette .consent-box, .kit-card .consent-box, .offer-box .consent-box {
  max-width: none; margin: 0 0 6px; padding: 12px 14px; gap: 10px;
}
.kit-vedette .consent-box label, .kit-card .consent-box label,
.offer-box .consent-box label { font-size: 0.8rem; line-height: 1.45; }
.kit-vedette .consent-box input, .kit-card .consent-box input,
.offer-box .consent-box input { width: 18px; height: 18px; margin-top: 2px; }
.kit-vedette .consent-hint, .kit-card .consent-hint, .offer-box .consent-hint {
  margin: 0 0 12px; font-size: 0.82rem;
}
.offer-box .consent-box { background: #fffdf8; }

/* Aperçus non cliquables : <figure> à la place de <a>. On neutralise la marge par
   défaut de figure et l'effet de survol, qui suggérait un clic qui n'existe plus. */
figure.polaroid { margin: 0; cursor: default; }
figure.polaroid:hover { transform: rotate(var(--tilt)); }

/* Titres de section : toute la largeur de la colonne centrale (Franck, 09/09).
   `max-width:46em` sur .sec-head cassait « Commander votre kit : 3 étapes, 2 minutes »
   en deux lignes alors que la place existait. Le chapeau, lui, garde une longueur de
   ligne lisible : c'est du texte courant, pas un titre. */
.sec-head { max-width: none; }
.sec-head .lead { max-width: 46em; margin-left: auto; margin-right: auto; }

/* ============ Tableau « PDF ou papier » : deux colonnes colorées ============
   Franck, 09/09 : le tableau à en-tête orange plein et lignes grises était fade. On
   colore les COLONNES (c'est la comparaison qui compte, pas les lignes) : la colonne
   PDF en orange pâle, la colonne broché en bleu pâle, la colonne des critères neutre. */
.compare table { border-collapse: separate; border-spacing: 0; background: transparent; box-shadow: none; }
.compare th, .compare td { border-bottom: 1px solid rgba(87, 62, 32, .1); }

/* En-têtes : chaque colonne prend sa couleur, arrondie en haut. */
.compare th { background: transparent; color: var(--ink); padding: 16px 18px; }
.compare th:nth-child(2) {
  background: var(--orange); color: #fff; border-radius: 16px 16px 0 0; font-size: 1.05rem;
}
.compare th:nth-child(3) {
  background: #1a3a5c; color: #fff; border-radius: 16px 16px 0 0; font-size: 1.05rem;
}

/* Corps : deux bandes verticales franches. */
.compare td:nth-child(2) { background: #fff4ea; }
.compare td:nth-child(3) { background: #eaf1f8; }
.compare td:first-child { background: transparent; font-weight: 800; color: var(--ink); }
.compare tr:last-child td:nth-child(2),
.compare tr:last-child td:nth-child(3) { border-radius: 0 0 16px 16px; border-bottom: 0; }

/* La colonne PDF est celle qu'on vend : un filet orange l'encadre sur toute sa hauteur. */
.compare td:nth-child(2) { box-shadow: inset 3px 0 0 rgba(232,106,26,.28), inset -3px 0 0 rgba(232,106,26,.28); }
.compare tr:last-child td:nth-child(2) { box-shadow: inset 3px 0 0 rgba(232,106,26,.28),
  inset -3px 0 0 rgba(232,106,26,.28), inset 0 -3px 0 rgba(232,106,26,.28); }

/* Espace entre le CTA final et sa ligne de réassurance (Franck, 09/09). */
.final-cta .cta-under { margin-top: 26px; }

/* ============ Icônes « Sami & Julie » à la place des emojis d'interface ============
   Charte §4 : plus AUCUN emoji comme icône d'interface (cartes, pastilles, étapes,
   en-têtes). Les emojis restent dans le contenu rédactionnel (titres de section).
   Une seule règle de base, des tailles par contexte. */
.ce-ico { display: inline-block; width: auto; vertical-align: middle; }

/* Icône en tête d'une carte (bénéfices, douleurs) : posée seule au-dessus du titre. */
.ce-ico--card { display: block; height: 58px; margin-bottom: 14px; }

/* Icône dans une pastille d'audience (« En classe », « Vous êtes parent »). */
.ce-ico--chip { height: 26px; margin-right: 8px; }
.aud-chip { display: inline-flex; align-items: center; }

/* Icône d'une étape d'achat, à gauche du titre. */
.ce-ico--step { height: 34px; margin-right: 10px; }
.step h3 { display: flex; align-items: center; justify-content: center; gap: 0; }

/* Icône d'un titre de kit ou de groupe d'aperçus. */
.ce-ico--titre { height: 42px; margin-right: 12px; }
.kit-card h3, .kit-vedette h3, .apercu-groupe { display: flex; align-items: center; }
.kit-card h3, .apercu-groupe { justify-content: flex-start; }
.apercu-groupe { justify-content: center; }
.offer-box .ob-head { display: flex; align-items: center; justify-content: center; gap: 0; }
.offer-box .ob-head .ce-ico--titre { height: 36px; }

/* Icône glissée dans une phrase (callout, ligne « paiement sécurisé », tableau). */
.ce-ico--inline { height: 24px; margin-right: 7px; }

/* Icône d'une pastille de réassurance sous un bouton. */
.ce-ico--puce { height: 22px; margin-right: 6px; }
.cta-under span { display: inline-flex; align-items: center; }

/* Icône d'en-tête de colonne du tableau comparatif. */
.ce-ico--th { height: 26px; margin-right: 8px; }
.compare th:nth-child(2), .compare th:nth-child(3) { white-space: nowrap; }

@media (max-width: 600px) {
  .ce-ico--card { height: 48px; }
  .ce-ico--titre { height: 34px; }
}

/* Air autour du bouton du hero : il était collé aux pastilles au-dessus et à la ligne
   de réassurance en dessous (Franck, 09/09). */
.hero-2col .hero-txt .hero-ctas { margin-top: 26px; margin-bottom: 8px; }

/* Les 4 pastilles de preuve du hero : centrées sous le texte (Franck, 09/09).
   Elles étaient ferrées à gauche, en déséquilibre avec le bouton centré en dessous. */
.hero-2col .hero-txt .mat-checks { justify-content: center; }

/* Ligne de réassurance du hero : centrée sous le bouton (Franck, 09/09). Elle héritait
   du `text-align:left` de la colonne texte et pendait à gauche pendant que le bouton,
   lui, était centré. En flex centré, les trois pastilles se répartissent proprement
   même quand elles passent sur deux lignes. */
.hero-2col .hero-txt .cta-under {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px;
  text-align: center;
}
.hero-2col .hero-txt .cta-under span { margin: 0; }

/* Carte à deux colonnes : icône à gauche, titre + texte à droite (Franck, 09/09).
   Classe explicite plutôt qu'un `:has()` : les cartes voisines commencent par une
   pastille d'audience et non par une icône, elles ne doivent pas basculer en 2 colonnes. */
.card-duo {
  display: grid; grid-template-columns: auto 1fr;
  column-gap: 20px; align-items: start;
}
.card-duo .ce-ico--card { grid-row: 1 / span 2; margin-bottom: 0; height: 66px; }
.card-duo h3, .card-duo p { grid-column: 2; }
.card-duo h3 { margin-bottom: 6px; }
@media (max-width: 560px) {
  .card-duo { grid-template-columns: 1fr; }
  .card-duo .ce-ico--card { grid-row: auto; margin-bottom: 12px; }
  .card-duo h3, .card-duo p { grid-column: 1; }
}

/* Même traitement que sur les pages produit PDF (Franck, 09/09) : la consigne qui
   débloque le bouton est en gras et en orange de marque, pas en gris de note. */
.consent-hint { color: var(--orange); font-weight: 800; }

/* Cartes « Ce que vous obtenez dans chaque kit » : icône et titre centrés (Franck,
   09/09). Le texte courant reste ferré à gauche : centré, un paragraphe de 4 lignes
   sur une colonne étroite devient pénible à lire. */
.card-benefit .ce-ico--card { margin-left: auto; margin-right: auto; }
.card-benefit h3 { text-align: center; }

/* Séparation hero / première section : 96 px de padding bas + 72 px de padding haut
   faisaient 168 px de vide (mesuré). Franck, 09/09 : trop. Ramené à 92 px. */
.hero { padding-bottom: 44px; }
.pains-hero-continue { padding-top: 48px; }

/* Kit vedette : la colonne de gauche était à moitié vide avec 6 couvertures à 84 px
   sur 3 rangs (Franck, 09/09). Grille de 2, couvertures au maximum de la colonne.
   🔴 La grille 2 colonnes est enfermée dans un `min-width: 901px` : écrite au niveau
   racine, elle arrivait APRÈS le `@media (max-width:900px)` de la ligne 1118 et
   l'annulait à spécificité égale (c'est le dernier qui gagne). Résultat : le kit
   restait en deux colonnes sur mobile, écrasé. Bug vu par Franck le 09/09.
   Toute règle de mise en page ajoutée ici doit être bornée de la même façon. */
@media (min-width: 901px) {
  .kit-vedette { grid-template-columns: minmax(250px, 340px) 1fr; }
  .kit-vedette .kv-left .kc-covers {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 14px; justify-items: center; margin-bottom: 10px;
  }
  .kit-vedette .kv-left .kc-covers img { width: 100%; height: auto; }
}
@media (max-width: 900px) {
  /* Une seule colonne : couvertures centrées au-dessus du texte, prix et bouton
     pleine largeur. */
  .kit-vedette { grid-template-columns: 1fr; gap: 22px; }
  .kit-vedette .kv-left .kc-covers {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    justify-items: center; max-width: 420px; margin: 0 auto 10px;
  }
  .kit-vedette .kv-left .kc-covers img { width: 100%; height: auto; }
  .kit-vedette .kc-prix { text-align: center; }
  .kit-vedette h3 { justify-content: center; text-align: center; }
  .kit-vedette .kc-desc { text-align: center; }
}

/* Kits secondaires : les couvertures à 58 px laissaient la carte à moitié vide
   (Franck, 09/09). Elles se répartissent maintenant sur toute la largeur, quel que
   soit le nombre de membres du kit (3 pour Nature, 4 pour Explorer le monde). */
.kits-grid .kit-card .kc-covers {
  gap: 10px; align-items: flex-start; margin-bottom: 18px;
}
.kits-grid .kit-card .kc-covers img {
  flex: 1 1 0; width: auto; max-width: 150px; height: auto;
}
/* Même traitement pour la rangée de l'Intégrale, où 13 couvertures tenaient en 46 px. */
.offer-box .kc-covers { gap: 9px; }
.offer-box .kc-covers img { width: 62px; }

/* Grosse pastille de remise sur le bandeau Intégrale (Franck, 09/09) : c'est la plus
   forte remise de la page, elle doit se voir de loin. `.offer-box` doit être positionné
   pour que la pastille s'accroche à son coin. */
.offer-box { position: relative; overflow: visible; }
/* 🔴 `overflow:hidden` rognait l'en-tete aux coins arrondis de la boite ; en le passant
   a `visible` pour laisser depasser la pastille, le bandeau navy ressortait carre
   par-dessus l'arrondi (defaut vu par Franck le 09/09). On rend donc les coins hauts a
   l'en-tete lui-meme : 21 px = les 24 px de la boite moins ses 3 px de bordure. */
.offer-box .ob-head { border-radius: 21px 21px 0 0; }
.kc-pct--xl {
  top: -22px; right: -14px;
  font-size: 1.5rem; padding: 16px 20px;
  border-radius: 999px; line-height: 1;
  box-shadow: 0 8px 22px rgba(87, 62, 32, .32);
}
@media (max-width: 700px) {
  .kc-pct--xl { font-size: 1.15rem; padding: 12px 15px; top: -16px; right: -6px; }
}

/* 🔴 Filet de sécurité que GeneratePress fournit sur le site mais que cette page
   statique n'avait pas : sans lui, une image plus large que son conteneur ne se
   contraint pas. Vécu le 09/09 : le logo du pied de page (500 px natifs) élargissait
   la piste `1fr` de la grille du footer (`1fr` = `minmax(auto, 1fr)`, le minimum
   automatique suit le contenu), et la page débordait de 15 px en mobile.
   Sélecteur nu, spécificité 0-0-1 : toutes les règles de classe passent devant. */
img { max-width: 100%; height: auto; }