/* ==========================================================================
   Pages vivantes · variante A « Bandeaux d'ambiance »
   L'image devient le fond du chapitre et le texte se pose dessus, sous un voile :
   même grammaire que le hero vidéo et l'appel de l'accueil.
   Feuille chargée après v3.css par Méthode, Gérances, Réalisations, Formation, À propos, Blog
   et l'accueil (où seule la gravure 1879 la concerne).
   Aucune règle de v3.css n'est modifiée : tout passe par les classes .viv-*.
   ========================================================================== */

/* Fond de fondu : couleur dans laquelle l'image se dissout (base ou surface selon la section) */
:root{--viv-fond:var(--bg-base)}
.sec-alt{--viv-fond:var(--bg-surface)}

/* --- 1. Hero photographié (remplace le halo seul des pages annexes) --- */
.phero.viv-hero{padding:0;min-height:min(80svh,720px);display:flex;align-items:center;background:var(--bg-base)}
.viv-hero>.viv-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,70% 50%)}
.viv-hero::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(95deg,var(--bg-base) 18%,var(--veil) var(--voile,52%),color-mix(in srgb,var(--bg-base) 18%,transparent) 88%)}
.viv-hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:22%;z-index:1;background:linear-gradient(to top,var(--bg-base),transparent)}
.viv-hero .container{position:relative;z-index:2;width:100%;padding-top:96px;padding-bottom:96px}
.viv-hero .phero-in{max-width:700px}
.viv-hero .enbref{background:color-mix(in srgb,var(--bg-base) 78%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* Thème clair : le voile s'efface plus tôt pour que l'image garde ses couleurs */
@media(min-width:901px){[data-theme=light] .viv-hero::before{background:linear-gradient(95deg,var(--bg-base) 18%,var(--veil) var(--voile,50%),transparent 84%)}}
/* --voile (style de la section) prolonge le voile quand l'image est chargée sous le texte (Blog) */

/* --- 2. Bandeau d'ouverture de chapitre : l'image porte le titre du chapitre --- */
.viv-sec{padding-top:0}
.viv-band{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(420px,42vw,560px);display:flex;align-items:flex-end;margin-bottom:52px;border-bottom:1px solid var(--border)}
.viv-band>.viv-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:var(--pos,60% 50%)}
.viv-band::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(95deg,var(--viv-fond) 14%,color-mix(in srgb,var(--viv-fond) 72%,transparent) 46%,transparent 80%),linear-gradient(to top,var(--viv-fond),transparent 34%)}
.viv-band .container{width:100%;padding-top:96px;padding-bottom:40px}
.viv-band .sec-h{margin-bottom:0;max-width:620px}
.viv-band .sec-h p{color:var(--text-primary);opacity:.86}

/* Lent travelling sur l'image (désactivé en mouvement réduit) */
@media (prefers-reduced-motion:no-preference){
.viv-hero>.viv-img,.viv-band>.viv-img{animation:vivKb 26s ease-in-out infinite alternate}
@keyframes vivKb{from{transform:scale(1.02)}to{transform:scale(1.08) translate(-1%,0)}}}

