/* =================================================================
   guides.css - Ce qui n'appartient qu'au site des Guides
   Crise et Résilience

   Ordre de chargement : signature.css, puis marque.css, puis ce fichier.
   Rien de ce que le socle déclare déjà ne se redéclare ici : ni .carte,
   ni .surtitre, ni .entete-section, ni .final, ni .fil, ni .meta, ni les
   fonds de section. poser-la-signature.py refuserait la page.

   Règle de la marque : aucune couleur en clair, tout passe par var().
   ================================================================= */

/* =================================================================
   1. LA MISE EN PAGE DE BASE
   ================================================================= */
/* Le socle ne pose pas de reset : chaque site pose le sien, et les trois
   posent le meme. Sans box-sizing, les paddings des sections s'ajoutent aux
   100 % de largeur et la page deborde a droite sur telephone. */
*{margin:0;padding:0;box-sizing:border-box}
/* SUR html AUSSI, pas seulement sur body. Pose sur le seul body, le debordement
   REMONTE a l'element racine et la page glisse quand meme : le Magazine a paye
   279 px de glissement sur telephone, la regle etait pourtant ecrite. Le seul
   test qui tranche : window.scrollTo(500,0) puis lire scrollX. */
html{overflow-x:hidden}
body{background:var(--noir);color:var(--texte);
     font:400 15px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
     -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4{font-weight:400}
/* 🚨 `background:none` ET `border:none` : sans eux, un vrai <button> garde le
   fond BLANC du navigateur, et le texte dore devient illisible dessus. Les
   boutons de la marque etaient tous des liens jusqu'ici, le defaut ne s'etait
   jamais vu. Trouve a l'ecran par Alex sur « Me deconnecter ». */
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

section{padding:clamp(64px,7vw,110px) clamp(20px,5vw,70px)}

/* La largeur de lecture du site. Les trois grilles s'y calent, sinon une
   rangée de deux tuiles s'étale sur 1400 px et les cartes deviennent des
   panneaux. Mesuré sur un écran de 1920. */
.dedans{max-width:1280px;margin:0 auto}

/* =================================================================
   2. L'ÉCRAN D'OUVERTURE
   Pas d'image : la collection n'en a pas, et une photo d'illustration
   générique affaiblirait des guides qui se vendent sur leur contenu.
   La profondeur vient de deux lueurs dorées, comme le bloc final.
   ================================================================= */
.hero{position:relative;overflow:hidden;
      padding:clamp(90px,11vw,150px) clamp(20px,5vw,70px) clamp(70px,8vw,110px);
      background:linear-gradient(180deg,var(--noir-profond) 0%,var(--noir) 100%)}
.hero::before{content:"";position:absolute;left:50%;top:-30%;transform:translateX(-50%);
              width:min(1200px,130%);height:120%;pointer-events:none;
              background:radial-gradient(ellipse at center,rgba(var(--or-rgb),.13),transparent 64%)}
.hero::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
             width:min(680px,86%);height:1px;
             background:linear-gradient(90deg,transparent,rgba(var(--or-rgb),.5),transparent)}
.hero-dedans{position:relative;max-width:1280px;margin:0 auto;text-align:center}
.hero h1{margin-left:auto;margin-right:auto}
.hero .chapo{margin-left:auto;margin-right:auto;max-width:640px}
.hero .actions{justify-content:center}

/* Les trois chiffres de l'ouverture. Ils disent la taille de la collection,
   pas des promesses : ils se lisent dans donnees.js. */
.compte{display:flex;justify-content:center;flex-wrap:wrap;
        gap:clamp(26px,5vw,64px);margin-top:clamp(34px,4vw,48px)}
.compte div{text-align:center}
.compte b{display:block;font:400 clamp(30px,3.4vw,42px)/1 Georgia,"Times New Roman",serif;
          color:var(--or-clair)}
.compte span{display:block;margin-top:7px;font-size:10.5px;letter-spacing:2.2px;
             text-transform:uppercase;color:var(--texte-acier)}

