/* ═══════════════════════════════════════════════════════════════════════════
   Décryptages : mise en page de magazine pour les articles publics.
   Une seule feuille pour le hub et tous les articles. Les couleurs et les
   fontes sont celles de la charte du site ; tout le reste est propre à ces
   pages, qui ne ressemblent ni aux pages de vente ni aux fiches clients.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --nuit:#1E2D3D; --bleu:#14528F; --bleu-500:#1E6AB8; --bleu-300:#6AAEE8;
  --bleu-100:#D3E8FF; --bleu-50:#EEF7FF; --bleu-700:#0E3C6B; --bleu-800:#28394A; --orange:#F97316; --orange-600:#EA580C;
  --encre:#28394A; --gris:#6B7280; --trait:#E5E7EB;
  --outfit:'Outfit',sans-serif; --inter:'Inter',system-ui,sans-serif;
}

html{ scroll-behavior:smooth; }
/* Inter en 500 pour le texte courant : le 400 est trop fin sur un ecran lumineux,
   les fines des lettres se perdent. Le gras monte d'un cran en consequence. */
body.mook{ margin:0; background:#fff; color:var(--encre); font-family:var(--inter); font-weight:500;
           font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased; }
.mook *{ box-sizing:border-box; }
.mook a{ color:inherit; }

