/* ─────────────────────────────────────────────────────────────
   Les fiches pratiques : la vitrine, la modale de capture, et le
   gabarit imprimable.

   Choix de fond : une fiche n'est PAS une page web sombre. C'est un
   document qu'on imprime et qu'on colle sur le frigo. On la rend donc
   en feuille posée sur le ciel du site — comme l'aperçu du bilan — et
   @media print la sort telle quelle, sans le décor.

   Et elle ne porte PAS la lavande du site : crème, vert-canard et terre
   rose (voir tokens.css). Un imprimé se lit sur du papier, pas sur un
   écran — c'est ce dépaysement qui le fait paraître professionnel, là
   où une page web repeinte en clair aurait juste l'air délavée.
   ───────────────────────────────────────────────────────────── */

  /* ══ VITRINE ══════════════════════════════════════════════ */

  .fiches-tete{ padding:66px 22px 8px; text-align:center; max-width:720px }
  .fiches-tete h1{ margin-top:16px; font-size:clamp(32px,5vw,46px) }
  .fiches-tete .lead{ margin:18px auto 0; max-width:600px }

  .fiches-grille{
    /* Deux colonnes, pas quatre. À 280 px de large, l'aperçu d'un document
       n'est plus qu'une tache grise : on ne « voit rien », littéralement.
       Deux cartes larges valent mieux que quatre vignettes illisibles. */
    /* min(420px,100%) et non 420px seul : un minimum fixe reste un minimum,
       même quand l'écran est plus étroit que lui. Sur un téléphone de 390 px,
       la colonne se calait donc à 420 et poussait toute la page en travers —
       titres, descriptions, aperçus et boutons dépassaient du cadre, et la
       page entière défilait horizontalement. Avec min(), on garde les 420 px
       tant qu'ils tiennent, et on retombe sur la largeur disponible sinon. */
    display:grid; grid-template-columns:repeat(auto-fill,minmax(min(420px,100%),1fr));
    gap:26px; margin:44px 0 30px;
  }

  .fiche-carte{
    display:flex; flex-direction:column;
    background:var(--bg-2); border:1px solid var(--line); border-radius:20px;
    padding:26px 24px 24px; transition:border-color .2s ease, transform .2s ease;
  }
  .fiche-carte:hover{ transform:translateY(-3px); border-color:rgba(155,140,255,.42) }

  /* Le titre EN HAUT, l'aperçu au milieu, le bouton en bas : c'est l'ordre
     dans lequel on lit une carte de document. La hauteur du titre est bornée
     à deux lignes pour que les aperçus s'alignent d'une carte à l'autre —
     une grille dont les documents flottent à des hauteurs différentes fait
     brouillon quel que soit le soin mis au reste. */
  .fiche-carte h2{
    font-family:'Fredoka',sans-serif; font-weight:600; font-size:19.5px;
    line-height:1.3; margin:0; min-height:2.6em; color:#F4F2FF;
  }
  .fiche-desc{ color:var(--muted); font-size:14.5px; line-height:1.6; margin:8px 0 0; flex:1 }

  /* ── L'aperçu : la vraie fiche, réduite ────────────────────
     Pas une image à refaire à chaque correction, ni un dessin qui ressemble
     à un document : la page elle-même, dans un cadre, mise à l'échelle par
     fiches.js. Elle reste donc nette à tous les zooms et suit la fiche
     automatiquement. Le cadre est inerte — le clic va au bouton. */
  .fiche-apercu{
    position:relative; margin:18px 0 20px;
    aspect-ratio:1/.80; overflow:hidden;
    border-radius:10px; background:var(--creme);
    box-shadow:0 18px 34px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(155,140,255,.22);
  }
  .fiche-apercu iframe{
    position:absolute; top:0; left:0; border:0; display:block;
    width:700px; height:900px; transform-origin:top left;
    pointer-events:none; background:var(--creme);
  }
  /* Le bas de l'aperçu s'estompe : le document est coupé, ce dégradé lui
     rend une fin plutôt qu'une césure au milieu d'une phrase. */
  .fiche-apercu::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:64px;
    pointer-events:none;
    background:linear-gradient(180deg, rgba(253,243,238,0), rgba(253,243,238,.97));
  }

  .fiche-btn{
    display:flex; align-items:center; justify-content:center; gap:9px;
    width:100%; cursor:pointer; font-family:inherit; font-size:15px; font-weight:600;
    padding:13px 18px; border-radius:12px; border:0; color:#0B0B16;
    background:linear-gradient(135deg,#B9ADFF 0%, #9483F5 55%, #7C6BEE 100%);
    box-shadow:0 6px 16px -8px rgba(60,45,140,.55), inset 0 1px 0 rgba(255,255,255,.35);
    transition:filter .15s ease, transform .15s ease;
  }
  .fiche-btn:hover{ transform:translateY(-2px); filter:brightness(1.06) }
  .fiche-btn svg{ width:16px; height:16px; flex:none }

  /* ══ MODALE DE CAPTURE ════════════════════════════════════ */

  .fm{ position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; padding:18px }
  .fm[hidden]{ display:none }
  .fm-fond{ position:absolute; inset:0; background:rgba(6,6,16,.78); backdrop-filter:blur(5px) }
  .fm-boite{
    position:relative; width:100%; max-width:470px; max-height:92vh; overflow:auto;
    background:radial-gradient(120% 130% at 50% 0%, #211D4E 0%, #14142A 55%, #0E0E1F 100%);
    border:1px solid #2E2C5C; border-radius:26px; padding:32px 28px 26px;
    box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
  }
  .fm-fermer{
    position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    background:rgba(255,255,255,.06); border:1px solid var(--line); color:var(--muted);
    font-size:17px; line-height:1;
  }
  .fm-fermer:hover{ color:var(--text); background:rgba(255,255,255,.12) }

  .fm-h{ font-family:'Fredoka',sans-serif; font-weight:600; font-size:23px; line-height:1.22; color:#F4F2FF; margin:0 30px 0 0 }
  .fm-sub{ color:var(--muted); font-size:14.5px; line-height:1.6; margin:12px 0 22px }

  .fm-champ{
    width:100%; font-family:inherit; font-size:16px; color:var(--text);
    background:rgba(255,255,255,.04); border:1px solid var(--line);
    border-radius:13px; padding:14px 16px; margin-bottom:11px;
  }
  .fm-champ::placeholder{ color:var(--muted-2) }
  .fm-champ:focus{ outline:0; border-color:rgba(155,140,255,.6); background:rgba(155,140,255,.07) }

  /* Piège à robots : invisible pour un humain, rempli par les bots. */
  .fm-piege{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0 }

  /* Case à cocher sobre. La case native, agrandie et peinte en lavande par
     accent-color, tirait l'œil plus fort que le bouton d'envoi — alors qu'elle
     n'est qu'une option. Ici : un carré fin, discret, coché d'une simple
     encoche. C'est le formulaire qui doit se voir, pas l'accessoire. */
  .fm-consent{ display:flex; gap:11px; align-items:flex-start; margin:16px 0 20px; font-size:13px; line-height:1.55; color:var(--muted-2) }
  .fm-consent input{
    appearance:none; -webkit-appearance:none;
    margin:1px 0 0; width:16px; height:16px; flex:none; cursor:pointer;
    border:1px solid #45426F; border-radius:4px; background:transparent;
    position:relative; transition:border-color .15s ease, background .15s ease;
  }
  .fm-consent input:hover{ border-color:#6C68A8 }
  .fm-consent input:checked{ background:var(--lav); border-color:var(--lav) }
  .fm-consent input:checked::after{
    content:""; position:absolute; left:5px; top:1.5px; width:4px; height:8px;
    border:solid #12122A; border-width:0 2px 2px 0; transform:rotate(43deg);
  }
  .fm-consent input:focus-visible{ outline:2px solid var(--lav-bright); outline-offset:2px }
  .fm-consent a{ color:var(--muted); text-decoration:none; border-bottom:1px solid rgba(126,124,166,.45) }

  .fm-envoi{
    width:100%; cursor:pointer; font-family:inherit; font-size:16.5px; font-weight:600;
    padding:15px 20px; border-radius:14px; border:0; color:#0B0B16;
    background:linear-gradient(135deg,#B9ADFF 0%, #9483F5 55%, #7C6BEE 100%);
    box-shadow:0 6px 16px -8px rgba(60,45,140,.55), inset 0 1px 0 rgba(255,255,255,.35);
    transition:.15s;
  }
  .fm-envoi:hover{ filter:brightness(1.05) }
  .fm-envoi:disabled{ opacity:.55; cursor:default; transform:none }

  .fm-msg{ font-size:13.5px; line-height:1.55; margin:14px 0 0; text-align:center }
  .fm-msg.ko{ color:#F2A3C7 }
  .fm-legal{ font-size:11.5px; line-height:1.55; color:var(--muted-2); margin:16px 0 0; text-align:center }
  .fm-legal a{ color:var(--muted); text-decoration:none; border-bottom:1px solid rgba(126,124,166,.4) }

  /* État « c'est parti » : le formulaire cède la place au lien vers la fiche.
     On l'ouvre tout de suite — faire attendre l'email quand on a le document
     sous la main serait de la rétention pour rien. */
  .fm-ok{ text-align:center }
  .fm-ok .pastille{
    width:56px; height:56px; margin:0 auto 18px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(155,140,255,.14); border:1px solid rgba(155,140,255,.4);
  }
  .fm-ok .pastille svg{ width:27px; height:27px }
  .fm-ok .btn{ width:100%; justify-content:center; margin-top:20px }

  /* ══ RENVOI VERS LE BILAN ═════════════════════════════════
     Volontairement en retrait. La version précédente reprenait le grand
     titre Fredoka de la page d'accueil, en 40 px sur deux lignes, avec sa
     pastille : posé sous une grille de documents, ça faisait publicité, et
     ça écrasait ce qu'on était venu chercher. Ici la mise en page est celle
     d'une note de bas de page — une règle fine, un texte, un lien. */
  .fiches-suite{
    max-width:720px; margin:20px auto 76px; padding:30px 0 0;
    border-top:1px solid var(--line); text-align:center;
  }
  .fiches-suite h2{
    font-family:'Fredoka',sans-serif; font-weight:600; font-size:21px;
    line-height:1.35; color:#F4F2FF; margin:0;
  }
  .fiches-suite p{ color:var(--muted); font-size:15px; line-height:1.65; margin:12px auto 22px; max-width:52ch }
  .fiches-suite .btn{ font-size:15.5px; padding:13px 26px }
  .fiches-suite .note{ color:var(--muted-2); font-size:12.5px; margin:14px 0 0 }

  /* ══ LA FEUILLE (page fiche) ══════════════════════════════ */

  .fiche-wrap{ max-width:900px; padding-top:30px; padding-bottom:70px }

  .fiche-actions{ display:flex; gap:10px; flex-wrap:wrap; margin:0 0 22px }

  /* La feuille ne porte PAS la lavande du site. Un document imprimé se lit
     sur du papier, pas sur un écran : le vert-canard tient le noir sans le
     dureté, la terre rose porte les zones secondaires, et le fond crème
     évite le blanc clinique. C'est la palette d'un imprimé, pas d'une page
     web — et c'est justement ce qui la fait paraître professionnelle. */
  /* Le bandeau plein en tête, et non un titre posé sur du papier : c'est ce
     qui fait qu'on reconnaît la fiche en miniature, sur la vitrine, avant
     d'avoir lu un seul mot. Un document qui commence par du texte gris est
     illisible dès qu'on le réduit — celui-ci s'annonce par une couleur. */
  .feuille{
    background:var(--creme); color:#2E3B3A; border-radius:20px; overflow:hidden;
    box-shadow:0 40px 90px -34px rgba(0,0,0,.85);
  }
  .feuille-tete{
    position:relative; background:var(--canard); color:#FFFFFF;
    padding:34px 54px 32px; margin:0; border:0;
  }
  /* Halo tiède derrière la lune : sans lui, le dessin est posé sur un aplat
     et fait autocollant. Avec, il a une lumière autour de lui. */
  .feuille-tete::after{
    content:""; position:absolute; top:-58px; right:-46px; width:220px; height:220px;
    border-radius:50%; background:rgba(221,179,168,.16); pointer-events:none;
  }

  /* La lune endormie. Elle n'est pas décorative au sens où on pourrait la
     retirer : c'est elle qui réchauffe un bandeau vert-canard, et c'est la
     forme colorée qui rend la fiche identifiable en miniature sur la
     vitrine. Posée SOUS le texte — le titre passe devant si la place manque. */
  .feuille-lune{
    position:absolute; z-index:0; top:8px; right:26px;
    width:150px; height:auto; pointer-events:none;
    opacity:.92;
  }
  .feuille-marque{
    position:relative; z-index:1; display:flex; align-items:center; gap:9px;
    font-family:'Fredoka',sans-serif; font-weight:600; font-size:13px;
    letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.72);
  }
  .feuille-marque .m{
    width:15px; height:15px; border-radius:50%;
    background:radial-gradient(circle at 34% 32%, #FFFFFF 0 50%, transparent 51%), var(--terre);
  }
  .feuille h1{
    position:relative; z-index:1; font-family:'Fredoka',sans-serif; font-weight:600;
    font-size:34px; line-height:1.14; color:#FFFFFF; margin:16px 0 0; max-width:22ch;
  }
  .feuille-sous{ position:relative; z-index:1; font-size:15px; line-height:1.6; color:rgba(255,255,255,.80); margin:12px 0 0; max-width:60ch }

  .feuille-corps{ padding:34px 54px 40px }

  .feuille h2{
    font-family:'Fredoka',sans-serif; font-weight:600; font-size:19px; color:var(--canard);
    margin:32px 0 12px; padding-bottom:7px; border-bottom:1px solid #E7D5CC;
  }
  .feuille h2:first-of-type{ margin-top:0 }
  .feuille p{ font-size:15px; line-height:1.65; margin:0 0 13px }
  .feuille b{ color:#1F3130 }
  .feuille ul, .feuille ol{ margin:0 0 16px; padding-left:20px; display:grid; gap:8px; font-size:15px; line-height:1.6 }
  .feuille li::marker{ color:var(--terre-vive) }

  /* Le tableau en pastilles alternées, plutôt qu'en lignes rayées : c'est
     ce qui rend la version imprimée lisible d'un coup d'œil, à un mètre,
     collée sur un frigo. Les bordures classiques, elles, s'y perdent. */
  .feuille table{ border-collapse:separate; border-spacing:0 6px; width:100%; font-size:14.5px; margin:0 0 18px }
  .feuille th, .feuille td{ padding:11px 13px; text-align:left }
  .feuille th{
    background:var(--terre-clair); color:var(--canard);
    font-weight:600; font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  }
  .feuille th:first-child{ border-radius:9px 0 0 9px }
  .feuille th:last-child{ border-radius:0 9px 9px 0 }
  .feuille td:first-child{ border-radius:9px 0 0 9px; font-weight:600 }
  .feuille td:last-child{ border-radius:0 9px 9px 0 }
  .feuille tbody tr:nth-child(odd) td{ background:var(--canard); color:#EAF2F1 }
  .feuille tbody tr:nth-child(odd) td:first-child{ color:#FFFFFF }
  .feuille tbody tr:nth-child(even) td{ background:#FFFFFF; color:#33403F }

  /* Deux colonnes « à faire / à éviter ». En impression elles doivent tenir
     côte à côte : c'est tout l'intérêt d'une fiche à coller au mur. */
  .feuille-duo{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:0 0 18px }
  .duo-c{ border-radius:14px; padding:17px 19px; font-size:14.5px; line-height:1.55 }
  .duo-c h3{ font-family:'Fredoka',sans-serif; font-weight:600; font-size:15px; margin:0 0 10px }
  .duo-c ul{ margin:0; padding-left:18px; gap:6px; font-size:14px }
  .duo-oui{ background:var(--canard); border:1px solid var(--canard); color:#DCE9E7 }
  .duo-oui h3{ color:#FFFFFF }
  .duo-oui li::marker{ color:var(--canard-clair) }
  .duo-non{ background:var(--terre-clair); border:1px solid #E4C3B9; color:#5B4740 }
  .duo-non h3{ color:#96503C }
  .duo-non li::marker{ color:var(--terre-vive) }

  .feuille-secu{ background:#FFFFFF; border:1px solid #E7D5CC; border-left:4px solid var(--terre-vive); border-radius:14px; padding:20px 22px; margin:26px 0 0 }
  .feuille-secu h2{ border:0; margin:0 0 10px; padding:0; font-size:17px; color:#96503C }
  .feuille-secu p:last-child{ margin-bottom:0 }

  .feuille-pied{
    margin-top:32px; padding-top:16px; border-top:1px solid #E7D5CC;
    display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
    font-size:12px; color:#8A9694;
  }
  .feuille-pied a{ color:var(--canard-2); text-decoration:none }

  /* Grille à remplir (carnet de nuits) : des cases vides, faites pour le stylo.
     Ici pas d'alternance canard — on écrit dessus, il faut du clair partout. */
  .feuille-carnet tbody tr td{ background:#FFFFFF; color:#33403F }
  .feuille-carnet td{ height:34px }
  .feuille-carnet td.vide{ background:#FFFFFF }
  .feuille-carnet tbody tr td:first-child{ background:var(--terre-clair); font-weight:600; color:var(--canard); width:92px }

  /* ══ MODE APERÇU ══════════════════════════════════════════
     La page de fiche appelée avec ?apercu=1 : c'est ce que montrent les
     cadres de la vitrine. On enlève tout ce qui n'est pas le document —
     sinon la miniature afficherait surtout un menu et un fil d'Ariane.
     La classe est posée par un script en <head>, avant le rendu, pour
     qu'aucune vignette ne clignote en passant par la version complète. */
  .apercu .sky, .apercu nav, .apercu footer,
  .apercu .ariane, .apercu .fiche-actions, .apercu .fiches-suite, .apercu .fm{ display:none !important }
  .apercu body{ background:var(--creme) }
  .apercu .fiche-wrap{ max-width:none; padding:0 }
  .apercu .feuille{ box-shadow:none; border-radius:0 }
  .apercu .feuille-tete{ padding:26px 34px 24px }
  .apercu .feuille h1{ font-size:29px }
  .apercu .feuille-corps{ padding:26px 34px 30px }
  .apercu .feuille-pied{ display:none }

  /* ══ IMPRESSION ═══════════════════════════════════════════ */

  @media print{
    /* Le décor du site n'a rien à faire sur une feuille de papier — et le
       ciel étoilé en aplat sombre viderait une cartouche d'encre. */
    .sky, .stars, nav, footer, .ariane, .fiche-actions, .cta-article, .fm, .fiche-print-non{ display:none !important }
    html, body{ background:#fff !important; color:#2E3B3A !important }
    /* Sans ceci, les navigateurs suppriment les fonds à l'impression : les
       pastilles vert-canard disparaîtraient en laissant du texte BLANC sur du
       papier blanc. Le tableau deviendrait vide. */
    *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important }
    .feuille{ background:#fff !important }
    .fiche-wrap{ max-width:none; padding:0 }
    .feuille{ box-shadow:none; border-radius:0; padding:0; overflow:visible }
    /* Le bandeau garde sa couleur — c'est l'en-tête du document — mais il ne
       déborde plus : à l'impression, la marge de page fait déjà le cadre. */
    .feuille-tete{ padding:22px 26px 20px }
    .feuille-corps{ padding:24px 0 0 }
    .feuille h2{ break-after:avoid }
    .feuille table, .feuille-duo, .feuille-secu{ break-inside:avoid }
    @page{ margin:14mm 13mm }
  }

  @media(max-width:640px){
    .feuille{ border-radius:16px }
    .feuille-tete{ padding:24px 22px 22px }
    .feuille-corps{ padding:26px 22px 28px }
    .feuille h1{ font-size:24px; max-width:none }
    /* Sous 640 px, la lune passerait derrière le titre : on la réduit et on
       la remonte dans le coin, là où il n'y a que le nom de la marque. */
    .feuille-lune{ width:96px; top:2px; right:8px; opacity:.75 }
    .feuille-duo{ grid-template-columns:1fr }
    /* Un tableau de 4 colonnes ne rentre pas sur un téléphone : on le laisse
       défiler plutôt que de l'écraser illisible. */
    .feuille-scroll{ overflow-x:auto; margin:0 -22px 18px; padding:0 22px }
    .feuille-scroll table{ min-width:480px }
    .fm-boite{ padding:28px 20px 22px; border-radius:20px }
    .fm-h{ font-size:20px }
  }

/* ── Le verrou de la fiche ─────────────────────────────────────
   Depuis le 25/07/2026, le contenu des fiches ne s'ouvre plus qu'avec le lien
   signé reçu par email (api/fiche-lire.php). La page publique garde le titre,
   le sommaire réel et le formulaire : assez pour que Google l'indexe et que la
   lectrice sache ce qu'elle demande, jamais assez pour se passer de l'envoi.

   Une visiteuse a lu les quatre fiches en 45 secondes le 25/07 sans laisser
   d'adresse : c'est ce trou-là qu'on ferme. */
.fiche-verrou{
  text-align:center;
  max-width:34em; margin:0 auto; padding:8px 0 4px;
}
.fiche-verrou > svg{ color:var(--lav); margin-bottom:10px }
.fiche-verrou h2{ margin:0 0 10px; font-size:22px }
.fiche-verrou p{ color:var(--muted); margin:0 0 16px }
.fiche-verrou-somm{
  font-weight:600; color:var(--text); margin-bottom:8px !important;
  font-size:14px; letter-spacing:.02em;
}
.fiche-verrou-liste{
  list-style:none; margin:0 auto 22px; padding:0;
  display:inline-flex; flex-direction:column; gap:8px; text-align:left;
}
.fiche-verrou-liste li{
  position:relative; padding-left:26px; color:var(--text); font-size:15px;
}
/* Une puce en forme de lune plutôt qu'un point : la fiche est fermée, pas vide. */
.fiche-verrou-liste li::before{
  content:""; position:absolute; left:4px; top:.55em;
  width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 34% 32%, #fff 0 46%, transparent 47%), var(--lav);
}
.fiche-verrou .note{ margin-top:14px; font-size:12.5px }

@media(max-width:640px){
  .fiche-verrou h2{ font-size:19px }
  .fiche-verrou-liste li{ font-size:14.5px }
}