/* =================================================================
   3. LA GRILLE DES GUIDES
   ================================================================= */
.grille-guides{display:grid;gap:20px;max-width:1280px;margin:0 auto;
               grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}

/* La tuile d'un guide. Elle reprend la peau de .carte (socle) et le principe
   de la tuile de l'Académie, sans image de fond : le glyphe et le dégradé
   portent l'identité. Hauteur libre, pas de ratio imposé : les chapôs n'ont
   pas la même longueur et un ratio 3/4 laissait un grand vide sous les courts. */
.tuile-guide{isolation:isolate;justify-content:flex-start;
             padding:30px 28px 26px;min-height:300px;
             background:linear-gradient(165deg,var(--noir-doux) 0%,var(--noir-2) 58%,var(--noir) 100%)}
.tuile-guide::before{content:"";position:absolute;inset:0;z-index:-1;transition:opacity .45s ease;
                     background:radial-gradient(ellipse 90% 60% at 84% 2%,rgba(var(--or-rgb),.16),transparent 62%)}
.tuile-guide::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
                    background:linear-gradient(90deg,var(--or-clair),var(--or) 40%,transparent);
                    transform:scaleX(0);transform-origin:left;
                    transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.tuile-guide:hover::after{transform:scaleX(1)}
.tuile-guide .glyphe{position:absolute;right:24px;top:20px;font-size:40px;line-height:1;
                     color:var(--or);opacity:.3;
                     transition:opacity .45s ease,transform .45s ease}
.tuile-guide:hover .glyphe{opacity:.8;transform:translateY(-3px)}
.tuile-guide .genre{display:block;font-size:10px;letter-spacing:2.4px;text-transform:uppercase;
                    color:rgba(var(--or-rgb),.7);margin-bottom:14px}
.tuile-guide h3{font:400 23px/1.22 Georgia,"Times New Roman",serif;
                margin-bottom:6px;padding-right:44px}
.tuile-guide .distinction{display:block;font:italic 13px/1.45 Georgia,serif;
                          color:var(--or-clair);margin-bottom:13px;opacity:.9}
.tuile-guide p{font-size:13.6px;line-height:1.68;color:var(--texte-doux);margin-bottom:18px}
.tuile-guide .pied-tuile{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;
                         gap:10px 16px;justify-content:space-between}
.tuile-guide .aller{display:inline-flex;align-items:center;gap:9px;font-size:11px;
                    letter-spacing:2.4px;text-transform:uppercase;color:var(--or-clair)}
.tuile-guide .aller span{transition:transform .35s ease}
.tuile-guide:hover .aller span{transform:translateX(6px)}

/* Les repères chiffrés d'une tuile : chapitres, minutes, termes. */
.reperes{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.reperes span{padding:3px 10px;border:1px solid rgba(var(--clair-rgb),.11);border-radius:999px;
              font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--texte-acier)}

/* Le bandeau « nouveau », en haut à gauche de la tuile. */
.neuf{position:absolute;left:0;top:0;z-index:2;padding:5px 14px 5px 28px;
      background:linear-gradient(90deg,rgba(var(--or-rgb),.9),rgba(var(--or-rgb),.5));
      color:var(--sur-or-fonce);font-size:9.5px;letter-spacing:2.2px;text-transform:uppercase}
/* Le fanion occupait la meme ligne que le genre : les deux se chevauchaient, et
   « Nouveau » recouvrait la moitie du mot « resilience ». Il passe donc tout en
   haut de la tuile, et la tuile qui en porte un descend son contenu d'autant.
   Vu a l'ecran le 2026-09-12, sur la tuile du dernier paru. */
.tuile-guide:has(.neuf){padding-top:48px}
.tuile-guide:has(.neuf) .glyphe{top:38px}