/* ───────────────────────────── En-tête léger ───────────────────────────── */
.mook-header{ background:var(--nuit); border-bottom:1px solid #2A3D52; position:sticky; top:0; z-index:40; }
.mook-header .barre{ max-width:1180px; margin:0 auto; padding:0 24px; height:76px;
                     display:flex; align-items:center; justify-content:space-between; gap:24px; }
.mook-header nav{ display:flex; align-items:center; gap:22px; }
.mook-header nav a{ color:var(--bleu-300); text-decoration:none; font-size:14px; font-weight:600; }
.mook-header nav a:hover{ color:#fff; }
.mook-header nav a.contact{ background:var(--orange); color:#fff; font-weight:700; padding:8px 14px; border-radius:12px; }
.mook-header nav a.contact:hover{ background:var(--orange-600); }
.mook-header .barre > :first-child{ min-width:0; overflow:hidden; }
.mook-header nav{ flex-shrink:0; }
/* Sous 640 px, le deroulant est cache avec le reste : son panneau invisible, centre sur un bloc vide, debordait de l'ecran. */
@media (max-width:640px){ .mook-header nav a:not(.contact), .mook-header nav > div{ display:none; } }

/* ───────────────────────────── Couverture ──────────────────────────────── */
.mook-cover{ position:relative; background:var(--nuit); color:#fff; overflow:hidden; }
.mook-cover .photo{ position:absolute; inset:0; background-size:cover; background-position:center 30%; opacity:.6; }
.mook-cover .voile{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(30,45,61,.15) 0%, rgba(30,45,61,.78) 60%, var(--nuit) 100%); }
.mook-cover .contenu{ position:relative; max-width:1180px; margin:0 auto; padding:96px 24px 64px; }
.kicker{ font-family:var(--outfit); font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); }
.mook-cover h1{ font-family:var(--outfit); font-weight:800; font-size:clamp(2.4rem, 6vw, 5.2rem); line-height:1.02;
                letter-spacing:-.02em; margin:18px 0 26px; max-width:14ch; }
.mook-cover .chapo{ font-size:clamp(1.1rem, 1.6vw, 1.35rem); line-height:1.55; color:var(--bleu-100); max-width:58ch; margin:0; font-weight:500; }
.mook-cover .meta{ display:flex; flex-wrap:wrap; gap:8px 26px; margin-top:34px; font-size:13.5px; color:var(--bleu-300); }
.mook-cover .meta b{ color:#fff; font-weight:700; }

/* ─────────────────────────── Corps de l'article ────────────────────────── */
/* Une colonne de lecture, et des notes qui flottent dans la marge droite
   sur grand ecran. Sur petit ecran, les notes reprennent leur place dans
   le fil du texte. */
.mook-article{ max-width:1180px; margin:0 auto; padding:56px 24px 40px; }
.mook-article > *{ max-width:66ch; }
@media (min-width:1024px){
  .mook-article .marge{ float:right; clear:right; width:300px; margin:0 0 28px 40px; }
}
.mook-article p{ margin:0 0 1.35em; }
}
.mook-article p strong, .mook-article li strong{ color:var(--nuit); font-weight:700; }
.mook-article ul{ margin:0 0 1.5em; padding-left:1.2em; }
.mook-article li{ margin-bottom:.45em; }
.mook-article li::marker{ color:var(--orange); }
.mook-article p:not(.signature) a{ color:var(--orange-600); font-weight:600; text-decoration:none; }
.mook-article p:not(.signature) a:hover{ text-decoration:underline; }

/* Chapitres : gros numéro, titre en phrase */
.chap{ margin:64px 0 26px; padding-top:28px; border-top:1px solid var(--trait); display:grid; clear:both;
       grid-template-columns:auto 1fr; gap:18px; align-items:end; }
.chap:first-of-type{ margin-top:0; border-top:0; padding-top:0; }
.chap .num{ font-family:var(--outfit); font-weight:800; font-size:4.6rem; line-height:.8; color:var(--orange); letter-spacing:-.04em; }
.chap h2{ font-family:var(--outfit); font-weight:800; font-size:clamp(1.5rem, 2.6vw, 2.05rem); line-height:1.12;
          letter-spacing:-.01em; color:var(--nuit); margin:0; min-width:0; overflow-wrap:anywhere; }
@media (max-width:640px){ .chap .num{ font-size:3.4rem; } }
/* Le point de vue, apres le dernier chapitre : meme filet, meme titre, et l'oeil du logo a la place du numero,
   cale sur la hauteur visible des chiffres. L'oeil est le troisieme carre de img/Pictos.svg, recadre par le fond
   (cote 306.57 dans une boite de 1125.18 x 406.57, a x 766.79 y 50) : un seul fichier, celui du bandeau. */
.chap.avis .oeil{ --cote:54px; width:var(--cote); height:var(--cote); margin-bottom:4px;
                  background:url(../img/Pictos.svg) no-repeat; background-size:calc(var(--cote) * 3.6702) auto;
                  background-position:calc(var(--cote) * -2.5012) calc(var(--cote) * -0.1631); }
.chap.avis .kicker{ display:block; margin-bottom:6px; }
@media (max-width:640px){ .chap.avis .oeil{ --cote:40px; } }
.lettrine::first-letter{ font-family:var(--outfit); font-weight:800; font-size:4.2em; line-height:.78;
                         float:left; margin:.08em .12em 0 0; color:var(--bleu); }

/* Exergue : la phrase qu'on retient */
.exergue{ margin:40px 0; padding:8px 0 8px 26px; border-left:4px solid var(--orange);
          font-family:var(--outfit); font-weight:700; font-size:clamp(1.3rem, 2.2vw, 1.7rem); line-height:1.3; color:var(--bleu); }
/* L'exergue s'aligne sur la colonne de texte : 66ch d'Inter 17px font 724px, pas 66 de ses propres caracteres. */
.mook-article > .exergue{ max-width:45.25rem; }

/* Encadré : idée reçue, point de vigilance */
.encadre{ margin:30px 0 36px; padding:22px 26px; background:var(--bleu-50); border-radius:16px; }
.encadre .kicker{ color:var(--bleu); margin-bottom:8px; display:block; }
.encadre p:last-child{ margin-bottom:0; }
.encadre.alerte{ background:#FFF7ED; }
.encadre.alerte .kicker{ color:var(--orange-600); }

/* Figures */
/* Les figures prennent toute la largeur de l'article : un schema a besoin
   de place, et la marge des notes est vide a cet endroit. */
.figure{ margin:36px 0 44px; clear:both; }
.mook-article > .figure{ max-width:none; }
/* Une figure a la largeur de la colonne de texte, pour cohabiter avec une note de marge. */
.mook-article > .figure.colonne{ max-width:66ch; clear:none; }

/* La sequence en cinq cartes, sous un axe qui va de l'arrivee au depart. */
.sequence .axe{ display:flex; justify-content:space-between; align-items:center; gap:12px;
                font-size:12.5px; color:var(--gris); margin-bottom:12px; position:relative; }
.sequence .axe::before{ content:''; position:absolute; left:0; right:0; top:50%; height:2px; background:var(--bleu-100); z-index:0; }
.sequence .axe span{ position:relative; z-index:1; background:#fff; padding:0 8px; }
.sequence .axe span:first-child{ padding-left:0; }
.sequence .axe span:last-child{ padding-right:0; }
.sequence .etapes{ list-style:none; margin:0; padding:0; display:grid; gap:14px; grid-template-columns:repeat(5, minmax(0,1fr)); }
.sequence .etapes li{ background:var(--bleu-50); border-radius:16px; padding:18px 18px 20px; margin:0; display:flex; flex-direction:column; gap:6px; min-width:0; }
.sequence .etapes .n{ font-family:var(--outfit); font-weight:800; font-size:2rem; line-height:1; color:var(--orange); letter-spacing:-.03em; }
.sequence .etapes strong{ font-family:var(--outfit); font-weight:700; font-size:1.02rem; color:var(--nuit); }
.sequence .etapes p{ margin:0; font-size:14px; line-height:1.5; color:var(--encre); }
@media (max-width:900px){ .sequence .etapes{ grid-template-columns:repeat(2, minmax(0,1fr)); } .sequence .etapes li:last-child{ grid-column:span 2; } }
@media (max-width:480px){ .sequence .etapes{ grid-template-columns:1fr; } .sequence .etapes li:last-child{ grid-column:auto; } }
.figure svg{ width:100%; height:auto; display:block; }
/* Le schema : une illustration avec, par-dessus, un calque SVG qui porte les traces et les etiquettes,
   dans la meme boite de coordonnees que l'image (viewBox = taille de l'image). Le calque ne couvre que
   l'image (.cadre), pas la legende, pour rester cale dessus a toutes les largeurs ; tout se reduit avec elle. */
.schema .cadre{ position:relative; }
.schema img{ width:100%; height:auto; display:block; border-radius:16px; }
.figure.schema svg.calque{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.schema .etiquette rect{ fill:var(--nuit); fill-opacity:.88; }
.schema .etiquette text{ font-family:var(--outfit); font-weight:700; font-size:30px; fill:#fff; } /* pour un viewBox d'environ 1400 de large */
.schema .etiquette text tspan.chiffre{ fill:var(--orange); font-weight:800; }
.schema .etiquette.orange rect{ stroke:var(--orange); stroke-width:3; }
.schema .etiquette.blanc rect{ stroke:#fff; stroke-width:3; }
.schema .etiquette.blanc text tspan.chiffre{ fill:#fff; }
.schema .etiquette text.sous{ font-family:var(--inter); font-weight:600; font-size:21px; fill:var(--bleu-100); }
.schema .etiquette.petite text{ font-size:22px; }
.schema .etiquette.petite text.sous{ font-size:19px; }
.schema .legende .credit{ display:block; margin-top:4px; font-size:12px; color:var(--gris); }
/* La carte : un SVG a la largeur de l'article. Sous 640 px, elle garde une largeur minimale et se fait
   glisser du doigt dans son cadre, pour que les noms restent lisibles. */
.figure.carte .defile{ overflow-x:auto; border-radius:16px; }
.figure.carte svg{ min-width:760px; }
.carte .legende .credit{ display:block; margin-top:4px; font-size:12px; color:var(--gris); }
/* La photo : pleine largeur de l'article, coins arrondis comme les cartes, legende et credit dessous. */
.photo img{ width:100%; height:auto; display:block; border-radius:16px; }
.photo .legende .credit{ display:block; margin-top:4px; font-size:12px; color:var(--gris); }
/* Une image carree ou verticale reste dans la colonne de texte, sans pousser la note de marge. */
/* Trois formats pour donner du rythme : ferree a droite dans la colonne de marge (grande ou petite),
   ou pleine largeur recadree, avec la legende en carte qui chevauche le bas de la photo. */
.mook-article > .photo.pleine{ max-width:none; }
.photo.pleine img{ height:clamp(320px, 46vw, 600px); object-fit:cover; object-position:center 50%; border-radius:20px; }
.photo.pleine .legende{ position:relative; margin:-52px 0 0 32px; max-width:560px; background:#fff; padding:16px 22px 14px;
                        border-radius:14px; box-shadow:0 10px 30px rgba(30,45,61,.12); }
@media (min-width:1024px){
  .mook-article > .photo.droite{ float:right; clear:right; width:440px; max-width:none; margin:6px 0 28px 40px; }
  .mook-article > .photo.droite.petite{ width:300px; }
  /* Une pile : une image et une note dans la meme colonne de marge, en un seul flottant, pour que la lettrine reste en haut. */
  .mook-article > .marge-pile{ float:right; clear:right; width:300px; max-width:none; margin:0 0 28px 40px; }
  .marge-pile .marge{ float:none; width:auto; margin:0 0 28px; }
  .marge-pile .photo{ margin:6px 0 28px; clear:none; }
  /* A cheval : la photo remonte sur le bord de la figure qui precede, avec un cadre blanc. */
  .mook-article > .photo.droite.chevauche{ margin-top:-76px; }
  .frise .legende{ max-width:calc(100% - 500px); }
  .photo.chevauche img{ border:6px solid #fff; border-radius:20px; box-shadow:0 10px 30px rgba(30,45,61,.14); }
}
@media (max-width:640px){ .photo.pleine .legende{ margin:12px 0 0; padding:0; box-shadow:none; border-radius:0; } }
/* La frise : des dates en cartes, quatre par rangee, meme dessin que la sequence. */
.frise .dates{ list-style:none; margin:0; padding:0; display:grid; gap:14px; grid-template-columns:repeat(4, minmax(0,1fr)); }
.frise .dates li{ background:var(--bleu-50); border-radius:16px; padding:18px 18px 20px; margin:0; display:flex; flex-direction:column; gap:6px; min-width:0; }
.frise .dates .n{ font-family:var(--outfit); font-weight:800; font-size:1.7rem; line-height:1; color:var(--orange); letter-spacing:-.03em; }
.frise .dates strong{ font-family:var(--outfit); font-weight:700; font-size:1.02rem; color:var(--nuit); }
.frise .dates p{ margin:0; font-size:14px; line-height:1.5; color:var(--encre); }
.frise .dates li.sombre{ background:var(--nuit); }
.frise .dates li.sombre strong{ color:#fff; }
.frise .dates li.sombre p{ color:var(--bleu-100); font-weight:400; }
@media (max-width:900px){ .frise .dates{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:480px){ .frise .dates{ grid-template-columns:1fr; } }
.figure .legende{ margin-top:12px; font-size:13.5px; line-height:1.5; color:var(--gris); }
.figure .legende b{ font-family:var(--outfit); color:var(--nuit); font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:11.5px; margin-right:8px; }

/* Notes de marge : dessinees comme les petites cartes du bloc "a retenir" (fond bleu-800, filet orange).
   Titre de la carte en orange, titres interieurs et mots en gras en bleu-300, texte courant en blanc. */
.marge{ align-self:start; margin:0 0 36px; padding:20px 22px; border-radius:16px; background:var(--bleu-800);
        border:2px solid var(--orange); color:#fff; font-size:14.5px; line-height:1.6; }
.marge .kicker{ font-size:11.5px; display:block; margin-bottom:10px; color:var(--orange); }
.marge dt{ font-family:var(--outfit); font-weight:700; color:var(--bleu-300); margin-top:12px; }
.marge dt:first-of-type{ margin-top:0; }
.marge dd{ margin:2px 0 0; color:#fff; }
.marge p{ margin:0 0 .8em; }
.marge p:last-child{ margin-bottom:0; }
.marge p strong, .marge dd strong, .marge strong{ color:var(--bleu-300); }
.marge i{ color:var(--bleu-100); }
/* Une petite vignette dessinee en tete de note, meme largeur que la note. */
.marge .vignette{ display:block; width:100%; height:auto; margin:0; border-radius:10px; }
.marge .vignette-legendes{ display:flex; margin:6px 0 14px; font-family:var(--outfit); font-weight:700; font-size:13px; color:#fff; }
.marge .vignette-legendes span{ flex:1; text-align:center; }

/* À retenir */
/* La signature, a la fin du point de vue, comme dans un magazine ; elle ramene a l'accueil. */
.signature{ margin:36px 0 0; text-align:right; line-height:1.4; }
.signature a{ display:inline-block; text-decoration:none; }
.signature a:hover b{ color:var(--orange-600); }
.signature b{ font-family:var(--outfit); font-weight:700; color:var(--nuit); display:block; }
.signature span{ font-size:14px; color:var(--gris); }
/* A retenir : une grande carte sombre, et dedans un point par petite carte, dessinees comme les tarifs
   des pages de vente (fond bleu-800), filet orange, titre blanc, texte bleu-300. */
.retenir{ margin:48px 0 0; padding:26px 26px 26px; border-radius:18px; background:var(--nuit); }
.retenir .kicker{ display:block; margin-bottom:16px; }
.retenir ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.retenir li{ margin:0; padding:16px 18px 17px; background:var(--bleu-800); border:2px solid var(--orange); border-radius:14px;
             font-size:14.5px; line-height:1.5; color:var(--bleu-300); font-weight:400; }
.retenir li strong{ display:block; margin-bottom:4px; font-family:var(--outfit); font-weight:700; font-size:15.5px; color:#fff; }
.retenir li:last-child:nth-child(odd){ grid-column:span 2; }
@media (max-width:560px){ .retenir{ padding:20px 16px; } .retenir ul{ grid-template-columns:1fr; } .retenir li:last-child:nth-child(odd){ grid-column:auto; } }

/* Sources, en petit, comme dans un magazine */
.sources{ margin:36px 0 0; padding-top:18px; border-top:1px solid var(--trait); font-size:13px; line-height:1.55; color:var(--gris); }
.sources .kicker{ display:block; font-size:11px; margin-bottom:8px; color:var(--bleu); }
.sources ul{ margin:0; padding-left:1.1em; }
/* Sur deux colonnes des 700 px, dans la largeur du bloc a retenir, pour gagner de la hauteur. */
@media (min-width:700px){ .sources ul{ column-count:2; column-gap:28px; } .sources li{ break-inside:avoid; } }
.sources li{ margin-bottom:.4em; }
.sources li::marker{ color:var(--bleu-300); }
.sources li strong{ font-weight:600; color:var(--encre); }

/* Fin d'article : les autres décryptages, en trois cartes côte à côte sur grand écran */
.mook-fin{ background:var(--bleu-50); border-top:1px solid var(--trait); margin-top:64px; }
.mook-fin .contenu{ max-width:1180px; margin:0 auto; padding:56px 24px; }
.mook-fin .suite{ display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:900px){ .mook-fin .suite{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.mook-fin .suite h3{ grid-column:1 / -1; font-family:var(--outfit); font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--bleu); margin:0 0 2px; }
.mook-fin .suite a{ display:block; padding:16px 18px; background:#fff; border:1px solid var(--trait); border-radius:14px; text-decoration:none; }
.mook-fin .suite a:hover{ border-color:var(--bleu-300); }
.mook-fin .suite .t{ font-family:var(--outfit); font-weight:700; color:var(--nuit); display:block; }
.mook-fin .suite .d{ font-size:14px; color:var(--gris); }

/* ───────────────────────────────── Hub ─────────────────────────────────── */
.hub-tete{ background:var(--nuit); color:#fff; }
.hub-tete .contenu{ max-width:1180px; margin:0 auto; padding:88px 24px 60px; }
.hub-tete h1{ font-family:var(--outfit); font-weight:800; font-size:clamp(2.2rem, 5vw, 4rem); line-height:1.04; letter-spacing:-.02em; margin:16px 0 20px; max-width:none; }
.hub-tete h1 .accent{ color:var(--orange); }
/* Titre en trois lignes, chacune ouverte par un carre du logo : coeur, patte, oeil, recadres dans img/Pictos.svg
   comme l'oeil de .chap.avis. Le texte qui passe a la ligne reste aligne sous le texte, pas sous le picto. */
.hub-tete h1.h1-pictos{ font-size:clamp(1.7rem, 3.6vw, 3rem); line-height:1.1; }
.h1-pictos .ligne{ display:grid; grid-template-columns:auto 1fr; gap:.4em; align-items:start; }
.h1-pictos .ligne + .ligne{ margin-top:.28em; }
.h1-pictos .picto{ --cote:1.05em; width:var(--cote); height:var(--cote); margin-top:.02em;
                   background:url(../img/Pictos.svg) no-repeat; background-size:calc(var(--cote) * 3.6702) auto; }
.h1-pictos .coeur{ background-position:calc(var(--cote) * -0.1631) calc(var(--cote) * -0.1631); }
.h1-pictos .patte{ background-position:calc(var(--cote) * -1.3322) calc(var(--cote) * -0.1631); }
.h1-pictos .oeil{ background-position:calc(var(--cote) * -2.5012) calc(var(--cote) * -0.1631); }
.hub-tete p{ color:var(--bleu-100); font-size:1.15rem; max-width:58ch; margin:0; line-height:1.55; }
.hub-liste{ max-width:1180px; margin:0 auto; padding:48px 24px 72px; display:grid; gap:22px; grid-template-columns:1fr; }
@media (min-width:760px){ .hub-liste{ grid-template-columns:1fr 1fr; } }
.hub-carte{ display:block; text-decoration:none; border:1px solid var(--trait); border-radius:20px; overflow:hidden; background:#fff; transition:transform .15s, box-shadow .15s; }
.hub-carte:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(30,45,61,.12); }
.hub-carte .visuel{ aspect-ratio:16/9; background:var(--nuit) center/cover; }
.hub-carte .texte{ padding:22px 24px 26px; }
.hub-carte .kicker{ font-size:11.5px; }
.hub-carte h2{ font-family:var(--outfit); font-weight:800; font-size:1.45rem; line-height:1.15; color:var(--nuit); margin:10px 0 10px; letter-spacing:-.01em; }
.hub-carte p{ margin:0; color:var(--gris); font-size:15px; line-height:1.55; }
.hub-carte .lire{ display:inline-block; margin-top:14px; color:var(--orange); font-weight:700; font-size:14px; }