/* APIA — Single Cahier (/cahiers/{slug}/) — node Figma 895:7737. Valeurs extraites par node (QA 15/06).
   Dépendances : apia-enjeu.css (l-rail, c-rcard, c-resgrid, c-renforcer, c-enjeu-btn).
   Rythme : gap racine 96 entre sections (node). Formulaire = inputs blancs sur la carte nuit (pas de carte blanche). */
.apia-cahier{display:flex;flex-direction:column;gap:96px;padding:48px 16px 96px}
.s-cah{margin:0}

/* 1. Fil d'ariane (collé au hero : 32px sous, pas 96) */
.c-cah-crumb{margin:0 0 -64px}
.c-cah-crumb .l-rail{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.c-cah-crumb a{display:inline-flex;align-items:center;font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;color:var(--apia-gris-bleu);text-decoration:none}
.c-cah-crumb a[aria-current="page"]{color:#1c1c1c}
.c-cah-crumb a:hover{color:var(--apia-bleu)}
.c-cah-crumb__sep{display:inline-flex;align-items:center;color:var(--apia-gris-bleu)}
.c-cah-crumb__sep svg{width:16px;height:16px;display:block}

/* 2-4. Hero : H1 (48/52 #1c1c1c) + sous-titre (23/28 SemiBold gris-bleu) + carte nuit (couverture | formulaire) */
.s-cah--hero .l-rail{display:flex;flex-direction:column;gap:16px}
.c-cah-h1{font-family:var(--apia-font);font-weight:600;font-size:48px;line-height:52px;color:#1c1c1c;margin:0;max-width:880px}
.c-cah-sub{font-family:var(--apia-font);font-weight:600;font-size:23px;line-height:28px;color:var(--apia-gris-bleu);margin:0;max-width:880px}
.c-cah-hero__card{margin-top:16px;background:var(--apia-bleu-marine);border-radius:28px;padding:24px;display:grid;grid-template-columns:340px 1fr;column-gap:16px;align-items:center}
.c-cah-hero__cover{display:flex;align-items:center;justify-content:center;padding:10px}
.c-cah-hero__cover img{width:195px;height:273px;object-fit:cover;border-radius:4px;box-shadow:14px 20px 15px rgba(0,0,0,.5)}
.c-cah-hero__coverph{display:block;width:195px;height:273px;border-radius:4px;background:linear-gradient(135deg,#0d58c9,#051d2e);box-shadow:14px 20px 15px rgba(0,0,0,.5)}
.c-cah-hero__form{display:block}

/* Formulaire Gravity sur la carte marine (node 895:7758) : grille 2 colonnes posée sur le <form>
   via display:contents (aplatit body/fields/footer) + grid-auto-flow:dense -> le bouton Gravity (footer,
   placé en dernier dans le DOM) vient combler la ligne 4 colonne 2, à droite du téléphone (fidèle Figma).
   Inputs blancs r12 sans bordure, placeholder gris-bleu ; consentement + mention en pleine largeur dessous. */
.c-cah-form{padding:48px}
.c-cah-form .gform_wrapper{margin:0}
.c-cah-form .gform_heading,.c-cah-form .gform_required_legend,.c-cah-form .gform_anchor{display:none !important}
.c-cah-form form,.c-cah-form .gform_wrapper form{display:grid !important;grid-template-columns:1fr 1fr !important;gap:16px !important;grid-auto-flow:dense}
.c-cah-form .gform_body,.c-cah-form .gform-body,.c-cah-form .gform_fields{display:contents !important;margin:0 !important;padding:0 !important}
.c-cah-form .gfield{margin:0 !important;padding:0 !important;min-width:0;grid-column:auto !important}
.c-cah-form .gfield--width-full,.c-cah-form .gfield--type-html,.c-cah-form .gfield--type-checkbox{grid-column:1/-1 !important}
.c-cah-form .gform_hidden,.c-cah-form .gfield--type-hidden{display:none !important}
.c-cah-form .gfield_label{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.c-cah-form .ginput_container{margin-top:0 !important}
.c-cah-form .ginput_container input,.c-cah-form .ginput_container select,.c-cah-form .ginput_container textarea{width:100%;background:var(--apia-blanc);border:0 !important;border-radius:12px !important;padding:8px 16px;min-height:40px;box-shadow:none !important;outline:0;appearance:none;-webkit-appearance:none;-moz-appearance:none;font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;color:var(--apia-bleu-nuit)}
.c-cah-form .ginput_container input::placeholder,.c-cah-form .ginput_container textarea::placeholder{color:#9fb2c5;opacity:1}
.c-cah-form .ginput_container select,.c-cah-form select.gfield_select{appearance:none !important;-webkit-appearance:none !important;-moz-appearance:none !important;padding-right:40px;background-color:var(--apia-blanc);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23546D88' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:16px 16px;color:var(--apia-bleu-nuit)}
.c-cah-form .gfield_required{color:var(--apia-bleu-ciel)}
/* Bouton Télécharger : ligne 4 colonne 2 (dense backfill), bleu */
.c-cah-form .gform_footer{display:contents !important;margin:0 !important;padding:0 !important}
.c-cah-form .gform_footer>*:not(.gform_button){display:none !important}
.c-cah-form .gform_button{align-self:start;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:4px;background:var(--apia-bleu);color:var(--apia-bleu-clair);border:0;border-radius:12px;padding:8px 16px;min-height:40px;font-family:var(--apia-font);font-weight:600;font-size:16px;line-height:22px;cursor:pointer}
.c-cah-form .gform_button svg{width:16px;height:16px;flex:0 0 16px}
/* Consentement + mention légale (texte clair sur marine) */
.c-cah-form .gfield--type-checkbox .gchoice{display:flex;align-items:flex-start;gap:8px}
.c-cah-form .gfield--type-checkbox label,.c-cah-form .gchoice label{font-family:var(--apia-font);font-weight:500;font-size:14px;line-height:18px;color:#9fb2c5;margin:0}
/* GF orbital pose appearance:none + un reset de bordure en !important : sans !important ici la
   bordure calculait 0px, et l'etat :checked ne dessinait RIEN (case blanche muette alors que ce
   consentement est obligatoire). Mesure 31/07. La coche est redessinee explicitement. */
.c-cah-form .gfield--type-checkbox input[type=checkbox]{flex:0 0 18px;width:18px;height:18px;margin:1px 0 0;border:2px solid #9fb2c5 !important;border-radius:4px;background-color:#fff;background-image:none;accent-color:var(--apia-bleu);cursor:pointer}
.c-cah-form .gfield--type-checkbox input[type=checkbox]:checked{border-color:var(--apia-bleu) !important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.4l3 3 6-6' stroke='%230D58C9' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;background-size:16px 16px;background-position:center;background-repeat:no-repeat}
.c-cah-form .gfield--type-html{font-family:var(--apia-font);font-weight:400;font-size:11px;line-height:15px;color:#9fb2c5}
.c-cah-form .gfield--type-html a{color:var(--apia-bleu-ciel);text-decoration:underline}
/* Message de confirmation apres soumission (remplace le formulaire en AJAX, DANS la carte nuit).
   Aucune regle ne le ciblait : il s'affichait en texte nu sur fond sombre (recette Olivier L271,
   « message peu visible »). Carte claire = contraste fort + statut lisible comme un accuse. */
.c-cah-form .gform_confirmation_message,.c-cah-form .gform_confirmation_wrapper{display:block;background:var(--apia-bleu-clair);border-radius:12px;padding:20px 24px;font-family:var(--apia-font);font-weight:600;font-size:16px;line-height:24px;color:var(--apia-bleu-nuit);margin:0;text-align:left}
.c-cah-form .gform_confirmation_message a{color:var(--apia-bleu);text-decoration:underline}
.c-cah-form--soon{display:flex;align-items:center;justify-content:center;text-align:center;min-height:200px}
.c-cah-form--soon p{font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;color:var(--apia-blanc);margin:0}
.c-cah-form--soon a{color:var(--apia-bleu-ciel);text-decoration:underline}

/* 5. Pourquoi utile — 2 colonnes (titre 33/36 / texte 16/23) */
.c-cah-why{display:grid;grid-template-columns:5fr 6fr;gap:48px;align-items:start}
.c-cah-why__title{font-family:var(--apia-font);font-weight:600;font-size:33px;line-height:36px;color:#1c1c1c;margin:0}
.c-cah-why__text{font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;color:var(--apia-gris-bleu)}
.c-cah-why__text p{margin:0 0 16px}
.c-cah-why__text p:last-child{margin-bottom:0}

/* 6. Bannière 1052×271 r28 (image aplatie : photo + motif + barre, node 895:7778) */
.c-cah-banner{display:block;width:100%;max-width:1052px;aspect-ratio:1052/271;object-fit:cover;border-radius:28px;margin:0 auto}

/* Titres de section (33/36 #1c1c1c) */
.c-cah-h2{font-family:var(--apia-font);font-weight:600;font-size:33px;line-height:36px;color:#1c1c1c;margin:0 0 48px}

/* 7. Ce que vous allez trouver — cartes bleu clair (titre 23/28 #001F5F, texte 16/23 #546D88) */
.c-cah-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.c-cah-card{background:var(--apia-bleu-clair);border-radius:28px;padding:24px 48px 24px 24px;display:flex;flex-direction:column;gap:48px}
.c-cah-card__title{font-family:var(--apia-font);font-weight:600;font-size:23px;line-height:28px;color:var(--apia-bleu-marine);margin:0}
.c-cah-card__text{font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;color:var(--apia-gris-bleu);margin:0}

/* 8. 4 idées fortes — bande bleu-marine full-bleed py160, titre 48/52 ciel */
.s-cah--idees{margin-inline:-16px;background:var(--apia-bleu-marine);padding:160px 16px}
.s-cah--idees .c-cah-h2{font-size:48px;line-height:52px;color:var(--apia-bleu-ciel);margin:0 0 48px}
.c-cah-idees{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.c-cah-idee{display:flex;flex-direction:column;gap:24px;padding:48px 48px 48px 0}
.c-cah-idee__head{display:flex;flex-direction:column;gap:16px}
.c-cah-idee__num{font-family:var(--apia-font);font-weight:600;font-size:33px;line-height:36px;color:var(--apia-bleu);margin:0}
.c-cah-idee__title{font-family:var(--apia-font);font-weight:600;font-size:23px;line-height:28px;color:var(--apia-bleu-ciel);margin:0}
.c-cah-idee__text{font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;color:var(--apia-blanc);margin:0}

/* 9. À qui s'adresse — titre 33/36 + lignes bleu clair (19/24 SemiBold #001F5F, radius 16) */
.c-cah-aqui{display:grid;grid-template-columns:3fr 8fr;gap:32px;align-items:start}
.c-cah-aqui__title{font-family:var(--apia-font);font-weight:600;font-size:33px;line-height:36px;color:#1c1c1c;margin:0}
.c-cah-aqui__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.c-cah-aqui__row{background:var(--apia-bleu-clair);border-radius:16px;padding:24px 48px 24px 24px;font-family:var(--apia-font);font-weight:600;font-size:19px;line-height:24px;color:var(--apia-bleu-marine)}

/* 10a. CTA « faire le point » (carte nuit, photo + pyramide) */
.c-cah-cta{position:relative;background:var(--apia-bleu-nuit);border-radius:28px;overflow:hidden;display:grid;grid-template-columns:5fr 7fr;align-items:stretch;min-height:399px}
.c-cah-cta__content{display:flex;flex-direction:column;gap:24px;align-items:flex-start;justify-content:center;padding:48px 16px 48px 89px}
.c-cah-cta__text{display:flex;flex-direction:column;gap:10px}
.c-cah-cta__title{font-family:var(--apia-font);font-weight:600;font-size:33px;line-height:36px;color:var(--apia-blanc);margin:0}
.c-cah-cta__sub{font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;color:var(--apia-bleu-ciel);margin:0}
.c-cah-cta__btn{display:inline-flex;align-items:center;gap:4px;background:var(--apia-bleu);color:var(--apia-bleu-clair);font-family:var(--apia-font);font-weight:600;font-size:16px;line-height:22px;padding:8px 16px;border-radius:12px;text-decoration:none}
.c-cah-cta__media{position:relative;align-self:stretch;overflow:hidden}
.c-cah-cta__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.c-cah-cta__pyr{position:absolute;left:0;top:0;height:100%;width:auto;pointer-events:none}

/* 10b. Pour aller plus loin (cartes enjeux bleu clair + bouton Consulter nuit) */
.s-cah--loin .l-rail{display:flex;flex-direction:column;gap:48px}
.c-cah-loin__title{font-family:var(--apia-font);font-weight:600;font-size:48px;line-height:52px;color:#1c1c1c;margin:0}
.c-cah-loin__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.c-cah-loin__card{background:var(--apia-bleu-clair);border-radius:28px;padding:24px;display:flex;flex-direction:column;gap:32px;align-items:flex-start}
.c-cah-loin__name{font-family:var(--apia-font);font-weight:600;font-size:19px;line-height:24px;color:var(--apia-bleu-nuit);margin:0}
.c-cah-loin__btn{display:inline-flex;align-items:center;gap:4px;background:var(--apia-bleu-nuit);color:var(--apia-bleu-clair);font-family:var(--apia-font);font-weight:600;font-size:16px;line-height:22px;padding:8px 16px;border-radius:12px;text-decoration:none}

/* Responsive */
@media (max-width:991px){
.apia-cahier{gap:56px;padding:32px 16px 56px}
.c-cah-crumb{margin-bottom:-40px}
.c-cah-h1{font-size:33px;line-height:38px}
.c-cah-sub{font-size:19px;line-height:26px}
.c-cah-hero__card{grid-template-columns:1fr;gap:16px}
.c-cah-hero__cover{padding:8px}
.c-cah-form{padding:24px}
.c-cah-why,.c-cah-aqui{grid-template-columns:1fr;gap:24px}
.c-cah-h2,.s-cah--idees .c-cah-h2{font-size:28px;line-height:33px;margin-bottom:32px}
.c-cah-grid{grid-template-columns:1fr 1fr}
.s-cah--idees{padding:64px 16px}
.c-cah-idees{grid-template-columns:1fr;gap:8px}
.c-cah-idee{padding:24px 0}
.c-cah-cta{grid-template-columns:1fr;min-height:0}
.c-cah-cta__content{padding:32px;order:2}
.c-cah-cta__media{min-height:240px;order:1}
.c-cah-loin__title{font-size:28px;line-height:33px}
.c-cah-loin__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
.c-cah-h1{font-size:28px;line-height:33px}
.c-cah-form form,.c-cah-form .gform_wrapper form{grid-template-columns:1fr !important}
.c-cah-form .gfield{grid-column:1/-1 !important}
.c-cah-grid{grid-template-columns:1fr}
.c-cah-loin__grid{grid-template-columns:1fr}
}

/* Familles du cahier (principale d'abord) -> archive filtree. Classification APIA 05/08/2026.
   Meme spec visuelle que la pastille du hub Ressources, redefinie ici car apia-ressources.css
   n'est pas enqueue sur le single (deps du single = apia-enjeu.css + apia-cahier.css). */
.c-cah-fams{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.c-cah-fam{display:inline-block;background:var(--apia-bleu-clair);color:var(--apia-bleu-marine);border-radius:8px;padding:8px 16px;font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;text-decoration:none;white-space:nowrap}
/* =====================================================================
   APIA — Mouvement (2026-08-28). Tokens : Bricks > Settings > Custom CSS.
   Un seul idiome : le fond s'assombrit vers le marine, l'element monte d'1px,
   le chevron avance de 3px ; au clic il redescend et se comprime a 99 %.
   Remplace les idiomes filter:brightness(). Zero JavaScript.
   ===================================================================== */

.c-cah-cta__btn,.c-cah-loin__btn,.c-cah-fam{transition:background-color var(--apia-dur-fast) var(--apia-ease),color var(--apia-dur-fast) var(--apia-ease),transform var(--apia-dur-fast) var(--apia-ease),box-shadow var(--apia-dur-fast) var(--apia-ease)}
@media (hover:hover){
  .c-cah-cta__btn:hover{background-color:var(--apia-btn-hov-bg);color:var(--apia-btn-hov-fg);transform:translateY(-1px);box-shadow:var(--apia-btn-hov-shadow)}
  .c-cah-loin__btn:hover{background-color:var(--apia-bleu);transform:translateY(-1px);box-shadow:0 4px 12px rgba(5,29,46,.22)}
  .c-cah-fam:hover{background-color:var(--apia-bleu-ciel)}
  .c-cah-form .gform_button:hover{background-color:var(--apia-bleu-marine)}
}
.c-cah-cta__btn:active,.c-cah-loin__btn:active{background-color:var(--apia-btn-act-bg);color:var(--apia-btn-act-fg);transform:translateY(0) scale(.98);box-shadow:inset 0 2px 6px rgba(0,0,0,.30);transition-duration:90ms}
.c-cah-cta__btn:focus-visible,.c-cah-loin__btn:focus-visible,.c-cah-fam:focus-visible{outline:2px solid var(--apia-bleu-marine);outline-offset:2px}