/* =================================================================
   4. LE GUIDE MIS EN AVANT
   Une seule ligne sur deux colonnes : le texte à gauche, les repères
   à droite. Sous 860 px les deux colonnes se suivent.
   ================================================================= */
.vedette-guide{position:relative;overflow:hidden;display:grid;gap:clamp(28px,4vw,56px);
               grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:center;
               max-width:1280px;margin:0 auto;padding:clamp(34px,4vw,54px);
               border:1px solid rgba(var(--or-rgb),.2);border-radius:3px;
               background:linear-gradient(150deg,rgba(var(--or-rgb),.07) 0%,rgba(var(--clair-rgb),.02) 46%,transparent 100%)}
.vedette-guide h2{font:400 clamp(27px,3.2vw,40px)/1.17 Georgia,"Times New Roman",serif;
                  letter-spacing:-.4px;margin-bottom:14px}
.vedette-guide h2 em{font-style:italic;
                     background:linear-gradient(100deg,var(--or-pale),var(--or) 55%,var(--or-fonce));
                     -webkit-background-clip:text;background-clip:text;color:transparent}
.vedette-guide p{font-size:15px;line-height:1.74;color:var(--texte-doux);margin-bottom:24px;
                 max-width:56ch}
.vedette-cote{display:flex;flex-direction:column;gap:14px;
              padding:clamp(22px,2.4vw,30px);border-radius:3px;
              border:1px solid rgba(var(--clair-rgb),.08);background:rgba(var(--clair-rgb),.02)}
.vedette-cote div{display:flex;justify-content:space-between;gap:16px;align-items:baseline;
                  padding-bottom:12px;border-bottom:1px solid rgba(var(--clair-rgb),.06)}
.vedette-cote div:last-child{padding-bottom:0;border-bottom:none}
.vedette-cote dt,.vedette-cote b{font-size:10.5px;letter-spacing:2.2px;text-transform:uppercase;
                                 color:var(--texte-acier);font-weight:400}
.vedette-cote i{font-style:normal;font-size:14px;color:var(--texte-clair);text-align:right}

/* =================================================================
   5. LES FILTRES DE LA COLLECTION
   ================================================================= */
.filtres{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;
         margin-bottom:clamp(32px,4vw,44px)}
.filtre{padding:8px 17px;border:1px solid rgba(var(--clair-rgb),.12);border-radius:999px;
        background:none;cursor:pointer;color:var(--texte-pale);
        font:400 11px/1 inherit;letter-spacing:2px;text-transform:uppercase;
        transition:color .3s ease,border-color .3s ease,background-color .3s ease}
.filtre:hover{color:var(--texte);border-color:rgba(var(--or-rgb),.34)}
.filtre[aria-pressed="true"]{color:var(--sur-or);border-color:transparent;
                             background:linear-gradient(160deg,var(--or-tendre),var(--or-moyen))}

/* La seconde rangee de filtres (les sujets) est visuellement secondaire : elle
   se lit apres la question « qu'est-ce que j'en fais ». Plus petite, plus
   discrete, et collee a la premiere. */
.filtres-sujet{margin-top:-26px;margin-bottom:clamp(28px,3.4vw,38px)}
.filtres-sujet .filtre{padding:6px 14px;font-size:10px;letter-spacing:1.7px}

/* L'etiquette d'usage, dans le genre de la tuile : a lire, a remplir, a contrôler. */
.etiquette{margin-left:9px;padding:2px 8px;border-radius:999px;font-weight:400;
           background:rgba(var(--or-rgb),.14);color:var(--or-clair);
           font-size:9.5px;letter-spacing:1.8px}

/* Le compte de résultats, sous les filtres. Il parle aussi aux lecteurs
   d'écran : c'est une zone vivante (aria-live) dans le HTML. */
.resultat-compte{text-align:center;margin-bottom:clamp(24px,3vw,34px);
                 font-size:11px;letter-spacing:2.2px;text-transform:uppercase;
                 color:var(--texte-acier)}

