@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&family=Caveat:wght@500;600;700&family=Amiri:wght@400;700&display=swap');

/* =========================================================
   1. Socle commun
   ========================================================= */
:root{
  --paper:#f8f4ec;--ivory:#fffcf6;--ink:#23394a;--muted:#576a77;--navy:#152d43;--blue:#2a4b62;--gold:#b28a4d;--line:#dfd4c5;
  --shadow:0 14px 32px rgba(65,51,33,.10);--serif:'Cormorant Garamond',Georgia,serif;--sans:'DM Sans',Arial,sans-serif;--shell:min(1240px,calc(100% - 52px));
  --navy-deep:#10283c;--gold-soft:#e7c18d;--gold-text:#9a7543;--tint:#f0e8dc;--sage:#1e4a47;
  --seal:url('assets/logo.webp');--hand:'Caveat','Segoe Print',cursive;--ink:#1f2f4a;--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .33 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");--hero-book:url('assets/hero-book.webp');
  --navy-panel:radial-gradient(ellipse at 0 100%,#3e69704a,transparent 58%),linear-gradient(115deg,#193047 0%,#22485b 56%,#13293f 100%);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);font:400 16px/1.65 var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased}
body .shell{width:min(1240px,calc(100% - 52px));margin-inline:auto}
img{display:block;width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
h1,h2,h3,p,blockquote{margin-top:0}
h1,h2,h3{font-family:var(--serif);line-height:1.01;font-weight:700;letter-spacing:-.02em}
h1{font-size:clamp(2.9rem,5.3vw,5.4rem)}
h2{font-size:clamp(2.2rem,3.5vw,3.5rem)}
h3{font-size:clamp(1.6rem,2.15vw,2.35rem)}
p{margin-bottom:1.05em}
b,strong{font-weight:700}
.sprite{position:absolute;visibility:hidden;width:0;height:0;overflow:hidden}
.icon{width:19px;height:19px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none;vertical-align:middle;flex-shrink:0}
.kicker{font-size:.76rem;font-weight:700;letter-spacing:.16em;color:#a37d40;text-transform:uppercase;margin:0 0 15px}
.button{min-height:48px;padding:12px 19px;display:inline-flex;align-items:center;justify-content:space-between;gap:14px;border-radius:999px;border:1px solid transparent;font-weight:700;font-size:.83rem;transition:transform .2s,box-shadow .2s,background .2s}
.button:hover{transform:translateY(-2px)}
.button-gold{background:linear-gradient(120deg,#e9ca8a,#c59650);box-shadow:0 8px 20px #ae8b4930;color:#173247}
.button-outline-light{border-color:#d0dbe1a8;background:#ffffff13;color:#e9f1f5}
.inline-link{display:inline-flex;align-items:center;gap:12px;color:#8a612c;font-weight:700;font-size:.83rem}
.inline-link .icon{width:15px}
:focus-visible{outline:2px solid #b28a4d;outline-offset:3px}

/* En-tête */
.header-wrap{z-index:20;position:relative;padding-top:15px}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:13px;border-radius:26px;min-height:76px;padding:7px 12px;box-shadow:0 10px 30px rgba(63,51,33,.12),inset 0 1px 0 #fff;background:linear-gradient(180deg,#fffdf9eb,#f6efe3e0);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid #ffffffc7}
.brand{display:flex;align-items:center;gap:8px;min-width:215px}
.brand img{width:50px;height:50px;object-fit:contain}
.brand strong{display:block;font:700 1.63rem/1 var(--serif);color:#8f6c35;letter-spacing:.012em}
.brand small{display:block;font:700 .59rem var(--sans);letter-spacing:.24em;color:#586c76}
.main-nav{display:flex;gap:2px;align-items:center;padding:5px;border-radius:99px;background:#f2e9dcb3;border:1px solid #e3d6c2;box-shadow:inset 0 1px 2px #6b55330f}
.main-nav a{font-weight:600;font-size:.9rem;padding:9px 17px;border-radius:99px;color:#3d5263;transition:background .2s,box-shadow .2s,color .2s}
.main-nav a:hover,.main-nav a[aria-current]{background:#fffdf8;color:#926e3a;box-shadow:0 2px 8px #5b442a17}
.header-actions{display:flex;align-items:center;gap:12px}
.header-contact{font-size:.82rem;font-weight:600;padding:12px 20px;min-height:46px}
.header-contact .icon{width:15px}
.nav-toggle{display:none;border:1px solid #cbbba3;border-radius:12px;background:#fffaef;width:42px;height:42px;color:var(--ink)}
.regular-top{padding-bottom:22px;background:#f8f4ec}

/* =========================================================
   2. Accueil
   ========================================================= */
.intro-stage{background:#f8f4ec;position:relative;isolation:isolate}
.hero-immersive{position:relative}
.hero-immersive:before{content:'';position:absolute;z-index:-1;left:0;right:0;top:-91px;bottom:0;background:linear-gradient(180deg,#f8f4ec61 0%,#f8f4ec52 45%,#f8f4ec8c 78%,#f8f4ec 100%),#f8f4ec var(--hero-book) no-repeat center top/cover}
/* Image réduite (fenêtre basse) : bords fondus dans le papier */
.hero-immersive.is-dezoomed:before{background:linear-gradient(180deg,#f8f4ec61 0%,#f8f4ec52 45%,#f8f4ec8c 78%,#f8f4ec 100%),linear-gradient(90deg,#f8f4ec,#f8f4ec00 10%,#f8f4ec00 90%,#f8f4ec) center top/calc(var(--hb) * 1.777) var(--hb) no-repeat,#f8f4ec var(--hero-book) no-repeat center top/auto var(--hb)}
.hero-shell{padding-bottom:18px}
/* La calligraphie prend la place restante : cartes et repères tiennent toujours dans le premier écran */
.hero-space{height:clamp(190px,min(28vw,100svh - 440px),410px)}
.hero-paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.path-card{min-height:230px;position:relative;display:block;border-radius:20px;overflow:hidden;box-shadow:0 16px 36px #3a2d2247;border:1px solid #ffffff8c;transition:transform .25s,box-shadow .25s}
.path-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px #3a2d2257}
.path-card img{position:absolute;inset:0;height:100%;object-fit:cover;filter:saturate(.95) brightness(.9);transition:transform .8s}
.path-card:hover img{transform:scale(1.04)}
.path-card:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 112% 135%,transparent 0 46%,#ffffff1c 46.2% 46.45%,transparent 46.7%),radial-gradient(circle at 125% 150%,transparent 0 58%,#ffffff12 58.2% 58.4%,transparent 58.6%),linear-gradient(0deg,#0f2539f2 0%,#10283cd1 42%,#10283c70 68%,#10283c14 100%);z-index:1}
.path-gold:before{background:radial-gradient(circle at 112% 135%,transparent 0 46%,#ffffff1c 46.2% 46.45%,transparent 46.7%),radial-gradient(circle at 125% 150%,transparent 0 58%,#ffffff12 58.2% 58.4%,transparent 58.6%),linear-gradient(0deg,#3b2715f2 0%,#5a3d20d1 42%,#7a552c70 68%,#7a552c14 100%)}
.path-sage:before{background:radial-gradient(circle at 112% 135%,transparent 0 46%,#ffffff1c 46.2% 46.45%,transparent 46.7%),radial-gradient(circle at 125% 150%,transparent 0 58%,#ffffff12 58.2% 58.4%,transparent 58.6%),linear-gradient(0deg,#0f3a31f2 0%,#174a3fd1 42%,#1f574a70 68%,#1f574a14 100%)}
.path-content{position:relative;z-index:2;padding:22px 24px;min-height:inherit;height:100%;display:flex;flex-direction:column;justify-content:flex-end;color:white}
.path-label{font-size:.7rem;font-weight:700;letter-spacing:.16em;color:#e7c18d}
.path-content h2{font-size:2rem;line-height:.98;margin:9px 0 7px}
.path-content p{font-size:.9rem;line-height:1.42;color:#f4efe6;margin-bottom:14px;max-width:34ch}
.path-link{align-self:flex-start;display:inline-flex;align-items:center;gap:12px;padding:8px 20px;border:1px solid #d6ae6c;border-radius:99px;font-size:.82rem;font-weight:700;color:#f0cf92;transition:background .2s}
.path-card:hover .path-link{background:#d6ae6c26}
.path-link .icon{width:15px}
.proofs{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:#fff8e9bd;border-radius:17px;border:1px solid #fefbf7be;backdrop-filter:blur(16px);margin-top:15px;box-shadow:0 6px 20px #7760420d}
.proof{display:flex;align-items:center;gap:12px;padding:10px 14px}
.proof:not(:last-child){border-right:1px solid #cfbfa9}
.proof-illus{width:48px;height:48px;object-fit:contain;flex-shrink:0}
.proof strong{display:block;font-size:.83rem;white-space:nowrap}
.proof small{display:block;font-size:.73rem;color:#5c6c78;line-height:1.35;margin-top:3px}
.invitation{padding:17px 0 10px;background:#f8f4ec}
.invitation-panel{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 0 100%,#3e69704a,transparent 58%),linear-gradient(115deg,#193047 0%,#22485b 56%,#13293f 100%);border-radius:28px;padding:clamp(30px,3.2vw,42px) clamp(26px,3.4vw,44px);display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr) minmax(0,.78fr);grid-template-areas:"heading copy aside" "actions copy aside";grid-template-rows:1fr auto;column-gap:clamp(28px,4vw,56px);row-gap:40px;min-height:430px;color:#edf4f8}
/* Cercles décoratifs en bas à droite */
.invitation-panel:before,.invitation-panel:after{content:'';position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.invitation-panel:before{width:680px;height:680px;right:-190px;bottom:-400px;background:#ffffff07;border:1px solid #ffffff0f}
.invitation-panel:after{width:460px;height:460px;right:-100px;bottom:-232px;background:linear-gradient(160deg,#0e2336b3,#0f2537f0);border:1px solid #ffffff14}
.invitation-heading{grid-area:heading;align-self:center}
.invitation-heading h2{margin:0;color:#fff;font-size:clamp(2rem,2.8vw,2.55rem);line-height:1.04;padding-left:30px;border-left:3px solid #c9a05c}
.invitation-copy{grid-area:copy}
.invitation-copy p{font-size:.96rem;line-height:1.66;margin:0;color:#e8eef2}
.invitation-copy p:first-child{padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid #ffffff33}
.invitation-action{grid-area:actions;display:flex;flex-direction:column;gap:14px}
.invitation-action a{width:100%;min-height:52px;font-size:.88rem;padding-inline:24px}
.invitation-aside{grid-area:aside;align-self:start;margin-top:clamp(0px,5.4vw,76px)}
.invitation-aside summary{list-style:none;display:flex;align-items:center;gap:10px;padding:8px 18px 8px 12px;border-radius:99px;background:#eceeeadb;border:1px solid #ffffff66;color:#8a612c;font-weight:700;font-size:.88rem;cursor:pointer;transition:background .2s}
.invitation-aside summary::-webkit-details-marker{display:none}
.invitation-aside summary:hover,.invitation-aside[open] summary{background:#f8f5eef2}
.invitation-aside summary .icon{width:22px;height:22px;stroke-width:1.6;color:#a37d40}
.distinct-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.distinct-list a{display:block;padding:12px 15px;border-radius:15px;background:#ffffff10;border:1px solid #ffffff21;color:#f3e6cc;font:600 1.05rem/1.28 var(--serif);transition:background .2s}
.distinct-list a:hover{background:#ffffff1f}

/* =========================================================
   3. Contact, pied de page, pages utilitaires
   ========================================================= */
.contact-section{padding:13px 0 36px;background:#f8f4ec}
.contact-shell{display:grid;grid-template-columns:1.02fr 1fr;background:#fefbf5;border-radius:26px;overflow:hidden;box-shadow:var(--shadow)}
.meeting-card{min-height:610px;position:relative;background:#bfa584;overflow:hidden}
.meeting-card>img{width:100%;height:100%;object-fit:cover;object-position:center}
.meeting-card:after{content:'';position:absolute;inset:40% 0 0;background:linear-gradient(180deg,transparent,#0e273c73 40%,#0e273ce6);pointer-events:none}
.meeting-quote{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:28px;color:white;max-width:490px}
.meeting-quote blockquote{font:italic 600 clamp(1.55rem,2.4vw,2.6rem)/1.04 var(--serif);margin:0 0 16px}
.meeting-quote>span{font-size:.72rem;letter-spacing:.15em;color:#f0ca8e;font-weight:700}
.form-card{padding:34px 32px 28px}
.form-card h2{font-size:clamp(2.55rem,4vw,4rem);margin:0 0 8px}
.contact-intro{font:600 1.52rem/1.1 var(--serif);margin-bottom:14px}
.contact-detail{font-size:.85rem;line-height:1.55;color:#667580}
.form-fields{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.form-fields label{display:flex;flex-direction:column;gap:5px;font-weight:700;font-size:.75rem;color:#465a66}
.form-fields .wide{grid-column:1/-1}
.form-fields input,.form-fields select,.form-fields textarea{border-radius:10px;border:1px solid #d9d1c4;padding:11px 13px;font:400 .86rem var(--sans);outline:none;background:#fffdfa;color:#20394b;max-width:100%}
.form-fields textarea{resize:vertical;min-height:95px}
.form-fields input:focus,.form-fields select:focus,.form-fields textarea:focus{border-color:#a78b60;box-shadow:0 0 0 3px #cfb88740}
.button-submit{margin-top:16px;width:100%}
.bot-field{position:absolute;left:-9999px;top:auto}
.site-footer{background:#f0e9df;border-top:1px solid #e7dccb}
.footer-inner{padding:19px 0;display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap}
.footer-brand{display:flex;align-items:center;gap:10px;color:#8b6832;font:700 1.35rem var(--serif)}
.footer-brand img{width:38px;height:38px}
.footer-inner nav{display:flex;flex-wrap:wrap;gap:15px}
.footer-inner nav a{font-size:.78rem;color:#566874}
.footer-inner nav a:hover{text-decoration:underline}
.footer-inner small{font-size:.72rem;color:#879096}
.contact-page-intro{padding:50px 0 25px}
.contact-page-intro p:not(.kicker){max-width:58ch;color:#596c79}
.confirm-page{padding:90px 0}
.confirm-box{background:#fffaf1;max-width:700px;margin:0 auto;padding:48px;border-radius:25px;box-shadow:var(--shadow)}
.confirm-box h1{font-size:3.5rem}
.confirm-box p{color:#5c6c78}

.header-over{position:absolute;top:0;left:0;right:0}
.button-ghost{border-color:#23394a2e;background:#fffcf68c;color:var(--ink);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.button-ghost:hover{background:#fffcf6d9}

.hero-lead{font:600 clamp(1.35rem,2vw,1.9rem)/1.18 var(--serif);color:var(--gold-text);max-width:32ch;margin:0 0 28px}

/* =========================================================
   5. Rubriques — éléments partagés
   ========================================================= */

/* Boutons de fin de page */
.final-actions{display:flex;flex-wrap:wrap;gap:12px}

/* Puces (thèmes, profils) */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.chips li{padding:8px 14px;border-radius:99px;border:1px solid #d8c6a8;background:#fffcf6b3;font-size:.8rem;font-weight:600;color:#5a4a33}

/* Naissance d'Alif Genesis (Notre histoire) */
.birth{text-align:center;padding:clamp(40px,5vw,64px) 0 clamp(10px,2vw,20px)}
.birth img{width:84px;height:84px;margin:0 auto 18px}
.birth p{font:700 clamp(2.2rem,4vw,3.6rem)/1.05 var(--serif);color:var(--navy);margin:0 0 18px}
.birth p strong{font-weight:700}

@media print{.header-over{position:static}}

/* =========================================================
   6. Rubriques — « le carnet de route »
   Papier texturé, encre bleu nuit, annotations manuscrites, illustrations
   aquarelle faites pour Alif Genesis. Lecture de haut en bas le long d'un
   tracé qui se dessine au défilement ; chaque étape « s'allume » quand on l'atteint.
   ========================================================= */
.carnet{background:var(--grain),#f6efe3;color:var(--ink)}
.hand{font-family:var(--hand);font-weight:600;letter-spacing:0}
.hand--gold{color:#a8742c;font-size:1.55rem;line-height:1}

/* --- Hero : le schéma du chemin remplace la photo --- */
.carnet-hero{position:relative;padding:150px 0 70px;text-align:center;background:radial-gradient(ellipse 60% 50% at 15% 20%,#e9cf9a40,transparent 70%),radial-gradient(ellipse 55% 45% at 88% 70%,#9fbfae33,transparent 70%)}
.carnet-hero-copy{max-width:1080px;margin:0 auto}

.carnet-hero h1{font-size:clamp(2.4rem,4.2vw,3.9rem);line-height:1.04;margin:10px auto 14px;max-width:860px;text-wrap:balance;color:#1c2d40}
.carnet-hero .hero-lead{margin:0 auto;color:#8a5f26;max-width:none}
/* Sous-titre des rubriques : phrase courte, police simple et lisible */
.carnet-hero .hero-lead{max-width:52ch;font:500 clamp(1.08rem,1.4vw,1.25rem)/1.5 var(--sans);color:#4e5a66;text-wrap:balance}
/* Les trois formules de l'accueil, mêmes teintes que les cartes */
.offres{list-style:none;margin:18px auto 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:1080px;text-align:left}
.offres a{height:100%;display:flex;align-items:center;gap:14px;padding:12px 16px 12px 12px;border-radius:16px;background:var(--bg);box-shadow:0 10px 22px #10283c2e;color:#f4efe6;font-size:.95rem;line-height:1.35;transition:transform .2s,box-shadow .2s}
.offres a:hover{transform:translateY(-3px);box-shadow:0 16px 30px #10283c40}
.offres img{width:60px;height:60px;object-fit:contain;flex-shrink:0;padding:6px;border-radius:50%;background:#fffaf0;box-shadow:inset 0 0 0 2px var(--ring)}
.offres strong{display:block;margin-bottom:2px;font-size:1.02rem;color:#fff}
.offre-blue{--bg:linear-gradient(135deg,#1f3a52,#2f5675);--ring:#9db4cb}.offre-gold{--bg:linear-gradient(135deg,#6b4521,#9a6a2a);--ring:#e7c18d}.offre-sage{--bg:linear-gradient(135deg,#1c4a3e,#2f6b4f);--ring:#9fbfae}
.route-map{position:relative;margin:44px auto 34px;max-width:1240px}
.route-map-track{position:relative}
.route-map-hint{display:none}
.route-map ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,7),minmax(0,1fr));position:relative;z-index:1}
.route-map-path{position:absolute;left:0;top:0;width:100%;height:200px;overflow:visible}
.route-map-path path{fill:none;stroke:#b89255;stroke-width:2.4;stroke-dasharray:3 9;stroke-linecap:round;vector-effect:non-scaling-stroke}
.js .route-map-path{clip-path:inset(0 100% 0 0);animation:trace 2.2s .3s cubic-bezier(.45,.05,.3,1) forwards}
@keyframes trace{to{clip-path:inset(0 0 0 0)}}
.stop a{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 4px;color:var(--ink)}
.stop:nth-child(even) a{margin-top:80px}
.stop img{width:104px;height:104px;object-fit:contain;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.stop a:hover img{transform:translateY(-6px) rotate(-3deg) scale(1.06)}
.stop b{position:absolute;top:-4px;left:50%;margin-left:30px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#f3dcae;font:700 .8rem var(--sans);box-shadow:0 0 0 3px #f6efe3}
.stop .hand{font-size:1.45rem;line-height:1}
.stop--goal .hand{color:#2f6b4f}
.stop--start .hand{color:#8a7a66}
.js .stop{opacity:0;transform:translateY(14px) scale(.9);animation:pop .6s cubic-bezier(.3,1.5,.5,1) forwards}
.js .stop:nth-child(1){animation-delay:.35s}.js .stop:nth-child(2){animation-delay:.6s}.js .stop:nth-child(3){animation-delay:.85s}.js .stop:nth-child(4){animation-delay:1.1s}.js .stop:nth-child(5){animation-delay:1.35s}.js .stop:nth-child(6){animation-delay:1.6s}.js .stop:nth-child(7){animation-delay:1.85s}.js .stop:nth-child(8){animation-delay:2.1s}.js .stop:nth-child(9){animation-delay:2.35s}
@keyframes pop{to{opacity:1;transform:none}}
.carnet-hero-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}

/* --- Le tracé vertical et le pion --- */
.route{position:relative;isolation:isolate;width:min(900px,calc(100% - 32px));margin:0 auto;padding-bottom:40px}
.route-line{position:absolute;top:116px;height:calc(100% - 520px);left:60px;width:3px;margin-left:-1.5px;background:repeating-linear-gradient(180deg,#d7c19b 0 6px,transparent 6px 14px)}
.route-line i{position:absolute;left:0;top:0;width:100%;height:var(--p,0%);background:#b88a3e;border-radius:3px}
.route-pion{position:absolute;z-index:1;left:50%;top:var(--p,0%);width:46px;height:46px;margin:-23px 0 0 -23px;filter:drop-shadow(0 6px 10px #5b3f1a55);transition:transform .3s}
.route.is-moving .route-pion{transform:scale(1.06)}

/* --- Une étape : médaillon à gauche, contenu à droite, lecture verticale --- */
.etape{display:grid;grid-template-columns:120px minmax(0,1fr);column-gap:44px;padding:56px 0;scroll-margin-top:40px}
.etape-medal{position:sticky;top:110px;align-self:start;width:120px;height:120px;border-radius:50%;display:grid;place-items:center;background:#fffaf0;border:2px dashed #d7c19b;box-shadow:0 10px 26px #5b3f1a1f;transition:border-color .5s,box-shadow .5s;z-index:3}
.etape-medal:before{content:'';position:absolute;inset:-18px;border-radius:50%;background:radial-gradient(circle,var(--wash) 0,transparent 68%);z-index:-1;opacity:0;transition:opacity .8s}
.etape-medal img{width:84px;height:84px;object-fit:contain;filter:grayscale(1) sepia(.25);opacity:.55;transform:scale(.9);transition:filter .7s,opacity .7s,transform .7s cubic-bezier(.3,1.6,.5,1)}
.etape-medal b{position:absolute;right:-4px;top:-4px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#e8dcc8;color:#8a7a66;font:700 .9rem var(--sans);transition:background .5s,color .5s}
.etape.is-reached .etape-medal{border:2px solid #c9a05c;box-shadow:0 14px 30px #5b3f1a2e}
.etape.is-reached .etape-medal:before{opacity:1}
.etape.is-reached .etape-medal img{filter:none;opacity:1;transform:none}
.etape.is-reached .etape-medal b{background:var(--ink);color:#f3dcae}
.tone-blue{--wash:#9db4cb66;--tone:#2f5675}
.tone-gold{--wash:#e9cf9a80;--tone:#9a6a2a}
.tone-sage{--wash:#9fbfae70;--tone:#2f6b4f}
.tone-terra{--wash:#e3a98366;--tone:#a0522d}

.etape-body{min-width:0;max-width:700px}
.etape-body>*{margin-top:0;margin-bottom:0}
.etape-body>*+*{margin-top:24px}
.etape-body>h2{margin-top:8px;font-size:clamp(2rem,3.4vw,2.9rem);line-height:1.05;text-wrap:balance;color:#1c2d40}
.etape-body>h2+.etape-lead{margin-top:10px}
.etape-body>.tape{margin-top:44px}
.etape-lead{font-size:1.15rem;color:#5a6672}
.mini-label{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#8a7a66}
.etape-body>.mini-label+*{margin-top:12px}
.etape-foot{font-size:.95rem;color:#5a6672}

/* Ruban adhésif doré (purement décoratif, ne décale rien) */
.tape{position:relative}
.tape:before{content:'';position:absolute;top:-13px;left:50%;width:120px;height:26px;margin-left:-60px;transform:rotate(-2.5deg);background:repeating-linear-gradient(-45deg,#ead39fd9 0 7px,#e2c58bd9 7px 14px);box-shadow:0 1px 3px #5b3f1a1a;pointer-events:none}

/* Étape 1 : la fiche de l'élève, page de carnet lignée */
.fiche{padding:30px 30px 24px;background:radial-gradient(circle,#b9c7d6 1px,transparent 1.3px) 0 0/22px 22px,#fffdf7;border-radius:4px 4px 6px 6px;box-shadow:0 1px 0 #e8dcc8,0 16px 34px #5b3f1a1f}
.fiche-title{margin:0 0 14px;font-size:1.75rem;color:var(--ink)}
.jauge{display:grid;grid-template-columns:130px minmax(0,1fr) 110px;align-items:center;gap:14px;padding:6px 0}
.jauge-label{font-weight:700}
.jauge-bar{height:18px;border:2px solid var(--ink);border-radius:20px 14px 18px 12px;background:#fff;overflow:hidden}
.jauge-bar i{display:block;height:100%;width:var(--w);border-radius:inherit;transform-origin:left;transition:transform 1.3s .3s cubic-bezier(.2,.7,.2,1)}
.jauge-bar--blue i{background:repeating-linear-gradient(-45deg,#7f9fbd 0 6px,#91afca 6px 12px)}
.jauge-bar--gold i{background:repeating-linear-gradient(-45deg,#d9b46a 0 6px,#e5c47f 6px 12px)}
.js .etape:not(.is-reached) .jauge-bar i{transform:scaleX(0)}
.jauge-note{font-size:1.4rem;color:var(--tone,#9a6a2a);line-height:1}
.fiche-foot{margin:16px 0 0;font-size:1.6rem;color:#a8742c;text-align:right}
.metier{font-size:1.2rem;line-height:1.6}
.hand-words{display:block;margin-top:4px;font-family:var(--hand);font-weight:700;font-size:1.9rem;line-height:1.25;color:var(--ink)}
.hand-words span{padding-bottom:2px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7c25-4 55-5 116-2' fill='none' stroke='%23C9A05C' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") left bottom/100% 9px no-repeat}
.regards{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.regards li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:16px 10px 14px;background:#fffdf7;border-radius:6px;box-shadow:0 1px 0 #e8dcc8,0 8px 18px #5b3f1a14;font-weight:600;font-size:.95rem;line-height:1.25}
.regards img{width:70px;height:70px;object-fit:contain}

/* Volets « En savoir plus » */
.more{border-top:1.5px dashed #d7c19b;padding-top:4px}
.more summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:10px 0;font:700 1.45rem var(--hand);color:#8a5f26}
.more summary::-webkit-details-marker{display:none}
.more summary .icon{width:16px;transition:transform .25s}
.more[open] summary .icon{transform:rotate(180deg)}
.more-body{padding:4px 0 6px}
.more-body p{color:#4e5a66;font-size:1rem;line-height:1.7}
.more-body p:last-child{margin-bottom:0}
.more--inline{margin-top:12px;border-top:1px dashed #0000001f}
.more--inline summary{font-size:1.3rem;color:var(--tone)}

/* Étape 2 : trois profils, chacun son dessin */
.choix{display:grid;grid-template-columns:110px minmax(0,1fr);gap:22px;align-items:start;padding:22px 24px;border-radius:6px;background:#fffdf7;box-shadow:0 1px 0 #e8dcc8,0 12px 26px #5b3f1a17;border-left:5px solid var(--tone)}
.etape-body>.choix+.choix{margin-top:16px}
.choix img{width:110px;height:96px;object-fit:contain}
.choix-q{margin:0;font-weight:700;font-size:1.05rem}
.choix-dir{margin:6px 0 2px;font-size:1.65rem;color:var(--tone);line-height:1}
.choix-a{margin:0;font:600 1.4rem/1.2 var(--serif)}

/* Étape 3 : les 4 niveaux */
.niveaux{list-style:none;padding:0;display:grid;gap:14px}
.niveaux li{display:grid;grid-template-columns:84px minmax(0,1fr);gap:20px;align-items:center;padding:16px 20px;background:#fffdf7;border-radius:6px;box-shadow:0 1px 0 #e8dcc8,0 8px 18px #5b3f1a12}
.niveaux img{width:84px;height:76px;object-fit:contain}
.niveaux .hand{margin:0;font-size:1.35rem;color:#2f6b4f;line-height:1}
.niveaux h3{margin:2px 0 4px;font-size:1.55rem;color:#1c2d40}
.niveaux li p:last-child{margin:0;color:#5a6672;font-size:.95rem}

/* Étape 4 : l'étiquette de prix */
.etiquette{position:relative;width:fit-content;max-width:100%;padding:24px 40px 22px 62px;background:#fffdf7;border-radius:6px 26px 26px 6px;box-shadow:0 1px 0 #e8dcc8,0 16px 32px #5b3f1a1f;border:1.5px solid #e2cfaa}
.etiquette:before{content:'';position:absolute;left:22px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:#f6efe3;box-shadow:inset 0 1px 3px #5b3f1a40;border:1.5px solid #d7c19b}
.etiquette .hand{margin:0;font-size:1.5rem;color:#a0522d;line-height:1}
.etiquette-prix{margin:2px 0 6px;font:700 clamp(3.6rem,6vw,4.8rem)/1 var(--serif);color:#1c2d40}
.etiquette-prix span{font:600 1rem var(--sans);color:#5a6672;margin-left:8px}
.etiquette p:last-child{margin:0;color:#5a6672;font-size:.95rem;max-width:38ch}
.facons{list-style:none;padding:0;display:grid;gap:10px}
.facons li{position:relative;padding-left:34px;font-size:1.05rem;font-weight:600}
.facons li:before{content:'';position:absolute;left:2px;top:3px;width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0522d' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3 12c5 0 11 0 17-1M14 5c2 2 5 5 6 6-2 2-4 4-6 7'/%3E%3C/svg%3E") center/contain no-repeat}

/* Étape 5 : Vous + Nous = Résultat, l'engagement et la lettre */
.equation{display:grid;gap:6px}
.eq{padding:18px 22px;border-radius:6px;background:#fffdf7;box-shadow:0 1px 0 #e8dcc8,0 8px 18px #5b3f1a12}
.eq .hand{margin:0 0 2px;font-size:1.6rem;line-height:1}
.eq p:last-child{margin:0;font:600 1.3rem/1.25 var(--serif)}
.eq--you .hand{color:#2f6b4f}.eq--us .hand{color:#2f5675}
.eq--result{display:grid;grid-template-columns:76px minmax(0,1fr);gap:16px;align-items:center;background:linear-gradient(135deg,#f8e6c2,#efd29b)}
.eq--result img{width:76px;height:96px;object-fit:contain}
.eq--result .hand{color:#7a5420}
.eq-sign{justify-self:center;font:700 2.2rem/1 var(--hand);color:#b88a3e}
.pacte{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pacte>div{padding:18px 22px;background:#fffdf7;border-radius:6px;box-shadow:0 1px 0 #e8dcc8,0 8px 18px #5b3f1a12}
.pacte .hand{margin:0 0 10px;font-size:1.55rem;color:#a8742c;line-height:1}
.coches{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.coches li{position:relative;padding-left:36px;font-weight:600}
.coches li:before{content:'';position:absolute;left:0;top:-2px;width:24px;height:24px;border:2px solid #b8a27f;border-radius:5px 7px 5px 6px;background:#fff}
.coches li:after{content:'';position:absolute;left:3px;top:-6px;width:26px;height:26px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none' stroke='%231f2f4a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14c2 2 4 4 6 7C13 13 17 7 24 2'/%3E%3C/svg%3E") center/contain no-repeat;clip-path:inset(0 0 0 0);transition:clip-path .45s}
.coches li:nth-child(2):after{transition-delay:.3s}.coches li:nth-child(3):after{transition-delay:.6s}
.js .etape:not(.is-reached) .coches li:after{clip-path:inset(0 100% 0 0)}
.lettre{margin-inline:0;padding:32px 30px 22px;background:#fffdf7;border-radius:4px;box-shadow:0 1px 0 #e8dcc8,0 18px 36px #5b3f1a1f}
.lettre-head{margin-bottom:10px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#a8742c}
.lettre blockquote{margin:0;font:italic 600 clamp(1.4rem,2.3vw,1.85rem)/1.3 var(--serif);color:#3d3020}
.lettre-sign{margin:14px 0 0;text-align:right;font-size:1.9rem;color:var(--ink)}

/* --- Blocs communs aux autres rubriques --- */
.carnet-intro{padding:10px 0 20px}
.carnet-narrow{width:min(760px,calc(100% - 32px));margin:0 auto}
.carnet-narrow>*+*{margin-top:26px}
.intro-head{text-align:center;padding-top:30px}
.intro-head h2{margin:6px 0 10px;font-size:clamp(2rem,3.4vw,2.9rem);color:#1c2d40;text-wrap:balance}
.intro-head .etape-lead{margin:0 auto;max-width:52ch}
.etape-actions{display:flex;flex-wrap:wrap;gap:10px}
.hand-statement{font-family:var(--hand);font-weight:700;font-size:clamp(1.7rem,2.6vw,2.15rem);line-height:1.2;color:var(--ink);padding:6px 0 6px 22px;border-left:3px solid #c9a05c}
.note{display:flex;gap:18px;align-items:center;padding:18px 22px;background:#fffdf7;border-radius:6px;box-shadow:0 1px 0 #e8dcc8,0 10px 22px #5b3f1a14}
.note img{width:84px;height:84px;object-fit:contain;flex-shrink:0}
.note p{margin:0;font-size:1.02rem;line-height:1.55}
.note--hand p{font:600 1.65rem/1.2 var(--hand);color:var(--ink)}
.etape-illus{width:min(260px,70%);height:auto}

/* Photo de club façon polaroïd */
.polaroid{width:min(440px,100%);margin:0;padding:12px 12px 10px;background:#fff;box-shadow:0 2px 0 #e8dcc8,0 18px 34px #5b3f1a26}
.polaroid img{aspect-ratio:4/3;object-fit:cover}
.polaroid figcaption{padding-top:8px;font-size:1.55rem;color:var(--ink);text-align:center;line-height:1}
.polaroid--l{transform:rotate(-1.2deg)}
.polaroid--r{transform:rotate(1deg)}

/* Coupures de presse (Journal) */
.clipping{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;align-items:center;padding:20px 24px;background:#fffdf7;border-radius:4px;box-shadow:0 1px 0 #e8dcc8,0 12px 26px #5b3f1a17}
.carnet-narrow>.clipping+.clipping{margin-top:14px}
.clipping img{width:96px;height:96px;object-fit:contain}
.clipping-kicker{margin:0;font-size:1.4rem;color:#a8742c;line-height:1}
.clipping h3{margin:4px 0 4px;font-size:1.6rem;line-height:1.1;color:#1c2d40}
.clipping-meta{margin:0 0 8px;color:#5a6672;font-size:.92rem}
.clipping--feature{grid-template-columns:150px minmax(0,1fr);padding:28px 30px}
.clipping--feature img{width:150px;height:130px}
.clipping--feature h3{font-size:clamp(1.8rem,2.8vw,2.3rem)}

/* Notre histoire : le prologue et la naissance */
.prologue-text{font:500 clamp(1.4rem,2.3vw,1.9rem)/1.35 var(--serif);color:var(--ink);margin:0}
.prologue-text .hand{display:block;margin-top:10px;font-size:1.25em;font-weight:700;color:#a8742c}
.etape-body .birth{text-align:center;padding:26px 0 0}
.etape-body .birth img{width:84px;height:84px;margin:0 auto 12px}
.etape-body .birth p{font:700 clamp(1.9rem,3.2vw,2.6rem)/1.1 var(--serif);color:#1c2d40;margin:0}

/* --- L'arrivée : l'arbre en fleurs --- */
.arrivee{position:relative;padding:40px 0 30px;text-align:center}
.arrivee-arbre{position:relative;z-index:2;width:190px;margin:0 auto -54px;filter:drop-shadow(0 10px 14px #5b3f1a26)}
.js .arrivee:not(.is-reached) .arrivee-arbre{transform:scale(.6);opacity:.3;filter:grayscale(1)}
.arrivee-arbre{transition:transform .9s cubic-bezier(.3,1.5,.5,1),opacity .6s,filter .9s}
.arrivee-panel{position:relative;overflow:hidden;padding:78px clamp(24px,5vw,60px) 44px;border-radius:28px;background:var(--navy-panel);color:#edf4f8;box-shadow:0 24px 50px #10283c2e}
.arrivee-panel:after{content:'';position:absolute;right:-70px;top:-70px;width:260px;height:260px;background:var(--seal) center/contain no-repeat;opacity:.07;pointer-events:none}
.arrivee-badge{margin:0 0 8px;font-size:1.9rem;color:#f0cf92}
.arrivee-panel h2{margin:0 auto 14px;max-width:24ch;color:#fff;font-size:clamp(2rem,3.4vw,2.9rem);text-wrap:balance}
.arrivee-panel p:not(.hand){margin:0 auto 24px;max-width:56ch;color:#dde6eb}
.arrivee .final-actions{justify-content:center}


/* =========================================================
   Le Journal d'Alif : sommaire façon kiosque + page article
   ========================================================= */
.masthead{padding:106px 0 4px;text-align:center}
.masthead-title{display:flex;align-items:center;justify-content:center;gap:clamp(12px,3vw,34px);padding:14px 0;margin-top:8px;border-top:3px double #b89255;border-bottom:3px double #b89255}
.masthead-title img{width:clamp(48px,6vw,80px);height:auto}
.masthead h1{margin:0;font-size:clamp(2.4rem,4.4vw,3.8rem);line-height:1;letter-spacing:-.01em;color:#1c2d40}
.masthead-tagline{margin:14px 0 0;font:italic 600 clamp(1.25rem,2vw,1.6rem) var(--serif);color:#8a5f26}
.kiosque{padding:20px 0 30px}
.kiosque .mini-label{margin:0}
.kiosque .carnet-narrow>.mini-label+*{margin-top:12px}
.badge{display:inline-block;padding:4px 11px;border-radius:99px;background:#e8eff5;color:#2f5675;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.badge--gold{background:#f6e3bd;color:#7a5420}
.une{background:#fffdf7;border-radius:6px;box-shadow:0 1px 0 #e8dcc8,0 20px 42px #5b3f1a1f}
.une-link{display:grid;grid-template-columns:150px minmax(0,1fr);gap:26px;align-items:center;padding:30px 32px;color:var(--ink)}
.une-link img{width:150px;height:auto}
.une h2{margin:10px 0 10px;font-size:clamp(2.1rem,3.6vw,3rem);line-height:1.04;color:#1c2d40}
.une-chapeau{margin:0 0 10px;font:600 1.2rem/1.4 var(--serif);color:#3d3020}
.une .button{margin-top:10px}
.papier{background:#fffdf7;border-radius:6px;box-shadow:0 1px 0 #e8dcc8,0 10px 22px #5b3f1a14;transition:transform .25s,box-shadow .25s}
.papier:hover,.une:hover{transform:translateY(-3px);box-shadow:0 1px 0 #e8dcc8,0 18px 32px #5b3f1a22}
.carnet-narrow>.papier+.papier{margin-top:14px}
.papier-link{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;align-items:center;padding:20px 24px;color:var(--ink)}
.papier-link img{width:96px;height:auto}
.papier h3{margin:8px 0 6px;font-size:1.65rem;line-height:1.08;color:#1c2d40}
.papier-chapeau{margin:0 0 6px;color:#4e5a66;font-size:.98rem}
.papier-auteur{margin:0;font-weight:700;font-size:.88rem;color:#8a5f26}
.papier-cta{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-weight:700;font-size:.85rem;color:#8a612c}
.papier-cta .icon{width:15px}
.voir-tout{text-align:center;padding-top:6px}
.journal-index .arrivee{padding:56px 0 40px}

.article-page{padding:130px 0 60px}
.article{width:min(720px,calc(100% - 32px));margin:0 auto}
.article>*+*{margin-top:18px}
.article-back{display:inline-block;font-weight:700;font-size:.9rem;color:#8a612c}
.article h1{margin:6px 0 0;font-size:clamp(2.4rem,5vw,3.8rem);line-height:1.04;color:#1c2d40;text-wrap:balance}
.article-chapeau{font:600 clamp(1.25rem,2vw,1.5rem)/1.4 var(--serif);color:#5a4428}
.byline{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid #e2d4be;border-bottom:1px solid #e2d4be}
.byline img{width:48px;height:48px}
.byline strong{display:block}
.byline span{font-size:.88rem;color:#5a6672}
.article-cover{margin:26px 0 0;display:flex;justify-content:center;align-items:flex-end;gap:30px;padding:24px;background:radial-gradient(ellipse at 50% 70%,#e9cf9a55,transparent 70%)}
.article-cover img{width:min(170px,38%);height:auto}
.sommaire{padding:18px 22px;background:#fffdf7;border-radius:6px;box-shadow:0 1px 0 #e8dcc8,0 8px 18px #5b3f1a12}
.sommaire ol{margin:10px 0 0;padding-left:22px}
.sommaire li{margin:6px 0;font-weight:600}
.sommaire a{color:var(--ink);border-bottom:1px solid #d9c6a6}
.sommaire a:hover{color:#8a5f26}
.article-body{font-size:1.08rem;line-height:1.75;color:#2f3b46}
.article-body>p{margin:0 0 1.1em}
.article-body>p:first-child::first-letter{float:left;font:700 4.2em/.8 var(--serif);color:#b88a3e;margin:.06em .12em 0 0}
.article-body h2{display:flex;align-items:center;gap:16px;margin:44px 0 16px;font-size:clamp(1.7rem,2.8vw,2.3rem);line-height:1.1;color:#1c2d40;scroll-margin-top:30px}
.article-body h2 img{width:64px;height:64px;object-fit:contain;flex-shrink:0}
.article-body h2 span{text-wrap:balance;hyphens:none}
.article-quote{margin:26px 0;padding:6px 0 6px 22px;border-left:3px solid #c9a05c;font:italic 600 clamp(1.4rem,2.3vw,1.8rem)/1.3 var(--serif);color:#5a4428}
.article-key{padding:14px 18px;background:#f6ecdc;border-radius:6px}
.article-body .chips{margin:0 0 1.1em}
.article-sign{margin:30px 0 0;text-align:right;font-size:2rem;color:var(--ink)}
.article-cta{display:grid;grid-template-columns:90px minmax(0,1fr);gap:20px;align-items:center;margin-top:40px!important;padding:22px 26px;background:#fffdf7;border-radius:6px;box-shadow:0 1px 0 #e8dcc8,0 14px 30px #5b3f1a17}
.article-cta img{width:90px;height:auto}
.article-cta .hand{margin:0 0 10px;font-size:1.7rem;color:#a8742c;line-height:1}

/* Articles rapatriés du Quartier médiatique */
.avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;background:linear-gradient(135deg,#e9ca8a,#c59650);color:#173247;font:700 1.05rem var(--serif)}
.byline div>span{display:block}
.byline-link{margin-left:8px;font-size:.8rem;font-weight:700;color:#8a612c;display:inline-flex;align-items:center;gap:4px}
.byline-link .icon{width:12px;height:12px}
.article-body--externe h3{margin:26px 0 10px;font-size:1.55rem;line-height:1.15;color:#1c2d40}
.article-body--externe h4{margin:0 0 10px;font:700 1rem var(--sans);color:#1c2d40}
.article-body--externe ul,.article-body--externe ol{margin:0 0 1.1em;padding-left:22px}
.article-body--externe li{margin:6px 0}
.article-body--externe>section{scroll-margin-top:30px}
.article-body--externe>section>h2,.article-body--externe>h2{display:block}
.article-body--externe blockquote{margin:26px 0;padding:6px 0 6px 22px;border-left:3px solid #c9a05c;font:italic 600 clamp(1.3rem,2.1vw,1.65rem)/1.35 var(--serif);color:#5a4428}
.verset{margin:24px 0;padding:22px 24px;border-radius:6px;background:#fffdf7;box-shadow:0 1px 0 #e8dcc8,0 10px 22px #5b3f1a14;text-align:center}
.verset .arabe{margin:0 0 10px;font:400 clamp(1.6rem,3vw,2.1rem)/1.7 'Amiri',serif;color:#1c2d40}
.verset .traduction{margin:0 0 6px;font:italic 600 1.2rem/1.4 var(--serif);color:#5a4428}
.verset .source{margin:0;font-size:.82rem;font-weight:700;letter-spacing:.04em;color:#8a7a66}
.sigle{font-family:'Amiri',serif}
.exemple{margin:30px 0;padding:22px 24px;border-radius:6px;background:#fffdf7;border-left:5px solid #c9a05c;box-shadow:0 1px 0 #e8dcc8,0 10px 22px #5b3f1a14;scroll-margin-top:30px}
.exemple .exemple-label{margin:0;font-size:1.5rem;color:#a8742c;line-height:1}
.exemple h3{margin-top:6px}
.impact{display:inline-block;padding:6px 14px;border-radius:99px;background:#f6ecdc;font-weight:700;color:#7a5420}
.encadre{margin:22px 0;padding:18px 20px;border-radius:6px;background:#eef3f7;border:1px dashed #9db4cb}
.encadre p:last-child,.encadre ul:last-child{margin-bottom:0}
.encadre--ref{background:#f6ecdc;border-color:#d7c19b;font-size:.98rem}
.checklist{list-style:none;padding-left:0!important}
.checklist li{position:relative;padding-left:30px}
.checklist li:before{content:'';position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:5px;border:2px solid #2f6b5c;background:#2f6b5c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/11px no-repeat}
.article-signature{padding:18px 0;border-top:1px solid #e2d4be}
.article-signature p{margin:0;color:#5a6672}
.article-signature .hand{font-size:1.9rem;color:var(--ink);line-height:1.1}
.article-origine{margin-top:6px!important;font-size:.88rem;font-style:italic}
.tags{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tags li{padding:6px 12px;border-radius:99px;background:#fffdf7;border:1px solid #e2d4be;font-size:.8rem;font-weight:600;color:#5a4a33}
.episodes{padding:20px 22px;background:#fffdf7;border-radius:6px;box-shadow:0 1px 0 #e8dcc8,0 10px 22px #5b3f1a14}
.episodes h2{margin:0 0 12px}
.episodes ol{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
.episode,.episode a{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center}
.episode{padding:10px 12px;border-radius:6px;background:#f6efe3;color:#8a7a66}
.episode.is-dispo{padding:0;background:#e6f0ea}
.episode.is-dispo a{grid-column:1/-1;padding:10px 12px;color:var(--ink)}
.episode b{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#e8dcc8;color:#8a7a66;font:700 .9rem var(--sans)}
.episode.is-dispo b{background:#2f6b4f;color:#fff}
.episode strong{display:block;font-size:.98rem}
.episode em{font-style:normal;font-size:.8rem}
.episode.is-dispo em{color:#2f6b4f;font-weight:700}
.article-cta p:not(.hand){margin:0 0 12px;color:#5a6672}

/* Sceau Alif Genesis « tamponné » sur les éléments importants (mot de la Fondatrice, éditorial, fins de parcours).
   Il s'imprime avec un petit rebond quand l'élément arrive à l'écran. */
.stamped{position:relative}
.stamped::after{content:'';position:absolute;z-index:3;top:-38px;right:-28px;width:100px;height:100px;background:var(--seal) center/contain no-repeat;filter:drop-shadow(0 8px 12px #3a2a1266);pointer-events:none;transition:opacity .18s ease-out,transform .55s cubic-bezier(.3,1.8,.45,1)}
.js .stamped:not(.is-stamped)::after{opacity:0;transform:scale(1.9)}
.stamped--in::after{top:18px;right:20px;width:88px;height:88px}
.stamped--sm::after{top:-14px;right:0;width:70px;height:70px}
.arrivee-panel.stamped::after{opacity:1;top:18px;right:20px;width:88px;height:88px;background:var(--seal) center/contain no-repeat}
.meeting-quote.stamped{position:absolute}
.meeting-quote.stamped::after{top:auto;bottom:14px;right:-78px;width:88px;height:88px}
.lettre.stamped{padding-right:64px}

/* Le Journal : une de magazine, tous les contenus visibles d'un coup d'œil */
.masthead .hand{margin:0}
.hadith{margin:10px auto 0;max-width:900px;padding:9px 26px;border-radius:99px;background:linear-gradient(115deg,#193047,#22485b 60%,#13293f);box-shadow:0 10px 24px #10283c2e;text-align:center}
.hadith blockquote{margin:0;font:italic 600 clamp(1.05rem,1.6vw,1.3rem)/1.35 var(--serif);color:#f5dfb8}
.hadith .ar{font:700 1.2em 'Amiri',serif;font-style:normal;color:#e9ca8a}
.hadith figcaption{margin-top:2px;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#c8d5dd}
.kiosque{padding:14px 0 34px}
.kchips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:14px}
.kchip{display:inline-flex;align-items:center;gap:6px;padding:7px 8px 7px 14px;border-radius:99px;border:1.5px solid #e2d4be;background:#fffdf7;color:var(--ink);font-weight:700;font-size:.86rem;transition:background .2s,color .2s,border-color .2s}
.kchip b{min-width:22px;height:22px;padding:0 6px;border-radius:99px;display:inline-grid;place-items:center;background:#f1e9dc;font-size:.72rem}
.kchip:hover{border-color:#c59650}
.kchip.is-on{background:#173247;border-color:#173247;color:#fff}
.kchip.is-on b{background:#e9ca8a;color:#173247}
.kgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.kcard{--c:#1f3a52;position:relative;border-radius:18px;background:#fffdf7;box-shadow:0 10px 24px #5b3f1a17;transition:transform .25s,box-shadow .25s}
.kcard:hover{transform:translateY(-4px);box-shadow:0 18px 34px #5b3f1a26}
.kcard[hidden]{display:none}
.kcard>a,.kcard-inner{display:flex;flex-direction:column;height:100%;color:var(--ink)}
.kcard-top{position:relative;height:96px;display:grid;place-items:center;border-radius:18px 18px 0 0;background:radial-gradient(circle at 25% 15%,#ffffff33,transparent 55%),var(--c)}
.kcard-top img{width:78px;height:78px;object-fit:contain;filter:drop-shadow(0 6px 10px #00000033);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.kcard:hover .kcard-top img{transform:scale(1.08) rotate(-3deg)}
.kbadge{position:absolute;left:12px;top:12px;padding:4px 10px;border-radius:99px;background:#fffdf7;color:var(--c);font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.kcard-body{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.kcat{margin:0 0 4px;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--c)}
.kcard h3{margin:0 0 8px;font-size:1.28rem;line-height:1.15;color:#1c2d40}
.kmeta{margin:auto 0 0;padding-top:6px;font-size:.8rem;color:#5a6672}
.kprog{height:8px;border-radius:99px;background:#efe6d6;overflow:hidden;margin:2px 0 4px}
.kprog i{display:block;height:100%;border-radius:inherit;background:var(--c)}
.kprog-txt{margin:0;font-size:.75rem;font-weight:700;color:var(--c)}
.kcard.tone-gold{--c:#a8742c}.kcard.tone-navy{--c:#1f3a52}.kcard.tone-terra{--c:#a0522d}.kcard.tone-plum{--c:#5d3f6e}
.kcard.tone-teal{--c:#23646e}.kcard.tone-sage{--c:#2f6b4f}.kcard.tone-brick{--c:#8a3b3b}.kcard.tone-slate{--c:#7a8792}
.kcard--une{grid-column:span 2;grid-row:span 2}
.kcard--une .kcard-top{height:170px;background:radial-gradient(circle at 25% 15%,#ffffff55,transparent 55%),linear-gradient(135deg,#efd49b,#b8863e)}
.kcard--une .kcard-top img{width:136px;height:136px}
.kcard--une .kbadge{color:#7a5420}
.kcard--une h2{margin:0 0 10px;font-size:clamp(1.9rem,2.8vw,2.5rem);line-height:1.05;color:#1c2d40}
.kchapeau{margin:0 0 8px;font:600 1.12rem/1.4 var(--serif);color:#3d3020}
.kcard--une .button{align-self:flex-start;margin-top:14px}
.kcard--une.stamped::after{top:auto;bottom:16px;right:18px;width:84px;height:84px}
.is-soon .kcard-top{filter:saturate(.4)}
.is-soon h3{color:#5a6672}

/* Message de la Fondatrice : petite fenêtre discrète en bas à gauche (accueil, scolaire, extrascolaire) */
.fpop{position:fixed;z-index:50;left:20px;bottom:20px;width:min(360px,calc(100% - 24px));padding:16px 16px 14px;border-radius:18px;background:#fffdf7;border:1px solid #e6d8c2;box-shadow:0 22px 50px #10283c38;transform:translateY(24px);opacity:0;transition:transform .45s cubic-bezier(.2,1.2,.4,1),opacity .3s}
.fpop.is-open{transform:none;opacity:1}
.fpop[hidden]{display:none}
.fpop-close{position:absolute;top:8px;right:10px;width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:#8a7a66;font-size:1.3rem;line-height:1}
.fpop-close:hover{background:#f1e9dc}
.fpop-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding-right:26px}
.fpop-seal{width:40px;height:40px;filter:drop-shadow(0 3px 6px #3a2a1240)}
.fpop.is-open .fpop-seal{animation:fpop-stamp .6s .25s cubic-bezier(.3,1.8,.45,1) both}
@keyframes fpop-stamp{from{transform:scale(1.8);opacity:0}to{transform:scale(1);opacity:1}}
.fpop-head p{margin:0;line-height:1.2}
.fpop-head strong{display:block;font-size:.86rem;color:#1c2d40}
.fpop-head span{font-size:.72rem;color:#8a7a66}
.fpop-body{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:start}
.fpop-illus{width:56px;height:56px;object-fit:contain}
.fpop-title{margin:0 0 4px;font:700 1.25rem/1.15 var(--serif);color:#1c2d40}
.fpop-body p:not(.fpop-title){margin:0;font-size:.86rem;line-height:1.45;color:#4e5a66}
.fpop-cta{margin-top:12px;width:100%;min-height:42px;font-size:.82rem}
@media(max-width:620px){.fpop{left:12px;bottom:12px;padding:12px 12px 10px}.fpop-body{grid-template-columns:44px minmax(0,1fr)}.fpop-illus{width:44px;height:44px}.fpop-title{font-size:1.1rem}.fpop-body p:not(.fpop-title){font-size:.8rem}}
@media(prefers-reduced-motion:reduce){.fpop{transition:none}.fpop.is-open .fpop-seal{animation:none}}

/* Formulaire : critères de tri (familles) et envoi WhatsApp */
.form-qualif{grid-column:1/-1;margin:0;padding:12px 14px 14px;border:1px dashed #d7c19b;border-radius:14px;background:#fbf6ec;display:grid;grid-template-columns:1fr 1fr;gap:10px 13px;min-width:0}
.form-qualif[hidden]{display:none}
.form-qualif legend{padding:0 6px;font-weight:700;font-size:.8rem;color:#8a612c}
.qualif-note{grid-column:1/-1;margin:0;font-size:.8rem;line-height:1.45;color:#5a6672}
.form-fields label small{font-weight:500;color:#8a7a66}
.button-whatsapp{width:100%;margin-top:10px;justify-content:center;gap:10px;background:#1f7a4d;color:#fff;box-shadow:0 8px 20px #1f7a4d33}
.button-whatsapp:hover{background:#18653f}
.button-whatsapp[hidden]{display:none}

/* =========================================================
   7. Responsive
   ========================================================= */
@media(max-width:1150px){
  .main-nav a{padding:8px 11px;font-size:.8rem}
  .brand{min-width:188px}
  .header-contact{font-size:.72rem;padding:10px 14px;min-height:42px}
  .invitation-panel{grid-template-columns:1fr 1fr;grid-template-areas:"heading copy" "actions copy" "aside aside";grid-template-rows:auto auto auto;row-gap:28px;min-height:0}
  .invitation-aside{margin-top:0;max-width:360px}
  .hero-space{height:clamp(190px,min(26vw,100svh - 440px),340px)}
  .proof small{font-size:.67rem}
}

@media(max-width:900px){
  .kgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kcard--une{grid-row:auto}
  .kcard--une .kcard-top{height:150px}
  .kcard--une .kcard-top img{width:120px;height:120px}
  /* Carnet : tablette et mobile. Le chemin reste horizontal ; s'il dépasse, il défile au doigt */
  .route-map{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin-inline:-16px;padding:4px 16px 0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 36px),transparent)}
  .route-map::-webkit-scrollbar{display:none}
  .route-map-track{width:max(100%,calc(var(--n,7) * 100px))}
  .route-map-path{height:154px}
  .stop img{width:80px;height:80px}
  .stop:nth-child(even) a{margin-top:62px}
  .stop b{margin-left:22px}

  .main-nav{position:absolute;top:calc(100% + 6px);left:26px;right:26px;display:none;padding:12px;flex-direction:column;align-items:stretch;background:#fffaf5fa;box-shadow:0 15px 30px #66523928;border-radius:18px}
  .main-nav a{font-size:.92rem;padding:11px 16px}
  .main-nav.open{display:flex}
  .nav-toggle{display:grid;place-items:center}
  .header-contact{display:none}
  .hero-space{height:clamp(170px,min(29vw,100svh - 470px),350px)}
  .path-content h2{font-size:1.65rem}
  .path-content{padding:16px}
  .proofs{grid-template-columns:repeat(2,1fr)}
  .proof:nth-child(2){border-right:0}
  .contact-shell{grid-template-columns:1fr}
  .meeting-card{min-height:430px;height:460px}
  .meeting-card>img{object-position:center 42%}
  .contact-section{padding-top:18px}

}

@media(max-width:620px){
  /* Carnet : mobile */
  .hadith{border-radius:20px;padding:12px 16px}
  .kchips{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;margin-inline:-15px;padding:0 15px 4px;scrollbar-width:none}
  .kchip{flex-shrink:0}
  .kgrid{grid-template-columns:1fr;gap:10px}
  .kcard:not(.kcard--une)>a,.kcard:not(.kcard--une) .kcard-inner{flex-direction:row}
  .kcard:not(.kcard--une) .kcard-top{width:96px;height:auto;min-height:104px;flex-shrink:0;border-radius:18px 0 0 18px}
  .kcard:not(.kcard--une) .kcard-top img{width:64px;height:64px}
  .kcard:not(.kcard--une) .kbadge{left:6px;top:6px;padding:2px 6px;font-size:.56rem}
  .kcard-body{padding:12px 14px}
  .kcard h3{font-size:1.12rem}
  .stamped::after{top:-28px;right:-6px;width:72px;height:72px}
  .stamped--in::after,.arrivee-panel.stamped::after{top:12px;right:12px;width:62px;height:62px}
  .stamped--sm::after{top:-10px;right:0;width:56px;height:56px}
  .meeting-quote.stamped{padding-right:84px}
  .meeting-quote.stamped::after{top:auto;bottom:16px;right:14px;width:64px;height:64px}
  .lettre.stamped{padding-right:30px}
  .lettre-sign{font-size:1.35rem;text-wrap:balance}
  .meeting-card:after{inset:22% 0 0;background:linear-gradient(180deg,transparent,#0e273cd6 42%,#0e273cf2)}
  .offres{grid-template-columns:1fr;gap:8px;margin-top:16px}
  .offres a{padding:10px 14px}
  .offres img{width:48px;height:48px}

  .masthead{padding-top:104px}
  .une-link{grid-template-columns:1fr;gap:12px;padding:22px}
  .une-link img{width:96px}
  .papier-link{grid-template-columns:64px minmax(0,1fr);gap:14px;padding:16px}
  .papier-link img{width:64px}
  .papier h3{font-size:1.4rem}
  .article-page{padding-top:100px}
  .article-body h2 img{width:48px;height:48px}
  .article-cta{grid-template-columns:1fr}
  .article-cta img{width:70px}
  .verset{padding:18px 16px}
  .exemple{padding:18px 16px}

  .clipping,.clipping--feature{grid-template-columns:64px minmax(0,1fr);gap:14px;padding:16px}
  .clipping img,.clipping--feature img{width:64px;height:64px}
  .note{padding:14px 16px;gap:12px}
  .note img{width:60px;height:60px}
  .polaroid--l,.polaroid--r{transform:none}
  .carnet-hero{padding:110px 0 46px}
  .route-map{margin:26px -15px 22px;padding:4px 15px 0}
  .route-map-hint{display:block;margin:4px 0 0;text-align:center;font-size:1.2rem;color:#a8742c}
  .stop .hand{font-size:1.2rem}
  .stop b{width:24px;height:24px;font-size:.74rem}
  .carnet-hero-actions .button{flex:1 1 100%}
  .route-line{left:28px;top:68px}
  .route-pion{width:36px;height:36px;margin:-18px 0 0 -18px}
  .etape{grid-template-columns:56px minmax(0,1fr);column-gap:16px;padding:40px 0}
  .etape-medal{width:56px;height:56px;top:84px}
  .etape-medal img{width:40px;height:40px}
  .etape-medal b{width:24px;height:24px;font-size:.78rem;right:-8px;top:-8px}
  .fiche{padding:26px 18px 18px}
  .jauge{grid-template-columns:1fr auto;gap:4px 10px}
  .jauge-bar{grid-column:1/-1;grid-row:2}
  .regards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .regards img{width:56px;height:56px}
  .choix{grid-template-columns:1fr;gap:10px;padding:18px}
  .choix img{width:84px;height:72px}
  .niveaux li{grid-template-columns:60px minmax(0,1fr);gap:14px;padding:14px}
  .niveaux img{width:60px;height:56px}
  .etiquette{padding:22px 24px 20px 50px}
  .etiquette:before{left:16px}
  .pacte{grid-template-columns:1fr}
  .arrivee-arbre{width:150px;margin-bottom:-44px}
  .arrivee-panel{padding-top:64px}

  body .shell{width:calc(100% - 30px)}
  .header-wrap{padding-top:8px}
  .site-header{min-height:65px}
  .brand{min-width:unset}
  .brand strong{font-size:1.3rem}
  .brand small{font-size:.51rem}
  .brand img{height:44px;width:44px}
  .hero-immersive:before{top:-73px;background:linear-gradient(180deg,#f8f4ec61 0,#f8f4ec52 150px,#f8f4ecc7 262px,#f8f4ec 296px),#f8f4ec var(--hero-book) no-repeat center 28px/auto 270px}
  .hero-space{height:clamp(130px,calc(100svh - 610px),230px)}
  .hero-paths{grid-template-columns:1fr;gap:10px}
  /* Cartes compactes : les trois offres et les repères tiennent dans l'écran */
  .path-card{min-height:0}
  .path-content{padding:13px 50px 13px 16px}
  .path-label{font-size:.62rem}
  .path-content h2{font-size:1.5rem;margin:4px 0 3px}
  .path-content p{max-width:40ch;font-size:.79rem;line-height:1.35;margin:0}
  .path-link{position:absolute;right:12px;top:50%;margin-top:-17px;width:34px;height:34px;padding:0;justify-content:center;font-size:0;gap:0}
  .path-link .icon{width:16px;height:16px}
  .proofs{grid-template-columns:1fr 1fr}
  .proof{padding:8px 10px;gap:8px}
  .proof-illus{width:34px;height:34px}
  .proof strong{font-size:.7rem}
  .proof small{font-size:.63rem}
  .invitation-panel{grid-template-columns:1fr;grid-template-areas:"heading" "copy" "actions" "aside";border-radius:22px;padding:26px 22px;row-gap:24px}
  .invitation-heading h2{font-size:2.3rem;padding-left:18px}
  .invitation-copy p{font-size:.95rem}
  .invitation-panel:before{width:420px;height:420px;right:-170px;bottom:-250px}
  .invitation-panel:after{width:280px;height:280px;right:-110px;bottom:-150px}
  .meeting-card{height:350px;min-height:0}
  .meeting-quote{padding:21px}
  .meeting-quote blockquote{font-size:1.75rem}
  .form-card{padding:25px 18px}
  .form-card h2{font-size:3.1rem}
  .form-fields{grid-template-columns:1fr}
  .form-fields .wide{grid-column:auto}
  .form-qualif{grid-template-columns:1fr}
  .contact-intro{font-size:1.4rem}
  .footer-inner{flex-direction:column;align-items:flex-start}
  .footer-inner nav{gap:9px 13px}

  .hero-lead{font-size:1.28rem;margin-bottom:20px}

  .final-actions .button{width:100%}

}

/* Accueil sur écran bas (portable mis à l'échelle, fenêtre réduite) : cartes et repères plus compacts */
@media(min-width:621px) and (max-height:760px){
  .path-card{min-height:196px}
  .path-content{padding:16px 20px}
  .path-content h2{font-size:1.75rem}
  .path-content p{margin-bottom:10px}
  .path-link{padding:6px 16px}
  .proofs{margin-top:10px}
  .proof{padding:7px 12px}
  .proof-illus{width:40px;height:40px}
}
@media(min-width:621px) and (max-height:620px){
  .header-wrap{padding-top:8px}
  .site-header{min-height:62px}
  .path-card{min-height:150px}
  .path-content{padding:12px 18px}
  .path-label{font-size:.62rem}
  .path-content h2{font-size:1.45rem;margin:4px 0}
  .path-content p{font-size:.8rem;line-height:1.3;margin-bottom:8px}
  .path-link{padding:4px 14px;font-size:.76rem}
  .proof-illus{width:32px;height:32px}
  .proof small{font-size:.64rem;margin-top:1px}
}
@media(prefers-reduced-motion:reduce){
  .js .stop{opacity:1;transform:none;animation:none}
  .js .route-map-path{clip-path:none;animation:none}
  .js .etape:not(.is-reached) .jauge-bar i,.js .etape:not(.is-reached) .coches li:after{transform:none;clip-path:none}
  *{transition:none!important;scroll-behavior:auto!important}
}

.visually-hidden{position:absolute!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* V32 — Journal allégé : titre simple, hadith en citation discrète, onglets façon rubriques de journal */
.masthead h1{padding:10px 0;border-bottom:1px solid #d7c19b}
.hadith{background:none;box-shadow:none;border-radius:0;padding:10px 0 0;max-width:760px}
.hadith blockquote{color:#3d3020;font-size:clamp(1rem,1.5vw,1.2rem)}
.hadith .ar{color:#a8742c}
.hadith figcaption{color:#8a7a66}
.kchips{gap:4px;border-bottom:1px solid #e2d4be;padding-bottom:0}
.kchip{border:0;border-radius:0;background:none;padding:10px 14px;border-bottom:3px solid transparent;color:#5a6672}
.kchip.is-on{background:none;color:#1c2d40;border-bottom-color:#c59650}
/* « Lire la suite » : capsule explicite */
.more summary{display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:9px 18px;border:1.5px solid #c59650;border-radius:99px;background:#fffdf7;font:700 .9rem var(--sans);color:#8a612c;box-shadow:0 4px 12px #5b3f1a14;transition:background .2s,color .2s}
.more summary:hover{background:#c59650;color:#fff}
.more--inline summary{font:700 .85rem var(--sans);padding:7px 14px}
.more .more-shut,.more[open] .more-open{display:none}
.more[open] .more-shut{display:inline}
.more{border-top:0}

/* =========================================================
   V34 — Envoi au choix, fil d'Ariane, FAQ, pages pratiques
   ========================================================= */
/* Formulaire : la famille choisit e-mail ou WhatsApp */
.send-choice{margin-top:18px;padding-top:16px;border-top:1.5px dashed #d7c19b}
.send-choice-title{margin:0 0 10px;font:700 1.45rem/1.1 var(--hand);color:#8a5f26}
.send-choice-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.send-choice-buttons .button{width:100%;min-height:64px;margin:0;padding:10px 16px;justify-content:flex-start;gap:12px;text-align:left;border-radius:16px}
.send-choice-buttons .button .icon{width:26px;height:26px;stroke-width:1.7}
.send-choice-buttons .button span{display:flex;flex-direction:column;gap:2px;line-height:1.15}
.send-choice-buttons .button strong{font-size:1rem}
.send-choice-buttons .button small{font-size:.72rem;font-weight:500;opacity:.85}
.send-choice-buttons .button:hover{transform:translateY(-2px)}
.send-delay{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:.8rem;font-weight:600;color:#2f6b4f}
.send-delay .icon{width:17px;height:17px}
.send-note{margin:10px 0 0;padding:10px 14px;border-radius:12px;background:#fff2d6;color:#6c4f27;font-size:.82rem}
.send-note[hidden]{display:none}
@media(max-width:520px){.send-choice-buttons{grid-template-columns:1fr}}

/* Fil d'Ariane */
.breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:.84rem;font-weight:600;color:#8a7a66}
.breadcrumb li{display:inline-flex;align-items:center;gap:8px;min-width:0}
.breadcrumb li+li:before{content:'›';color:#c59650;font-weight:700}
.breadcrumb a{color:#8a612c;border-bottom:1px solid #e2cfa9}
.breadcrumb a:hover{color:#1c2d40;border-bottom-color:#c59650}
.breadcrumb [aria-current]{max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#5a6672}

/* Pages pratiques (FAQ, mentions, confidentialité, merci, 404) */
.page-intro{text-align:center}
.page-intro .breadcrumb ol{justify-content:center}
.page-intro h1{margin:6px auto 0;max-width:20ch;font-size:clamp(2.4rem,5vw,3.6rem);line-height:1.05;color:#1c2d40;text-wrap:balance}
.page-intro .article-chapeau{max-width:46ch;margin-left:auto;margin-right:auto}
.faq-group{margin-top:34px!important}
.faq-group h2{display:flex;align-items:center;gap:12px;margin:0 0 12px;font-size:clamp(1.6rem,2.6vw,2rem);color:#1c2d40}
.faq-group h2 img{width:52px;height:52px;object-fit:contain}
.faq-item{margin-top:10px;border-radius:16px;background:#fffdf7;box-shadow:0 1px 0 #e8dcc8,0 8px 18px #5b3f1a12;border-left:5px solid var(--tone,#c59650)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 18px;font-weight:700;font-size:1.02rem;color:#1c2d40}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:after{content:'+';flex-shrink:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--tone,#c59650);color:#fff;font:700 1.2rem/1 var(--sans);transition:transform .25s}
.faq-item[open] summary:after{transform:rotate(45deg)}
.faq-item summary:hover{color:#8a5f26}
.faq-item>div{padding:0 18px 16px;color:#2f3b46;line-height:1.65}
.faq-item>div p{margin:0 0 .7em}
.faq-item>div a{font-weight:700;color:#8a612c;border-bottom:1px solid #e2cfa9}
.tone-sage{--tone:#2f6b4f}.tone-navy{--tone:#2f5675}.tone-terra{--tone:#b5653a}.tone-plum{--tone:#7a4a6e}.tone-gold{--tone:#b8862f}
.faq-more{margin-top:40px!important}
.legal h2{margin:36px 0 10px;font-size:clamp(1.5rem,2.4vw,1.9rem);color:#1c2d40}
.legal p,.legal li{line-height:1.7;color:#2f3b46}
.legal ul{padding-left:20px}
.a-completer{padding:1px 6px;border-radius:5px;background:#fff0b8;color:#7a5410;font-weight:700}
.merci-etapes{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:etape}
.merci-etapes li{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px;padding:12px 16px;border-radius:16px;background:#fffdf7;box-shadow:0 1px 0 #e8dcc8,0 8px 18px #5b3f1a12;text-align:left}
.merci-etapes img{width:54px;height:54px;object-fit:contain}
.merci-etapes strong{display:block;color:#1c2d40}
.merci-etapes span{font-size:.9rem;color:#5a6672}
.merci-erreur{display:none}
.is-error .merci-ok{display:none}.is-error .merci-erreur{display:block}
.pages-cles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.pages-cles a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 10px;border-radius:16px;background:#fffdf7;box-shadow:0 1px 0 #e8dcc8,0 8px 18px #5b3f1a12;font-weight:700;color:#1c2d40;text-align:center;transition:transform .2s}
.pages-cles a:hover{transform:translateY(-3px)}
.pages-cles img{width:64px;height:64px;object-fit:contain}
.pages-cles small{font-weight:500;color:#5a6672;font-size:.8rem}
.page-seal{display:block;width:96px;height:96px;margin:0 auto}

/* Pied de page : liens pratiques */
.footer-inner nav .footer-sep{width:1px;height:12px;background:#cdbfa9}
.footer-inner nav a[hidden]{display:none}

/* Bandeau de mesure d'audience (actif seulement si Google Analytics est configuré) */
.consent{position:fixed;z-index:60;right:20px;bottom:20px;width:min(420px,calc(100% - 24px));display:grid;gap:12px;padding:16px;border-radius:18px;background:#fffdf7;border:1px solid #e6d8c2;box-shadow:0 22px 50px #10283c38;font-size:.86rem;color:#2f3b46}
.consent p{margin:0;line-height:1.5}
.consent strong{display:block;font:700 1.35rem/1.1 var(--hand);color:#8a5f26;margin-bottom:4px}
.consent a{color:#8a612c;font-weight:700;border-bottom:1px solid #e2cfa9}
.consent div{display:flex;gap:10px}
.consent .button{flex:1;justify-content:center;margin:0;min-height:42px}
.consent-no{background:#fff;border-color:#d7c19b;color:#5a4428}
@media(max-width:620px){.consent{right:12px;bottom:12px}}

/* Journal : « Pour aller plus loin » (maillage vers l'école et les autres articles) */
.suite{margin-top:40px!important;padding:22px;border-radius:20px;background:#fffdf7;box-shadow:0 1px 0 #e8dcc8,0 12px 26px #5b3f1a14}
.suite .hand{margin:0 0 12px}
.suite-ecole{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:linear-gradient(120deg,#193047,#22485b);color:#fff;transition:transform .2s}
.suite-ecole:hover{transform:translateY(-2px)}
.suite-ecole img{width:64px;height:64px;object-fit:contain;padding:4px;border-radius:14px;background:#fffaf0}
.suite-ecole small{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#f1ce8a}
.suite-ecole strong{display:block;font:600 1.2rem/1.25 var(--serif)}
.suite-articles{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.suite-articles a{display:grid;grid-template-columns:56px 1fr;align-items:center;gap:12px;height:100%;padding:12px;border-radius:14px;background:#f6efe3;color:#1c2d40;transition:background .2s}
.suite-articles a:hover{background:#efe3cf}
.suite-articles img{width:56px;height:56px;object-fit:contain}
.suite-articles small{display:block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#8a7a66}
.suite-articles strong{display:block;font-size:.92rem;line-height:1.3}
@media(max-width:620px){.suite{padding:16px}.suite-articles{grid-template-columns:1fr}.suite-ecole{grid-template-columns:52px 1fr}.suite-ecole img{width:52px;height:52px}.suite-ecole .icon{display:none}}

/* Pages pratiques : respirations */
.page-intro>*+*,.merci-ok>*+*,.merci-erreur>*+*{margin-top:14px}
.page-intro .breadcrumb{margin-bottom:22px}
.page-intro .mini-label{margin-top:38px!important;margin-bottom:14px}
.page-intro .mini-label+*{margin-top:0}

/* V35 — Image du formulaire dézoomée : le carnet se voit en entier, la citation passe dessous */
.meeting-card{display:flex;flex-direction:column;min-height:0;height:auto;background:linear-gradient(160deg,#193047,#10283c)}
.meeting-card>img{flex:none;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:center}
.meeting-card:after{display:none}
.meeting-quote{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;max-width:none;padding:26px 30px 30px}
@media(max-width:900px){.meeting-card{height:auto}.meeting-card>img{object-position:center}}
/* « Cliquez ici pour lire la suite » : la capsule appelle le clic */
.more summary .icon{animation:invite 1.8s ease-in-out infinite}
.more[open] summary .icon{animation:none}
@keyframes invite{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@media(prefers-reduced-motion:reduce){.more summary .icon{animation:none}}

/* V35 — Identité typographique : 3 familles (Cormorant pour les titres, Caveat pour la main, DM Sans pour le texte) ;
   Amiri seulement pour l'arabe. Le fond de l'accueil n'a plus de texte : la phrase est écrite en Caveat. */
:root{--hero-book:url('assets/hero-carnet.webp')}
.hero-immersive .hero-phrase{position:absolute;z-index:1;margin:0;display:flex;flex-direction:column;font:700 40px/1.02 var(--hand);color:#5b3d22;letter-spacing:0;white-space:nowrap;transform:rotate(-2.5deg);transform-origin:left bottom;pointer-events:none}
.hero-immersive .hero-phrase span:first-child{margin-bottom:.06em}
.main-nav a{font-family:var(--hand);font-size:1.32rem;font-weight:700;letter-spacing:0;padding:5px 16px;line-height:1.15}
@media(max-width:1150px){.main-nav a{font-size:1.18rem;padding:5px 11px}}
@media(max-width:900px){.main-nav a{font-size:1.4rem;padding:9px 16px}}
/* Mobile : fond agrandi et cadré sur la page de gauche pour que la phrase reste lisible (16 px du bord) */
@media(max-width:620px){.hero-immersive:before{background:linear-gradient(180deg,#f8f4ec40 0,#f8f4ec38 150px,#f8f4ecc7 262px,#f8f4ec 296px),#f8f4ec var(--hero-book) no-repeat calc(16px - var(--hbm,400px) * 1.7768 * .134) 28px/auto var(--hbm,400px)}}

/* V36 — Cartes de l'accueil « aquarelle » (variante C choisie) : pas de boîte, une tache de couleur peinte sur la page,
   un voile papier dessous pour la lisibilité, une illustration aquarelle par carte. */
.path-blue{--tone:#2f5675;--ill:url('assets/illus/ordinateur.webp');--tache:46% 54% 42% 58% / 58% 44% 56% 42%}
.path-gold{--tone:#a0522d;--ill:url('assets/illus/pousse.webp');--tache:58% 42% 55% 45% / 45% 58% 42% 55%}
.path-sage{--tone:#2f6b4f;--ill:url('assets/illus/tasses.webp');--tache:42% 58% 48% 52% / 55% 48% 52% 45%}
.path-card{background:none;border:0;box-shadow:none;overflow:visible;border-radius:0}
.path-card img{display:none}
.path-card:before{inset:-4px -2px;border-radius:var(--tache);background:radial-gradient(ellipse 74% 84% at 36% 55%,color-mix(in srgb,var(--tone) 30%,transparent),color-mix(in srgb,var(--tone) 14%,transparent) 62%,transparent 80%),radial-gradient(ellipse 82% 92% at 42% 52%,#fffaf2e0 0 56%,#fffaf200 80%),var(--grain);filter:blur(1px);transition:transform .35s,filter .35s}
.path-card::after{content:'';position:absolute;z-index:1;right:4%;top:50%;width:min(34%,140px);aspect-ratio:1;transform:translateY(-50%);background:var(--ill) center/contain no-repeat;transition:transform .35s}
.path-card:hover,.path-card:focus-visible{transform:none;box-shadow:none}
.path-card:hover:before,.path-card:focus-visible:before{transform:scale(1.03);filter:blur(1px) saturate(1.5)}
.path-card:hover::after{transform:translateY(-50%) rotate(-3deg) scale(1.05)}
.path-card:focus-visible{outline:2px dashed var(--tone);outline-offset:6px;border-radius:24px}
.path-content{color:#1c2d40;justify-content:center;padding-right:min(38%,160px)}
.path-label{color:var(--tone)}
.path-content h2{color:#1c2d40}
.path-content p{color:#33414c}
.path-link{border-color:var(--tone);color:var(--tone);background:#fffaf2e6}
.path-card:hover .path-link{background:var(--tone);color:#fff}
@media(max-width:620px){.path-card::after{width:70px;right:56px}.path-content{padding-right:136px}.path-link{color:var(--tone)}}
@media(prefers-reduced-motion:reduce){.path-card:before,.path-card::after{transition:none}}
@media(max-width:380px){.path-card::after{display:none}.path-content{padding-right:56px}}

/* V36 — Formulaire : plus de cadre bleu sous l'image ; la citation s'écrit sur le papier, à l'encre */
.meeting-card{background:#f6efe3}
.meeting-quote{color:#1c2d40;padding:28px 32px 32px}
.meeting-quote blockquote{color:#1c2d40}
.meeting-quote>span{color:#a8742c}
/* La colonne image + citation ne s'étire plus sur toute la hauteur du formulaire : pas de grand cadre vide */
.meeting-card{align-self:start;position:sticky;top:16px}
.meeting-quote{flex:none;padding:18px 28px 22px}
.meeting-quote blockquote{margin-bottom:10px}
@media(max-width:900px){.meeting-card{position:static}}
.contact-shell{overflow:clip}
.meeting-card{background:none;border-radius:0 0 22px 0;overflow:hidden}
/* Couleurs des taches : vert au milieu (au-dessus de la main), ocre doré à droite (le terracotta dilué tirait sur le rose) ; teintes renforcées */
.path-gold{--tone:#2f6b4f}
.path-sage{--tone:#b07a2a}
.path-card:before{background:radial-gradient(ellipse 74% 84% at 36% 55%,color-mix(in srgb,var(--tone) 38%,transparent),color-mix(in srgb,var(--tone) 18%,transparent) 62%,transparent 80%),radial-gradient(ellipse 82% 92% at 42% 52%,#fffaf2e0 0 56%,#fffaf200 80%),var(--grain)}
.path-sage .path-label{color:#8a5f1f}
/* Troisième tache : prune (le jaune ne plaisait pas) */
.path-sage{--tone:#5e3a6e}
.path-sage .path-label{color:#5e3a6e}

/* V37 — Scolarité aux couleurs de l'accueil : bleu (scolarité individuelle), vert (remédiation ou excellence), prune (accompagnement parental) */
.offre-gold{--bg:linear-gradient(135deg,#1c4a3e,#2f6b4f);--ring:#9fbfae}
.offre-sage{--bg:linear-gradient(135deg,#3f2650,#6b4a7a);--ring:#cbb3d3}
#remediation{--tone:#2f6b4f}
#excellence{--tone:#4a8a5c}
#familles{--tone:#5e3a6e}
/* Tarif : la dégressivité se voit tout de suite */
.degressif{color:#2f6b4f;font-weight:800;background:linear-gradient(transparent 58%,#cfe5d6 58%);padding:0 2px}
.etiquette .degressif{display:inline-block;margin-top:4px}
.faq-item .degressif{color:#2f6b4f}

/* V37 — Chemin d'icônes : jamais de défilement sur le côté.
   Tablette : tout sur une ligne. Mobile : serpentin sur 2 rangées de 4 (aller à droite, retour à gauche). */
@media(max-width:900px){
  .route-map{overflow:visible;-webkit-mask-image:none;mask-image:none;margin-inline:0;padding:4px 0 0}
  .route-map-track{width:100%}
  .route-map-hint{display:none!important}
  .stop img{width:68px;height:68px}
  .stop b{margin-left:16px}
}
@media(max-width:620px){
  .route-map{margin:22px 0 18px}
  .route-map-path{display:none}
  .route-map ol{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:118px;row-gap:14px}
  .route-map .stop a,.route-map .stop:nth-child(even) a{margin-top:0}
  .route-map .stop img{width:62px;height:62px;position:relative;z-index:1}
  .route-map .stop .hand{font-size:1.12rem;text-align:center;line-height:1.05}
  .route-map .stop b{margin-left:14px;z-index:2}
  .route-map .stop:nth-child(-n+4){grid-row:1}
  .route-map .stop:nth-child(5){grid-row:2;grid-column:4}
  .route-map .stop:nth-child(6){grid-row:2;grid-column:3}
  .route-map .stop:nth-child(7){grid-row:2;grid-column:2}
  .route-map .stop:nth-child(8){grid-row:2;grid-column:1}
  /* le pointillé : aller sur la rangée 1, virage à droite, retour sur la rangée 2 */
  .route-map ol::before,.route-map ol::after{content:'';position:absolute;z-index:0;pointer-events:none;border:0 dashed #b89255}
  .route-map ol::before{left:12.5%;right:12.5%;top:31px;border-top-width:2.4px}
  .route-map ol::after{right:calc(12.5% - 22px);top:31px;height:132px;width:calc(25% + 22px);border-width:2.4px 2.4px 2.4px 0;border-top-color:transparent;border-radius:0 40px 40px 0}
  .route-map[style*="--n:7"] ol::after{width:calc(50% + 22px)}
  .route-map[style*="--n:8"] ol::after{width:calc(75% + 22px)}
}
@media(max-width:900px){.offres{grid-template-columns:1fr;max-width:560px;margin-inline:auto}}
/* Mobile : rien ne dépasse sur le côté (les sceaux tamponnés débordaient de quelques pixels) ;
   Journal : les onglets passent à la ligne, la carte « à la une » tient dans la colonne */
html,body{overflow-x:clip}
@media(max-width:620px){
  .kchips{flex-wrap:wrap;justify-content:center;overflow:visible;margin-inline:0;padding:0}
  .kcard--une{grid-column:auto}
}
/* Scolarité : les trois cycles, bien visibles */
.niveaux-band{list-style:none;margin:14px auto 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:1080px}
.niveaux-band li{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:99px;background:#fffdf7;border:1.5px dashed #d7c19b;text-align:left}
.niveaux-band img{width:42px;height:42px;object-fit:contain;flex-shrink:0}
.niveaux-band span{display:flex;flex-direction:column;font-size:.86rem;color:#5a6672;line-height:1.2}
.niveaux-band b{font:700 1.35rem/1 var(--hand);color:#1c2d40}
@media(max-width:620px){.niveaux-band{grid-template-columns:1fr;gap:6px}.niveaux-band li{padding:6px 12px 6px 6px}}

/* Journal : les filtres deviennent une mini barre de navigation, comme le menu principal */
.kchips{width:fit-content;max-width:100%;margin:0 auto 18px;padding:5px;display:flex;flex-wrap:wrap;justify-content:center;gap:2px;border:1px solid #e3d6c2;border-bottom:1px solid #e3d6c2;border-radius:99px;background:#f2e9dcb3;box-shadow:inset 0 1px 2px #6b55330f;overflow:visible}
.kchip{padding:5px 16px;border:0;border-radius:99px;background:none;font:700 1.32rem/1.15 var(--hand);color:#3d5263;letter-spacing:0}
.kchip:hover,.kchip.is-on{background:#fffdf8;color:#926e3a;box-shadow:0 2px 8px #5b442a17;border:0}
@media(max-width:620px){.kchips{margin:0 auto 14px;padding:4px;border-radius:22px}.kchip{font-size:1.18rem;padding:4px 11px}}
/* Journal : sans la vidéo, les deux séries remplissent la dernière ligne */
.kcard[data-type="serie"]{grid-column:span 2}
@media(max-width:620px){.kcard[data-type="serie"]{grid-column:auto}}