/* --- 2 bis. Scène : image à bord perdu sur la droite, contenu sur un panneau de verre qui la chevauche --- */
.viv-scene{position:relative;isolation:isolate;overflow:hidden}
.viv-scene>.viv-img{position:absolute;top:0;right:0;bottom:0;z-index:-2;width:62%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.viv-scene::before{content:'';position:absolute;top:0;bottom:0;right:0;width:62%;z-index:-1;background:linear-gradient(90deg,var(--viv-fond),transparent 26%),linear-gradient(to top,color-mix(in srgb,var(--viv-fond) 50%,transparent),transparent 30%)}
.viv-scene .container{display:flex;min-height:clamp(520px,46vw,680px);align-items:center}
.viv-verre{width:min(600px,100%);padding:40px 40px 36px;background:color-mix(in srgb,var(--bg-base) 82%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--border-hover);border-radius:var(--radius-xl);box-shadow:0 30px 60px -40px rgba(0,0,0,.6)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.viv-verre{background:color-mix(in srgb,var(--bg-base) 95%,transparent)}}
.viv-verre .sec-h{margin-bottom:26px}
.viv-verre .sec-h h2{font-size:clamp(1.6rem,2.6vw,2.15rem)}
.viv-verre .porte{grid-template-columns:1fr;gap:14px;margin-bottom:0}
.viv-verre .pc{padding:22px 24px}
.viv-verre .note-libre{margin-top:24px}

/* --- 3. Lueur d'accent pour les chapitres sans image (cartographie, porte d'entrée) --- */
.viv-lueur{background:radial-gradient(ellipse 55% 70% at 100% 0%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%),radial-gradient(ellipse 40% 60% at 0% 100%,var(--accent-subtle),transparent 70%),var(--viv-fond)}

/* --- 5. Chasse aux vides : colonnes et cartes rééquilibrées par la mise en page, jamais par le texte --- */
/* Méthode, cartographie : deux colonnes, numéro à gauche du texte ; le contenu se centre dans sa carte */
@media(min-width:701px){
#cartographie ol.carto{grid-template-columns:repeat(2,minmax(0,1fr))}
#cartographie .carto li{grid-template-columns:42px 1fr;gap:16px;align-content:center}}
/* Méthode, origine : la carte « Brevet fédéral », plus longue, reçoit la colonne la plus large */
@media(min-width:861px){#origine .vs{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
/* Gérances, porte d'entrée : même principe pour les deux étapes */
@media(min-width:901px){.viv-lueur .porte{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}}
/* Formation, « Pour qui » et « Ce qu'on y fait » : la liste, plus longue, reçoit la colonne la plus large */
@media(min-width:901px){.viv-pourqui .moi-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}}
/* Formation, six journées : deux colonnes, les textes s'y égalisent */
@media(min-width:861px){.viv-jours .jours{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Blog : date et titre en haut, résumé calé en bas, pour que les cartes d'une même ligne finissent ensemble ;
   la dernière carte seule sur sa ligne prend toute la largeur */
#sous-le-capot .rea>.rc,#scripts .rea>.rc{display:flex;flex-direction:column}
#sous-le-capot .rea>.rc>p:last-child,#scripts .rea>.rc>p:last-child{margin-top:auto;padding-top:10px}
@media(min-width:861px){#sous-le-capot .rea>.rc:last-child:nth-child(odd),#scripts .rea>.rc:last-child:nth-child(odd){grid-column:1/-1}}
/* À propos, « Ce que ça change pour vous » : titre et introduction en pleine largeur,
   puis les cinq preuves sur deux colonnes, dans l'ordre d'origine ; la colonne des deux preuves les plus longues
   est la plus large, pour que les deux colonnes finissent à la même hauteur */
.viv-moi .moi-grid{grid-template-columns:1fr;gap:44px}
.viv-moi .moi-grid>.rv:first-child{max-width:820px}
.viv-moi .viv-col{display:grid;gap:14px}
@media(min-width:901px){
/* lot 2 (passe N) : Caméléon et Pédagogie | Lean, Brevet, Trois langues ; colonnes égales, hauteurs mesurées à 4 px près (1280 et 1440) */
.viv-moi .preuves{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 56px;align-items:start}
.viv-moi .pv{grid-template-columns:130px 1fr}}
/* À propos, « Qui vous répond » : le texte se centre face au portrait */
.viv-moi~.sec .moi-grid{align-items:center}

/* --- 6. Accueil, chapitre « Le câblage » : le schéma animé accompagne la lecture de la colonne de gauche.
   Collant sous l'en-tête fixe (68 px) au lieu d'être centré : il reste à l'écran pendant toute la lecture
   de l'audit et de la cartographie, au lieu de flotter au milieu d'une colonne deux fois plus haute que lui.
   Colonnes empilées sous 941 px : rien ne change. --- */
@media(min-width:941px){
#methode .cab-grid{align-items:start}
#methode .cab-grid>.map{position:sticky;top:96px}}

/* --- 4. Accueil, chapitre 1879 : gravure d'ampoule en transparence derrière le millésime --- */
#ampoule{position:relative;isolation:isolate;overflow:hidden}
#ampoule::before{content:'';position:absolute;z-index:-1;top:50%;left:max(0px,calc((100vw - var(--max))/2 - 40px));width:min(420px,40vw);aspect-ratio:482/799;transform:translateY(-50%) rotate(-8deg);background:var(--accent);-webkit-mask:url(/assets/img/vivantes/accueil-ampoule-gravure.webp) center/contain no-repeat;mask:url(/assets/img/vivantes/accueil-ampoule-gravure.webp) center/contain no-repeat;opacity:.2;pointer-events:none}
[data-theme=light] #ampoule::before{opacity:.16}

/* --- Mobile et tablette : l'image passe au-dessus du texte et s'y fond --- */
@media(max-width:900px){
.phero.viv-hero{display:block;min-height:0;padding-top:58vw}
.viv-hero>.viv-img{height:72vw}
.viv-hero::before{background:linear-gradient(to bottom,transparent 22vw,var(--bg-base) 70vw)}
.viv-hero::after{display:none}
.viv-hero .container{padding-top:0;padding-bottom:56px}
.viv-band{display:block;min-height:0;padding-top:48vw;margin-bottom:36px}
.viv-band>.viv-img{height:64vw}
.viv-band::before{background:linear-gradient(to bottom,transparent 18vw,var(--viv-fond) 62vw)}
.viv-band .container{padding-top:0;padding-bottom:8px}
.viv-scene{padding-top:0}
.viv-scene>.viv-img{position:relative;display:block;width:100%;height:auto;aspect-ratio:4/3}
.viv-scene::before{width:100%;height:calc(75vw + 2px);background:linear-gradient(to top,var(--viv-fond) 0,var(--viv-fond) 10%,transparent 46%)}
.viv-scene .container{display:block;min-height:0;margin-top:-22px;padding-bottom:4px}
.viv-verre{padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;box-shadow:none;border-radius:0}
#ampoule::before{top:28px;left:-24px;width:62vw;transform:rotate(-8deg);opacity:.16}
[data-theme=light] #ampoule::before{opacity:.12}
}
/* À propos, lot 2 (passe N) : « Je vis ce que je propose » en trois cartes sur une ligne au bureau ; suite du texte Lean à la ligne */
@media(min-width:861px){.rea.rea-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pv .pv-suite{display:block;margin-top:10px}