/* Le mot qui s'affiche quand aucun guide ne répond aux filtres. */
.rien{max-width:520px;margin:0 auto;text-align:center;color:var(--texte-doux);font-size:15px}

/* =================================================================
   5 bis. L'ESPACE ABONNÉ
   Un seul formulaire dans tout le site : il vit ici.
   ================================================================= */
.formulaire{max-width:520px;margin:clamp(28px,3.4vw,40px) auto 0;text-align:left;
            display:flex;flex-direction:column;gap:14px}
.formulaire label{font-size:11px;letter-spacing:2.2px;text-transform:uppercase;
                  color:var(--texte-acier)}
.formulaire input[type="email"],
.formulaire input[type="text"]{padding:13px 16px;border-radius:3px;
  border:1px solid rgba(var(--clair-rgb),.14);background:rgba(var(--clair-rgb),.04);
  color:var(--texte);font:400 15px/1.5 inherit;width:100%}
.formulaire input[type="email"]:focus,
.formulaire input[type="text"]:focus{outline:none;border-color:rgba(var(--or-rgb),.55);
  background:rgba(var(--clair-rgb),.06)}
/* La case n'est JAMAIS cochee d'avance : c'est ce qui separe un consentement
   d'une supposition, et le serveur refuse de la cocher a la place du visiteur. */
.formulaire .case{display:flex;gap:11px;align-items:flex-start;cursor:pointer;
                  font-size:13px;line-height:1.62;letter-spacing:0;text-transform:none;
                  color:var(--texte-doux)}
.formulaire .case input{margin-top:3px;width:17px;height:17px;flex:none;accent-color:var(--or)}
.formulaire button{align-self:flex-start;margin-top:4px}
.formulaire button[disabled]{opacity:.55;cursor:progress}
.fin-formulaire{font-size:12.6px;line-height:1.6;color:var(--texte-acier)}

/* Le mot que renvoie le serveur : jamais une couleur seule pour dire l'etat,
   le texte le dit aussi, pour qui ne distingue pas les couleurs. */
.mot-serveur{max-width:520px;margin:20px auto 0;padding:13px 17px;border-radius:3px;
             font-size:14px;line-height:1.62;text-align:left;
             border:1px solid rgba(var(--clair-rgb),.12);background:rgba(var(--clair-rgb),.03);
             color:var(--texte-clair)}
.mot-serveur.bon{border-color:rgba(var(--or-rgb),.42);background:rgba(var(--or-rgb),.08)}
.mot-serveur.avis{border-color:rgba(var(--clair-rgb),.22)}

/* La tuile d'un guide reserve : plus sobre, et son etiquette le dit en toutes
   lettres. On ne cache pas le guide, on dit qu'il demande une adresse. */
.tuile-guide.reserve{opacity:.94}
.tuile-guide.reserve .aller{color:var(--texte-acier)}
.tuile-guide.reserve:hover .aller{color:var(--or-clair)}

/* Le prenom dans le menu, quand on est connecte. Il se distingue du reste de la
   navigation sans crier : une pastille sobre, la couleur de l'accent. */
.entree-moi{color:var(--or-clair);
            padding-left:22px;position:relative}
.entree-moi::before{content:"";position:absolute;left:6px;top:50%;
                    width:7px;height:7px;margin-top:-3px;border-radius:50%;
                    background:var(--or);box-shadow:0 0 0 3px rgba(var(--or-rgb),.18)}

/* =================================================================
   5 ter. LA PAGE D'UN GUIDE, ET SA COLONNE DE FORMATIONS
   Reprise de la zone de lecture du Magazine : le texte a gauche, un rail
   collant a droite. Sous 1180 px le rail disparait et les memes encarts
   reviennent en bande glissante, comme sur les articles.
   ================================================================= */
.zone-lecture{display:grid;gap:clamp(28px,4vw,54px);align-items:start;
              grid-template-columns:minmax(0,1fr) var(--largeur-rail,200px)}
.rail{position:sticky;top:96px}
.rail-titre{font-size:10.5px;letter-spacing:2.2px;text-transform:uppercase;
            color:var(--texte-acier);margin-bottom:14px}

.encart{display:block;text-decoration:none;color:inherit;margin-bottom:14px;
        border:1px solid rgba(var(--clair-rgb),.08);border-radius:3px;overflow:hidden;
        background:linear-gradient(165deg,rgba(var(--clair-rgb),.03),transparent);
        transition:border-color .4s ease,transform .4s cubic-bezier(.2,.8,.2,1)}
.encart:hover{border-color:rgba(var(--or-rgb),.34);transform:translateY(-3px)}
.encart img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
            filter:saturate(.8) brightness(.78)}
.encart:hover img{filter:saturate(1) brightness(.92)}
.encart .dedans{padding:12px 13px 14px}
.encart b{display:block;font:400 14px/1.28 Georgia,"Times New Roman",serif;margin-bottom:5px}
.encart i{display:block;font:italic 12.4px/1.5 Georgia,serif;color:var(--texte-doux)}
.encart .etiquettes{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.encart .etiquettes span{padding:2px 8px;border-radius:999px;font-size:9.5px;
                         letter-spacing:1.4px;text-transform:uppercase;
                         color:rgba(var(--or-rgb),.85);
                         border:1px solid rgba(var(--or-rgb),.26)}
.toutes{display:inline-flex;align-items:center;gap:7px;margin-top:4px;
        font-size:10.5px;letter-spacing:2.2px;text-transform:uppercase;
        color:var(--or-clair);text-decoration:none}
.toutes span{transition:transform .35s ease}
.toutes:hover span{transform:translateX(5px)}

/* Le texte de la page d'un guide. */
.lead-guide{font:italic clamp(16px,1.7vw,19px)/1.5 Georgia,serif;
            color:var(--or-clair);margin-bottom:18px;max-width:var(--reading,60ch)}
.niveaux-guide{display:flex;flex-wrap:wrap;align-items:center;gap:9px;
               margin:26px 0 4px}
.niveaux-guide span{font-size:10.5px;letter-spacing:2.2px;text-transform:uppercase;
                    color:var(--texte-acier)}
.niveaux-guide b{padding:5px 13px;border-radius:999px;font-weight:400;font-size:11px;
                 letter-spacing:1.6px;text-transform:uppercase;color:var(--or-clair);
                 border:1px solid rgba(var(--or-rgb),.3);
                 background:rgba(var(--or-rgb),.07)}
.detail-guide{margin-top:clamp(34px,4vw,48px)}
.detail-guide h2{font:400 clamp(22px,2.4vw,28px)/1.2 Georgia,"Times New Roman",serif;
                 margin-bottom:12px}
.detail-guide p{color:var(--texte-doux);max-width:64ch}
.detail-guide ul{list-style:none;margin-top:16px;display:grid;gap:9px;max-width:64ch}
.detail-guide li{position:relative;padding-left:20px;color:var(--texte-doux);font-size:14.4px}
.detail-guide li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
                         border-radius:50%;background:rgba(var(--or-rgb),.7)}
.voisins{margin-top:clamp(44px,5vw,64px)}
.voisins h2{font:400 clamp(22px,2.4vw,28px)/1.2 Georgia,"Times New Roman",serif;
            margin-bottom:18px}
.voisins .tuile-guide{min-height:0;padding:22px 20px}
.voisins .grille-guides{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}

/* La bande glissante : cachee sur grand ecran, c'est le rail qui sert. */
.formations-glissantes{display:none;margin-top:clamp(34px,4vw,48px)}
.formations-glissantes .bande{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;
                              scroll-snap-type:x mandatory;scrollbar-width:thin}
.formations-glissantes .encart{flex:0 0 clamp(178px,56vw,240px);scroll-snap-align:start;
                               margin-bottom:0}

/* 1180 px : sous cette largeur le rail tomberait sous 200 px et ses vignettes
   deviendraient des timbres. Il cede la place a la bande glissante, comme sur
   les articles du Magazine. */
@media(max-width:1180px){
  .zone-lecture{grid-template-columns:1fr}
  .rail{display:none}
  .formations-glissantes{display:block}
}

/* =================================================================
   6. LES SUJETS
   ================================================================= */
.grille-sujets{display:grid;gap:18px;max-width:1280px;margin:0 auto;
               grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.sujet{position:relative;display:block;padding:28px 26px;text-decoration:none;color:inherit;
       border:1px solid rgba(var(--clair-rgb),.08);border-radius:3px;
       background:linear-gradient(165deg,rgba(var(--clair-rgb),.03),transparent);
       transition:border-color .4s ease,transform .4s cubic-bezier(.2,.8,.2,1)}
.sujet:hover{border-color:rgba(var(--or-rgb),.34);transform:translateY(-4px)}
.sujet b{display:block;font:400 21px/1.24 Georgia,"Times New Roman",serif;margin-bottom:8px}
.sujet span{display:block;font-size:13.4px;line-height:1.66;color:var(--texte-doux)}
.sujet u{display:block;margin-top:16px;text-decoration:none;font-size:10.5px;letter-spacing:2.2px;
         text-transform:uppercase;color:rgba(var(--or-rgb),.85)}

/* Les blocs de la page des sujets se touchaient : le surtitre du sujet suivant
   arrivait a une ligne de la derniere tuile du precedent, et on ne voyait plus
   ou un sujet finissait. Vu a l'ecran entre « Cybersecurite » et « Audit ». */
#par-sujet > .dedans + .dedans{margin-top:clamp(60px,7vw,100px)}

/* =================================================================
   7. LA MÉTHODE (page collection)
   Trois niveaux de lecture, expliqués une fois pour toute la collection.
   ================================================================= */
.niveaux{display:grid;gap:20px;max-width:1280px;margin:0 auto;
         grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.niveau{position:relative;padding:30px 28px;border:1px solid rgba(var(--clair-rgb),.08);
        border-radius:3px;background:linear-gradient(165deg,rgba(var(--clair-rgb),.03),transparent)}
.niveau::before{content:"";position:absolute;left:0;top:24px;bottom:24px;width:2px;
                background:linear-gradient(180deg,var(--or),transparent)}
.niveau b{display:block;font:400 21px/1.24 Georgia,"Times New Roman",serif;margin-bottom:9px}
.niveau p{font-size:13.8px;line-height:1.7;color:var(--texte-doux)}

/* Les principes de la collection, en liste numérotée. */
.principes{max-width:820px;margin:0 auto;display:grid;gap:22px}
.principe{display:grid;grid-template-columns:54px 1fr;gap:22px;align-items:start}
.principe b{font:400 30px/1 Georgia,"Times New Roman",serif;color:rgba(var(--or-rgb),.6)}
.principe h3{font:400 20px/1.26 Georgia,"Times New Roman",serif;margin-bottom:7px}
.principe p{font-size:14px;line-height:1.72;color:var(--texte-doux)}

/* =================================================================
   8. LES SEUILS
   Deux seuils, chacun avec sa raison mesurée.
   ================================================================= */

/* 860 px : sous cette largeur, la colonne de droite du guide en vedette
   tombe sous 300 px et ses libellés en capitales se coupent en deux. */
@media(max-width:860px){
  .vedette-guide{grid-template-columns:1fr;padding:30px 24px}
  .vedette-guide p{margin-bottom:20px}
}

/* 560 px : le téléphone. Les tuiles perdent leur hauteur minimale (le
   contenu la fixe), et les chiffres de l'ouverture se resserrent. */
@media(max-width:560px){
  .tuile-guide{min-height:0}
  .compte{gap:22px}
  .principe{grid-template-columns:38px 1fr;gap:14px}
}