/**
 * Sections Styles - Desktop uniquement
 *
 * Styles pour les colonnes des sections.
 *
 * @package     UneAutreVoix
 * @author      Horizon Signature
 * @copyright   2026 Horizon Signature
 * @license     Proprietary
 * @version     0.1.0
 *
 * @changelog
 * 0.1.0 — Passage en preprod
 * 0.0.183 - mission-icon-svg : 1em×1em + vertical-align -0.1em (fix inflation line-height)
 * 0.0.182 - h2.h2-author : width 100% (était 75vh)
 * 0.0.181 - E7 : Déduplication CSS FAQ / FAQ Courte (desktop)
 *           - Sélecteurs combinés pour .faq-question, ::details-marker, .faq-answer p, p:last-child, a:hover
 *           - Règles différentes conservées séparées (.faq-question::after, .faq-answer a)
 * 0.0.180 - A2 : Suppression bloc @media (max-width: 1200px) imbriqué dans @media (min-width: 1201px)
 *           (reset parallax #nuage-or-transmission, #jouet-avion, #jouet-train — déplacé dans sections-responsive.css)
 *         - E6 : @keyframes transmissionIntroBounce sorti du bloc @media (min-width: 1201px)
 *           → disponible pour tous les breakpoints depuis ce fichier (suppression doublon dans sections-responsive.css)
 * 0.0.179 - Animation avion en vol sur .section-model-transmission-mission .mission-toy img
 *           - @keyframes airplane-fly : banking (rotate) + légère houle (translateY), rythme asymétrique
 *           - Animé sur l'img (le transform de position est sur le parent div → zéro conflit)
 * 0.0.178 - Fix CLS jouets parallax : apparition fade-in + slide-up via CSS @keyframes
 *           - @keyframes toy-fade-in (outer) + toy-inner-appear (inner .toy-inner)
 *           - toy2: delay 0.25s — toy1: delay 0.5s — fill-mode: both (hidden pendant délai)
 *           - submarine-float déplacé sur .transmission-hero-toy-2 .toy-inner, démarre à 1s
 *           - Zéro inline style, zéro JS : le CLS est impossible
 * 0.0.177 - Suppression violations opacity (règle no-opacity)
 *         - .contact-form-field label : opacity: 0.6 → color: var(--color-text-light)
 *         - .contact-form-field input/textarea::placeholder : opacity: 0.45 → color: var(--color-text-light)
 * 0.0.176 - Transmission Hero : animation flottement sous-marin (.transmission-hero-toy-2)
 *           - @keyframes submarine-float : translateY 0→-1.2vh + rotate -1→+1deg, 3.5s ease-in-out infini
 *           - Aucun conflit avec le parallax JS (qui utilise style.translate / style.scale)
 * 0.0.175 - Transmission Hero : jouets non coupés sur les bords de col2
 *           - col2 passe à overflow: visible → les jouets peuvent déborder
 *           - .transmission-hero-background-wrap : position absolute; inset 0; overflow hidden
 *             → clip uniquement l'image de fond, sans déformer son rendu
 * 0.0.173 - Colonne contenu : listes ul/ol (margin-bottom, padding-left, bullet square) + li (même typo que p)
 * 0.0.172 - Section Transmission - Mission : margin-right 20vh
 * 0.0.171 - Section Transmission - Mission : .mission-text margin-top --spacing-md, width 67vh
 * 0.0.170 - Section Transmission - Mission : section complète (nuages, jouet, titre H2 + icônes, CTA)
 *         - Section Transmission - Hero : margin-right -20vh, toys agrandis (18vh / 26vh)
 *         - toy-2 : left -16vh
 * 0.0.169 - .contact-map-inner : conteneur enfant absolu pour Google Maps (canvas sans inline CSS)
 * 0.0.168 - Formulaire de contact succès : couleur texte, taille et graisse augmentées
 * 0.0.167 - Formulaire de contact : .column-model-contact-form, inputs, row, feedback
 * 0.0.166 - Section Contact - Map : .contact-map-content (H1, H2, texte) positionné tiers droit
 * 0.0.165 - Section Contact - Map : canvas absolu plein fond, adresse positionnée tiers gauche
 *          - padding: 0 !important sur .section-model-contact-map
 *          - .contact-map-canvas : position absolute inset 0
 *          - .contact-map-address : left 8vh, top 50% transform, bg + border, max-width 28vh
 * 0.0.164 - Sélection texte : background var(--color-text), couleur var(--color-background)
 * 0.0.163 - Bandeau animé desktop : support <picture> (Imagify) avec dimensions explicites
 *          - picture { width: 85%; aspect-ratio: 4/3 } → l'image remplit toujours l'espace prévu
 *          - picture img { width/height: 100%; aspect-ratio: unset } → remplit le conteneur picture
 *          - Corrige le cas petite image native : sans cela, width: 85% sur img se résout circulairement
 * 0.0.162 - Section FAQ : titre catégorie au-dessus des colonnes (faq-category flex-column + faq-columns-wrapper)
 * 0.0.161 - Section FAQ : liens dans les réponses stylés comme articles + icône +/× agrandie
 *         - Bandeau animé : flex-shrink: 0 (corrige la coupure en haut en mode single-column)
 * 0.0.160 - Section FAQ : animation grid-template-rows (ouverture + fermeture), catégories en flex-row
 *         - Styles partagés hors media query (animation, structure, h4 reset)
 *         - .faq-categories : flex-direction row (catégories côte à côte en scroll horizontal)
 *         - Retrait des sélecteurs details[open] (remplacés par .faq-item.is-open via JS)
 * 0.0.159 - Section FAQ : accordion, colonnes 66.66vh, gap 8vh (desktop)
 * 0.0.158 - Colonne contenu : display flex column gap md (H3 → contenu)
 * 0.0.157 - Colonne contenu : hr avec margin-top/bottom spacing-lg
 * 0.0.156 - Section Équipe : gap spacing-sm sur equipe-person-wrapper
 * 0.0.155 - Section Équipe : gap image/textes spacing-sm → spacing-md
 * 0.0.154 - Section Équipe : zigzag via wrapper (plus nth-child 1) + padding sm → md
 * 0.0.153 - Section Équipe : padding spacing-sm sur equipe-person (pas sur le wrapper)
 * 0.0.152 - Section Équipe : wrapper première fiche (flex-column) pour H2 au-dessus
 * 0.0.151 - Section Équipe : padding 8vh → 0 sur equipe-person + gap spacing-xl sur la grid
 * 0.0.150 - Section Équipe : equipe-section-title width 65vh
 * 0.0.149 - Section Équipe : zigzag commence à la 2e fiche (1re sans décalage)
 * 0.0.148 - Section Équipe : equipe-person-name stylé comme h2-standard (h3 sémantique)
 * 0.0.147 - Section Équipe : equipe-person-role font-style italic
 * 0.0.146 - Section Équipe desktop : gap identity spacing-xs → spacing-2xs
 * 0.0.145.1 - Section Équipe : effet zigzag sur les membres
 *           - Impairs : translateY(-spacing-lg), pairs : translateY(+spacing-lg)
 *           - Personne unique : transform none (pas de décalage)
 *           - Transition : var(--transition-transform)
 * 0.0.145 - Section Équipe : styles desktop (persons grid horizontal scroll)
 *           - .section-model-equipe : padding 0 (chaque person gère son padding)
 *           - .equipe-persons-grid : flex row
 *           - .equipe-person : flex row, gap sm — photo gauche, tous textes droite
 *           - .equipe-person-photo : width 50%, flex-shrink 0, aspect-ratio 3/4
 *           - .equipe-person-identity : flex column, gap xs (nom/rôle/accroche/description)
 *           - .equipe-person-catchphrase : font-weight bold
 *           - .equipe-person-description : small-text (family/size/weight/line-height)
 * 0.0.144 - Ajout styles pour le modèle de colonne "Page - Hero column"
 *           - .column-model-page-hero : flex column, gap var(--spacing-lg)
 * 0.0.143 - .author-page-intro-col-text .author-social-links : margin-top var(--spacing-sm)
 * 0.0.142 - Phase 1 refacto : valeurs hardcodées → variables CSS
 *           - text-decoration-thickness 0.15vh → var(--border-thin)
 *           - text-underline-offset 0.5vh → var(--border-thick)
 *           - height .section-cta::after 0.5vh → var(--border-thick)
 * 0.0.141 - .archive-products-section : flex-direction row (row + autres publications côte à côte)
 *           - .author-other-publications : align-self center + margin-left xl (contexte flex-row)
 * 0.0.140 - .author-other-publications : hors du row → enfant direct de la section (flex-column)
 *           - Suppression flex-shrink / align-self / margin-left (contexte flex-row supprimé)
 *           - margin-top var(--spacing-md) + align-self flex-start
 * 0.0.139 - .author-other-publications : margin-left xl (gap augmenté avec liste livres)
 *           - .author-other-publications p : margin-top 1em, margin-bottom 0
 *           - .author-other-publications ul/ol : padding-left var(--spacing-md)
 * 0.0.138 - .author-publisher-section : main-section-variable, width 119vh (horizontal scroll)
 *          - .author-other-publications : carte fin de liste livres, width 55vh
 *          - Suppression règle section-columns 2fr/1fr (plus de colonne double)
 * 0.0.137 - .author-publisher-section : padding-left 0
 * 0.0.136 - .author-publisher-section h2.h2-author : width 95vh
 * 0.0.135 - .author-publisher-section .section-columns : 2fr/1fr
 * 0.0.134 - .author-page-intro-col-text : flex column, gap var(--spacing-md)
 * 0.0.133 - author-page-intro-section .section-columns : 3fr/2fr + gap var(--spacing-xl)
 * 0.0.132 - author-section .section-columns : gap → var(--spacing-lg)
 * 0.0.131 - author-section .section-columns : gap → var(--spacing-md)
 * 0.0.130 - author-section .lvl-2 : align-items flex-start (bouton Commander ne s'étire plus)
 * 0.0.129 - Revert .lvl-2 gap → var(--spacing-sm) (annulation du 0 de la v0.0.129)
 * 0.0.128 - .section-cta : reset <button> (background none, border none, cursor pointer)
 * 0.0.127 - Article horizontal layout : centrage vertical avec marges calculées
 *         - Suppression règle .site-main (incompatible avec scroll horizontal)
 *         - Ajout margin-top/bottom calc((100vh - 66.66vh) / 2) sur section
 *         - Section centrée verticalement sans affecter le scroll horizontal
 * 0.0.126 - Article horizontal layout : tentative centrage vertical (retiré)
 *         - Approche :has() sur .site-main ne fonctionnait pas correctement
 * 0.0.125 - Article horizontal layout : support Imagify picture
 *         - Ajout styles pour balises <picture> (Imagify WebP)
 *         - picture et img : display flex, max-height 40vh
 *         - picture img : width/height 100%, object-fit contain
 *         - figure : flex column, align/justify center pour images
 * 0.0.124 - Article horizontal layout : ajout flex-direction row
 *         - Ajout flex-direction: row !important sur .article-contenu-horizontal
 *         - Assure affichage côte à côte des colonnes dynamiques
 * 0.0.123 - Article horizontal layout : intégration complète (desktop)
 *         - Styles complets pour .article-contenu-horizontal
 *         - Variables CSS : hauteur colonnes 66.66vh, gap 8vh
 *         - Conteneur flex horizontal avec scroll smooth
 *         - Colonnes dynamiques avec fond décoratif derrière images
 *         - Transitions d'apparition, gestion du loading state
 *         - Typographie optimisée pour le découpage intelligent
 * 0.0.122 - Image à la une : ajout classe post-featured-image
 *         - Nouvelle classe .post-featured-image (width 100%, height 33.33vh)
 *         - Object-fit cover, object-position center
 *         - Affichage image à la une sous l'extrait
 * 0.0.121 - Extrait article : augmentation font-size
 *         - .post-excerpt : font-size --font-small-text-italic-size → --text-size-cta (1.5vh → 1.75vh)
 *         - Texte extrait plus visible et lisible
 * 0.0.120 - Extrait article : augmentation interligne
 *         - .post-excerpt : line-height --line-height-medium → --line-height-comfortable (1.25em → 1.4em)
 *         - Meilleure lisibilité du texte italic
 * 0.0.119 - Extrait article : ajout classe post-excerpt
 *         - Nouvelle classe .post-excerpt avec variables --font-small-text-italic-*
 *         - Font-size 1.5vh, style italic, line-height medium
 *         - Affichage extrait WordPress sous les métadonnées
 * 0.0.118 - Icônes post-meta : taille relative en em
 *         - .post-meta-icon : width et height 2vh → 0.75em
 *         - Taille proportionnelle au texte des métadonnées
 * 0.0.117 - Post-meta gap : ajustement à --spacing-sm
 *         - .post-meta : gap --spacing-xs → --spacing-sm (1vh → 2vh)
 *         - Espacement plus confortable entre les items de métadonnées
 * 0.0.116 - Avatar auteur : réduction de taille
 *         - .post-meta-avatar : width et height 4vh → 3vh
 *         - Avatar plus compact dans les métadonnées article
 * 0.0.115 - Ajustement gaps section demi et post-meta
 *         - .main-section-demi : gap --spacing-lg → --spacing-sm (4vh → 2vh)
 *         - .post-meta : gap --spacing-md → --spacing-xs (3vh → 1vh)
 *         - Espacement plus compact entre H1 et métadonnées, et entre les items de métadonnées
 * 0.0.114 - Post-meta : réduction du gap
 *         - Changement gap: var(--spacing-lg) → var(--spacing-md) (4vh → 3vh)
 *         - Métadonnées article plus compactes
 * 0.0.113 - Section demi : alignement flex-start
 *         - Changement align-items: center → flex-start
 *         - H1 et post-meta alignés à gauche dans la section
 * 0.0.112 - Classe .text-meta : utilisation variables CSS existantes
 *         - Refactorisation avec --font-small-text-accent-* (au lieu de valeurs hardcodées)
 *         - Family, size, weight, text-transform, line-height = système unifié
 *         - Cohérence avec système typographique global du thème
 * 0.0.111 - Post-meta texte : majuscules et couleur uniforme
 *         - Création classe .text-meta (remplacement .post-meta-text)
 *         - Ajout text-transform: uppercase
 *         - Suppression opacity 0.6 sur .post-meta-label
 *         - Suppression font-weight 500 sur .post-meta-value
 *         - Tous les textes en majuscules, même couleur
 * 0.0.110 - Post-meta avatar : force border-radius rond
 *         - Ajout !important sur border-radius 50%
 *         - Ajout display block
 *         - Assure rendu rond même avec styles WordPress par défaut
 * 0.0.109 - Post-meta : utilisation variables --font-small-text-*
 *         - Remplacement propriétés individuelles par système unifié
 *         - Family, size, weight, line-height = font-small-text
 * 0.0.108 - Métadonnées article (post-meta) pour single post
 *         - .post-meta : flex horizontal, gap lg
 *         - .post-meta-item : auteur (avatar 4vh), date (icône 2vh), catégories (icône 2vh)
 *         - Avatar rond, icônes SVG fill text, texte size-s avec labels opacity 0.6
 *         - Section demi : flex-direction column + gap lg pour H1 + meta
 * 0.0.107 - Suppression styles center/margin sur .main-section-demi h1
 *         - H1 hérite uniquement de la règle générale h1 (pas de surcharge)
 *         - Plus de text-align center ni margin 0
 * 0.0.106 - Simplification : h1-standard sur TOUS les H1 par défaut
 *         - h1 : h1-standard (règle générale simple)
 *         - .home h1 : h1-home (surcharge page d'accueil uniquement)
 *         - Plus besoin de contexte .main-section, règle universelle
 * 0.0.105 - H1 standard par défaut sur tout le site (sauf home page)
 *         - .main-section h1 : h1-standard par défaut (10vh)
 *         - .home .main-section h1 : h1-home spécifique page d'accueil (15vh)
 *         - .main-section-demi h1 : simplifié (héritage + text-align/margin)
 *         - Hiérarchie : home 15vh > standard 10vh
 * 0.0.104 - H1 section demi : utilisation variables h1-standard
 *         - Remplacement h1-home par h1-standard (10vh desktop, 62px mobile)
 *         - Typographie dédiée aux articles et pages (pas home)
 * 0.0.103 - Section demi-hauteur pour single post
 *         - Ajout .main-section-demi : height 50vh, flex centered
 *         - H1 centré avec typographie H1 home
 *         - Pour template single.php (articles de blog)
 * 0.0.102 - Split en 3 fichiers thématiques (Phase 5 restructuration)
 *         - Extraction carousel → carousel.css (v0.0.1)
 *         - Extraction articles → articles.css (v0.0.1)
 *         - Ce fichier garde : typo, CTAs, niveaux, column models, hero, transmission-intro
 * 0.0.101 - Fusion home.css dans sections.css
 *         - Ajout style H1 home page (anciennement dans home.css)
 *         - Économie d'une requête HTTP
 *         - home.css supprimé (contenait seulement 9 lignes de CSS)
 * 0.0.100 - Migration système de line-height unifié
 *         - 1/1.1 → var(--line-height-tight)
 *         - 1.5 → var(--line-height-comfortable)
 *         - Cohérence avec système à 3 valeurs sémantiques
 * 0.0.99 - Migration système de typographie unifié
 *        - Flèches carousel : 2.4vh → var(--text-size-l) (2.5vh)
 *        - Suppression dernière valeur hardcodée
 *        - Cohérence avec système à 6 tailles sémantiques
 * 0.0.98 - Fix alignement boucle articles : space-between sur le lien
 *        - .article-loop-link : display flex column + justify-content space-between + height 100%
 *        - Pousse .article-loop-bottom vers le bas dans tous les contextes
 *        - Résout trou visuel quand hauteur figée (mega menu, grid, etc.)
 *        - Pas d'impact sur affichages à hauteur automatique (sections, derniers articles)
 *        - Fix : le space-between doit être sur le lien qui contient les deux conteneurs
 * 0.0.97 - Migration complète vers variables d'espacement sémantiques desktop
 *        - Tous les espacements standards (padding, margin, gap) utilisent var(--spacing-*)
 *        - 0.5vh → --spacing-2xs, 1vh → --spacing-xs, 2vh → --spacing-sm, 3vh → --spacing-md, 4vh → --spacing-lg
 *        - Standardisation : 1.75vh → 2vh, 5vh → 4vh
 *        - Valeurs rares conservées (ex: -12.5vh margin négatif)
 *        - Amélioration cohérence et maintenabilité
 * 0.0.96 - Migration vers variables responsive unifiées
 *        - --font-h4-size → --responsive-font-h4
 *        - --font-text-size → --responsive-font-standard
 *        - --font-small-text-size → --responsive-font-small
 *        - --font-small-text-italic-size → --responsive-font-small
 *        - --font-small-text-accent-size → --responsive-font-extra-small
 *        - --font-cta-size → --responsive-font-cta
 *        - Structure cohérente desktop/tablette/mobile
 * 0.0.95 - Carousel-transmission : animation Montgolfière
 *        - 4 animations indépendantes avec timings différents (23s, 17s, 11s, 19s)
 *        - Trajet horizontal de 50vh, vertical de 10vh
 *        - Rotation -2deg à 2deg, scale 1 à 1.1
 *        - Utilisation de custom properties CSS pour animations simultanées
 * 0.0.94 - Carousel-transmission : ajout styles Montgolfière
 *        - Position absolue : right 50%, top -15vh, z-index 0 (arrière-plan)
 *        - Width 15vh
 * 0.0.93 - Carousel-transmission : ajout styles Nuage Vert
 *        - Position absolue : left -15vh, bottom -5vh, z-index 0 (arrière-plan)
 *        - Width 30vh, derrière les livres
 * 0.0.92 - Carousel-produits : fix image Imagify trop grande
 * 0.0.91 - Boucle articles : fix double animation causée par Imagify
 *        - Simplification sélecteurs : .article-loop-image img uniquement
 *        - Suppression sélecteurs .article-loop-thumbnail (classe sur <picture> maintenant)
 *        - Fix animation saccadée : une seule transformation au lieu de deux en cascade
 *        - Remplacement var(--ease-standard) par var(--ease-smooth)
 *        - Transition passée à 0.5s pour plus de fluidité
 *        - Animation ultra-smooth sans démarrage brutal
 *        - Ajout will-change: transform, backface-visibility: hidden, translateZ(0)
 *        - Transition passée à 0.4s var(--ease-standard) (plus fluide)
 *        - Force l'accélération matérielle pour 60fps constant
 * 0.0.90 - Boucle articles : courbe d'animation plus douce
 * 0.0.89 - Boucle articles : optimisation GPU pour animation hover fluide
 * 0.0.88 - Boucle articles : fix transition hover pour compatibilité <picture>
 * 0.0.87 - Boucle articles : renforcement object-fit cover pour compatibilité Imagify
 * 0.0.86 - Transmission-intro : passage de <img> à background-image pour arrière-plan
 *        - Suppression .transmission-intro-bg-image
 *        - Ajout background-size: contain, background-position: left center sur .transmission-intro-background
 *        - Remplacement padding-bottom: 56.25% par aspect-ratio: 16/9
 *        - Plus performant et compatible avec balises <picture> Imagify
 * 0.0.85 - Modernisation aspect-ratio pour boucles articles
 *        - Simplification sélecteurs : .article-loop-image img uniquement
 *        - Suppression sélecteurs .article-loop-thumbnail (classe sur <picture> maintenant)
 *        - Fix animation saccadée : une seule transformation au lieu de deux en cascade
 *        - Remplacement var(--ease-standard) par var(--ease-smooth)
 *        - Transition passée à 0.5s pour plus de fluidité
 *        - Animation ultra-smooth sans démarrage brutal
 *        - Ajout will-change: transform, backface-visibility: hidden, translateZ(0)
 *        - Transition passée à 0.4s var(--ease-standard) (plus fluide)
 *        - Force l'accélération matérielle pour 60fps constant
 *        - Ajout sélecteur .article-loop-item:hover picture img
 *        - Restaure la transition douce de zoom (0.3s ease)
 *        - Ajout display: flex sur .article-loop-image et picture
 *        - Sélecteur renforcé pour <picture> img
 *        - Garantit que les images remplissent toujours le ratio 16/9
 * 0.0.84 - Optimisation CLS : suppression opacity 0 initiale sur éléments parallax
 *        - Nuages et jouets affichés immédiatement (plus de .parallax-ready)
 *        - Améliore le score CLS en évitant les changements de layout
 * 0.0.83 - Carousel-transmission : ajout Nuage Rose
 *        - Image décorative en arrière-plan (z-index: 0)
 *        - Position : right 0, bottom 0, width 35vh
 *        - Pas de parallax (reste fixe)
 *        - Réorganisation sélecteurs .carousel-nuage-image
 * 0.0.82 - Parallax Nuage Or : ajout animation
 *        - Nuage Or intégré dans système parallax horizontal
 *        - Opacity 0 → 1 avec transition 0.4s
 *        - will-change: translate, scale pour optimisation
 *        - Responsive : will-change auto et opacity forcée sur mobile
 * 0.0.81 - Carousel-transmission : ajout styles Nuage Or
 *        - Position absolue : left 10vh, top 40%, z-index 10
 *        - pointer-events: none pour ne pas bloquer interactions
 *        - Image fixe au premier plan pendant changement de slides
 * 0.0.80 - Carousel-transmission : rotation temps réel sans inertie
 *        - Désactivation transition sur transform (garde uniquement opacity)
 *        - Permet rotation instantanée au scroll, comme parallax des jouets
 * 0.0.79 - Carousel-transmission : optimisation pour animation rotation parallax
 *        - Ajout will-change: transform pour performance GPU
 *        - Prépare les images pour rotation progressive au scroll horizontal
 * 0.0.78 - Carousel-transmission : superposition images avec proportions 60/50
 *        - Image principale : 60% largeur, alignée gauche, z-index 2 (premier plan)
 *        - Image secondaire : 50% largeur, position absolute droite, z-index 1 (arrière-plan)
 *        - Hauteur libre (auto) avec max-height 75vh au lieu de height fixe
 *        - Pas d'espacement entre images (gap: 0)
 * 0.0.77 - Carousel-transmission : affichage de deux images côte à côte
 *        - Image principale + première image galerie WooCommerce
 *        - Styles .carousel-images-dual avec gap 2vh
 *        - Styles .carousel-image-item avec flex: 1 pour répartition égale
 * 0.0.76 - Carousel-transmission : masquage des flèches de navigation
 *        - Seuls les points de navigation sont affichés
 *        - Les flèches pourront être réactivées plus tard si nécessaire
 * 0.0.75 - Carousel-transmission : colonnes en flex-direction column
 *        - carousel-slide-content : row avec gap 0 (horizontal)
 *        - carousel-slide-left/right : column avec gap 3vh (vertical interne)
 *        - Chaque colonne prend 50% de la largeur
 * 0.0.74 - Fix carousel-produits : restauration height 50vh et translateX(-5vh)
 *        - Les modifications de taille/position s'appliquent uniquement à carousel-transmission
 *        - Règles séparées pour éviter d'affecter carousel-produits
 * 0.0.73 - Carousel-transmission : largeurs colonnes 50/50 sans gap
 *        - carousel-slide-left et carousel-slide-right : flex: 0 0 50%
 *        - Suppression margin-top: 5vh de carousel-slide-left
 *        - Les deux colonnes prennent exactement 50% de l'espace
 * 0.0.72 - Carousel-transmission : styles spécifiques pour le redesign
 *        - Image : height 75vh (au lieu de 50vh)
 *        - Animation : translateX(0) au lieu de translateX(-5vh)
 *        - Pas de fond coloré (supprimé du HTML)
 * 0.0.71 - Ajout styles carousel-transmission : duplication sélecteurs carousel
 *        - Tous les sélecteurs .section-model-carousel-produits dupliqués
 *        - Ajout .section-model-carousel-transmission pour chaque règle
 *        - Permet au nouveau modèle d'hériter des mêmes styles
 * 0.0.70 - Fix largeurs de colonnes : utilisation de variables CSS
 *        - Remplacement des règles fixes data-attributes par variables CSS
 *        - grid-template-columns: var(--col1-width, 1fr) var(--col2-width, 1fr)
 *        - Suppression des 6 règles fixes pour attributs data spécifiques
 *        - Permet maintenant d'appliquer n'importe quelle largeur (25/75, 30/70, etc.)
 * 0.0.69 - Transmission-intro : réduction taille jouets (-5vh)
 *        - Avion : 20vh → 15vh
 *        - Train : 25vh → 20vh
 * 0.0.68 - Transmission-intro : ajout styles animation parallax
 *        - Jouets initialement masqués (opacity: 0) pour éviter flickering
 *        - Affichage après init parallax (.horizontal-wrapper.parallax-ready)
 *        - Optimisation avec will-change: translate, scale
 *        - Responsive : désactivation will-change et affichage forcé sur mobile
 * 0.0.67 - Transmission-intro : positionnement et tailles spécifiques jouets
 *        - Avion (toy1) : 20vh, left: 40vh, top: 10vh
 *        - Train (toy2) : 25vh, left: 0, top: 45vh
 *        - Suppression conteneur flex, positionnement absolu individuel
 * 0.0.66 - Transmission-intro : ajout styles images décoratives
 *        - Arrière-plan : position absolute, left 0, height 100%, object-fit contain
 *        - Jouets : position absolute, left 0, centrés verticalement, max 30vh
 *        - Background z-index 0, jouets z-index 1, contenu au-dessus
 * 0.0.65 - Transmission-intro : décalage de 15% vers la droite
 *        - Ajout transform: translateX(15%) sur .section-columns
 *        - Colonne centrée puis décalée vers la droite
 * 0.0.64 - Refactorisation modèle de section "Accueil - Transmission - Intro"
 *        - Utilise maintenant le modèle de colonne titres-texte-cta (réutilisation)
 *        - Suppression des styles redondants (gap, h2, h3, lvl-2)
 *        - Garde uniquement les styles de layout (largeur 53% centrée)
 * 0.0.63 - Ajout du modèle de section "Accueil - Transmission - Intro"
 *        - Section avec colonne unique centrée à 53% de largeur
 *        - Contenu identique à titres-texte-cta (H2, H3, texte, CTA)
 *        - Utilise les mêmes styles et variables CSS que titres-texte-cta
 * 0.0.62 - Bandeau animé : fix positionnement cross-browser (Safari/Chrome)
 *        - .bandeau-anime-track : width: 4vh au lieu de width: auto
 *        - Conserve right: 3vh (positionnement à droite du conteneur)
 *        - Élimine les différences de calcul de largeur avec writing-mode: vertical-rl
 * 0.0.61 - Titres-texte-cta : largeurs H2 et H3 via variables CSS custom properties
 *        - Utilisation de var(--h2-width, 60vh) et var(--h3-width, 70vh)
 *        - Les variables sont définies sur le conteneur en inline
 *        - Évite le CSS inline sur chaque élément
 * 0.0.60 - Bandeau animé : adaptation pour colonne 1 (image à gauche)
 *        - Image alignée à gauche (margin-right: auto, margin-left: 0)
 *        - Bandeau coloré décalé de 10vh vers la gauche (right: 10vh au lieu de 0)
 * 0.0.59 - Auteur : réduction taille icône plume de 2vh à 1.5vh
 * 0.0.58 - Auteur : changement flex-direction de row-reverse à row
 *        - L'ordre HTML est maintenant respecté (icône puis texte)
 * 0.0.57 - Ajout du style Small Text Accent et application à la catégorie
 *        - Création style .small-text-accent avec variables --font-small-text-accent-*
 *        - Application à .article-loop-category (basé sur Elementor 879aed5)
 *        - Montserrat 600, 1.25vh, uppercase, line-height 2vh
 * 0.0.56 - Auteur : alignement à droite avec icône plume
 *        - display: flex, flex-direction: row-reverse, justify-content: flex-end
 *        - Icône plume avant le texte, gap 1vh
 *        - .article-loop-author-icon : 2vh x 2vh
 * 0.0.55 - Ajout padding-bottom 1vh au conteneur article-loop-top
 *        - padding: 1.75vh 1.75vh 1vh 1.75vh sur .article-loop-top
 * 0.0.54 - Ajout padding-bottom 1vh au conteneur de l'auteur
 *        - padding: 0 1.75vh 1vh 1.75vh sur .article-loop-author
 * 0.0.53 - Fix : styles small-text appliqués directement aux <p> de l'extrait
 *        - Déplacement des styles de .article-loop-excerpt vers .article-loop-excerpt p
 *        - Évite la surcharge par les styles globaux des <p>
 * 0.0.52 - Ajout du style Small Text Italic et application au nom de l'auteur
 *        - Création style .small-text-italic avec variables --font-small-text-italic-*
 *        - Application à .article-loop-author (basé sur Elementor 76c230d)
 * 0.0.51 - Ajout du style Small Text et application à l'extrait d'article
 *        - Création style .small-text avec variables --font-small-text-*
 *        - Application à .article-loop-excerpt (basé sur Elementor 940ab6d)
 * 0.0.50 - Derniers articles : réduction du gap entre colonnes
 *        - Gap réduit de 4vh à 3vh
 * 0.0.49 - Fix : utilisation des variables CSS pour les polices H4
 *        - Remplacement des polices en dur par var(--font-h4-*)
 *        - Application dans h4, .h4-style et .article-loop-title
 * 0.0.48 - Ajout du style H4 global et application aux titres d'articles
 *        - Création style h4, .h4-style : Montserrat, 2vh, 700, line-height 2.5vh
 *        - Application à .article-loop-title (basé sur Elementor 757a89c)
 * 0.0.47 - Derniers articles : fix micro ligne entre catégorie et bordure
 *        - Ajout margin-bottom: -1px à .article-loop-category pour écraser la bordure
 *        - Ajout padding-top: 0.5vh à .article-loop-category
 * 0.0.46 - Derniers articles : ajout padding-left 10vh au conteneur principal
 *        - Ajout padding-left: 10vh à .column-model-derniers-articles-homepage
 *        - Gap entre les colonnes : 4vh (déjà présent)
 * 0.0.45 - Derniers articles : case cliquable et effet de zoom sur l'image
 *        - Ajout .article-loop-link : display block, text-decoration none, cursor pointer
 *        - Effet hover : transform scale(1.1) sur .article-loop-thumbnail
 *        - Transition : transform 0.3s ease
 * 0.0.44 - Derniers articles : animation de défilement vertical infini
 *        - Colonne 1 : défilement vers le haut
 *        - Colonne 2 : défilement vers le bas
 *        - Styles pour .vertical-track, .track-item-wrapper avec optimisations GPU
 *        - Inspiré du snippet bandeau-articles-vertical.php
 * 0.0.43 - Derniers articles : modèle de boucle complet pour afficher les articles
 *        - Structure .article-loop-item avec bordure colorée (0.5vh), margin 1.75vh vertical
 *        - .article-loop-top : padding 1.75vh, gap 1vh (image, titre, extrait)
 *        - .article-loop-image : ratio 16/9 avec object-fit cover center
 *        - .article-loop-bottom : auteur (padding horizontal 1.75vh) + catégorie (fond coloré, padding horizontal 1.75vh)
 *        - Classes de couleur : article-loop-color-{green|blue|pink|gold} pour bordure et fond catégorie
 * 0.0.42 - Derniers articles : layout 2 colonnes avec enchevêtrement ABAB
 *        - Grid 2 colonnes (1fr 1fr) avec gap 4vh
 *        - Styles pour .article-category (uppercase, 1.4vh, opacity 0.6)
 *        - Structure .derniers-articles-item pour grouper catégorie + titre
 * 0.0.41 - Ajout styles pour le modèle "Derniers articles - homepage"
 *        - Styles de base pour .column-model-derniers-articles-homepage
 *        - Spacing et typography pour catégories et titres d'articles
 * 0.0.40 - Titres-texte-cta : largeurs fixes pour H2 et H3
 *        - H2 : width: 60vh
 *        - H3 : width: 70vh
 * 0.0.39 - Titres-texte-cta : retrait text-wrap: balance
 *        - Retour au comportement par défaut des H2
 * 0.0.38 - Optimisations de performance : externalisation des styles inline
 *        - Ajout classes carousel-bg-* pour couleurs dynamiques (au lieu de style inline)
 *        - Ajout règles data-col*-width pour largeurs colonnes dynamiques (au lieu de style inline)
 *        - Ajout classe section-text-with-cta pour margin-bottom (au lieu de style inline)
 *        - Impact : HTML plus léger, meilleure mise en cache navigateur
 * 0.0.37 - Bandeau animé : rotation de l'icône pour compensation
 *        - transform: rotate(90deg) sur .bandeau-anime-icon
 *        - Compense la rotation globale de 180° du texte
 * 0.0.36 - Bandeau animé : ajustement du padding pour espacement optimal
 *        - padding: 0 0 5vh 0 pour 5vh seulement en bas
 * 0.0.35 - Bandeau animé : ajout de 5vh avant et après l'icône
 *        - gap: 5vh pour espace entre texte et icône
 *        - padding: 5vh 0 pour espace après l'icône
 * 0.0.34 - Bandeau animé : suppression du padding pour réduire l'espace entre répétitions
 *        - padding: 0 au lieu de 5vh 0
 * 0.0.33 - Bandeau animé : suppression du gap entre texte et icône
 *        - gap: 0 car l'icône a déjà son espacement intégré
 * 0.0.32 - Bandeau animé : réduction de l'espacement à droite
 *        - right: 3vh au lieu de 4vh
 * 0.0.31 - Bandeau animé : alignement à droite avec espacement
 *        - .bandeau-anime-track avec right: 4vh au lieu de left: 0
 *        - width: auto pour s'adapter au contenu
 * 0.0.30 - Bandeau animé : correction du sens de rotation et d'animation
 *        - transform: rotate(180deg) sur .bandeau-anime-text pour sens inverse des aiguilles
 *        - Animation descendante (track monte, texte tourné descend visuellement)
 * 0.0.29 - Bandeau animé : fix de l'animation verticale
 *        - Retrait de height: 95vh sur .bandeau-anime-text pour taille naturelle
 *        - .bandeau-anime-track en position: absolute pour animation fluide
 *        - .bandeau-anime-color-bg avec display: flex et align-items: flex-start
 *        - Padding simplifié à 5vh 0 pour espacement vertical uniquement
 * 0.0.28 - Bandeau animé : utilisation de writing-mode au lieu de transform rotate
 *        - writing-mode: vertical-rl pour texte vertical naturel
 *        - height: 95vh sur chaque texte pour prendre toute la hauteur
 *        - padding: 5vh 5vh 5vh 0 pour les espacements
 *        - justify-content: center pour centrer verticalement
 * 0.0.27 - Bandeau animé : simplification de la structure
 *        - .bandeau-anime-track en position: relative, width: 100%
 *        - Retrait du flex, approche plus simple
 *        - Les textes en display: block, width: 100%
 * 0.0.26 - Bandeau animé : fix empilement des textes
 *        - .bandeau-anime-track avec gap: 0 et justify-content: flex-start
 *        - .bandeau-anime-track .bandeau-anime-text avec flex-shrink: 0
 *        - Les 3 copies du texte sont maintenant empilées verticalement
 * 0.0.25 - Bandeau animé : support de l'animation verticale infinie
 *        - .bandeau-anime-color-bg avec overflow: hidden et optimisations GPU
 *        - .bandeau-anime-track pour le rail d'animation
 *        - Support de transform3d, backface-visibility pour performances
 * 0.0.24 - Bandeau animé : ajout de l'icône plume dans le texte vertical
 *        - .bandeau-anime-text avec display: flex et gap: 5vh
 *        - .bandeau-anime-icon avec taille 3vh x 3vh
 *        - Icône tournée avec le texte, espacée de 5vh
 * 0.0.23 - Bandeau animé : texte en blanc et décalé de 5vh vers la gauche
 *        - color: var(--color-white) pour le texte
 *        - margin-right: 5vh pour décaler le texte
 * 0.0.22 - Bandeau animé : ajout du texte vertical
 *        - .bandeau-anime-text avec rotation -90deg et styles typographiques
 *        - .bandeau-anime-color-bg avec flex pour centrer le texte
 *        - Texte aligné à droite et centré verticalement dans le bandeau
 * 0.0.21 - Bandeau animé : largeur du bandeau coloré réduite à 20vh
 * 0.0.20 - Bandeau animé : colonne avec hauteur de 95vh et centrage vertical
 *        - .column-model-bandeau-anime avec height: 95vh, display: flex, align-items: center
 *        - Conteneur de couleur avec top: 0 et bottom: 0 (prend toute la hauteur de 95vh)
 *        - Image centrée verticalement dans la colonne
 * 0.0.19 - Bandeau animé : conteneur de couleur prend toute la hauteur de l'écran
 *        - Position absolute avec top: -50vh et bottom: -50vh
 *        - Déborde largement au-dessus et en dessous de la colonne
 * 0.0.18 - Bandeau animé : ajout du conteneur de couleur en arrière-plan
 *        - .bandeau-anime-color-bg avec position absolue, height: 95vh
 *        - 4 variantes de couleur (green, blue, pink, gold)
 *        - Image en z-index: 1, conteneur de couleur en z-index: 0
 * 0.0.17 - Bandeau animé : image alignée à droite avec margin-left: auto
 * 0.0.16 - Ajout des styles pour le modèle de colonne "Bandeau animé"
 *        - .column-model-bandeau-anime avec padding-right: 10vh
 *        - Image avec width: 85%, aspect-ratio: 4/3, object-fit: cover
 * 0.0.15 - Gap par défaut des colonnes réduit de 8vh à 4vh
 * 0.0.14 - Ajout des styles pour le modèle de colonne "Titres / Texte / CTA"
 *        - .column-model-titres-texte-cta avec flex column et gap 3vh
 *        - .column-model-titres-texte-cta .lvl-2 avec gap 2vh
 * 0.0.13 - Centrage vertical des colonnes par défaut (align-items: center)
 *        - Appliqué à .section-columns pour toutes les sections
 * 0.0.12 - Carousel : image produit décalée de 5vh vers la gauche (translateX(-5vh))
 *        - Animation slideInFromRight adaptée pour finir à translateX(-5vh)
 * 0.0.11 - Carousel : H2 margin-bottom rétabli à -12.5vh
 * 0.0.10 - Carousel : passage de grid à flexbox pour carousel-slide-content
 *        - Centrage vertical des colonnes avec align-items: center
 *        - Colonne gauche décalée de 5vh vers le bas (margin-top: 5vh)
 * 0.0.9 - Carousel : H2 margin-bottom ajusté à -10vh
 * 0.0.8 - Carousel : H3 avec largeur de 70vh (incluant padding lvl-1)
 * 0.0.7 - Carousel : line-height du H2 principal ajusté à 1.1
 * 0.0.6 - Carousel : H2 margin-bottom ajusté à -12.5vh
 *        - Flèches de navigation positionnées à 2vh sous le fond coloré (top: 44.5vh)
 * 0.0.5 - Hero Area : utilisation des variables --font-text-* (renommées depuis --font-text-hero-*)
 * 0.0.4 - Carousel : H2 principal avec width 50% et margin-bottom -15vh
 * 0.0.3 - Carousel : Application des variables H2 Large et H3 au titre principal et aux slides
 *        - Carousel slide text utilise maintenant les variables --font-body-*
 * 0.0.2 - Correction du positionnement du fond coloré (top: 17.5vh)
 * 0.0.1 - Ajustements carousel : image 50vh, gap 0, object-fit contain
 */

/* ============================================================================
   SECTION CONTACT - MAP — Globale (canvas + adresse, breakpoints séparés)
   ========================================================================== */

/* Supprime le padding de .main-section-demi pour que la map remplisse tout */
.section-model-contact-map {
    padding: 0 !important;
    position: relative;
    overflow: hidden;
}

/* Dégradé : transparent au milieu → couleur background à droite */
.section-model-contact-map::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to right, transparent 33%, var(--color-background) 66%);
    pointer-events: none;
    z-index: 1;
}

/* Canvas Google Maps en fond absolu plein format — purement décoratif, non interactif */
.contact-map-canvas {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Enfant dédié à l'initialisation Google Maps (évite les inline styles sur le canvas) */
.contact-map-inner {
    position: absolute;
    inset: 0;
}

/* Contenu texte (H1, H2, paragraphe) : tiers droit, centré verticalement, z-index au-dessus du dégradé */
.contact-map-content {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    max-width: 66vh;
}

/* Encart adresse : centré verticalement, tiers gauche, fond bg */
.contact-map-address {
    position: absolute;
    left: 8vh;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    font-style: normal;
    background-color: var(--color-background);
    border: var(--border-width-thin) solid var(--color-text);
    padding: var(--spacing-md) var(--spacing-lg);
    max-width: 28vh;
    font-family: var(--font-small-text-family);
    font-size: var(--text-size-s);
    font-weight: var(--font-small-text-weight);
    line-height: var(--line-height-comfortable);
}

/* ============================================================================
   FORMULAIRE DE CONTACT — column model "contact-form"
   ========================================================================== */

.column-model-contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    width: 100%;
}

.uav-contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Ligne Prénom + Nom côte à côte */
.contact-form-row {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-sm);
}

.contact-form-row .contact-form-field {
    flex: 1;
}

.contact-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.4vh;
}

.contact-form-field label {
    font-family: var(--font-small-text-family);
    font-size: var(--font-small-text-size);
    font-weight: 500;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.contact-form-field input,
.contact-form-field textarea {
    width: 100%;
    font-family: var(--font-small-text-family);
    font-size: var(--font-small-text-size);
    font-weight: 500;
    color: var(--color-text);
    background-color: transparent;
    border: var(--border-thin) solid var(--color-text);
    padding: var(--spacing-xs);
    outline: none;
    box-sizing: border-box;
    transition: border-color var(--transition-fast) var(--ease-standard);
}

.contact-form-field input::placeholder,
.contact-form-field textarea::placeholder {
    font-style: italic;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.contact-form-field textarea {
    resize: vertical;
    min-height: 12vh;
    line-height: var(--line-height-comfortable);
}

.contact-form-submit {
    margin-top: var(--spacing-xs);
    cursor: pointer;
}

.contact-form-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Feedback succès / erreur */
.contact-form-feedback {
    margin: 0;
    font-family: var(--font-text-family);
    font-size: var(--font-small-text-size);
    font-weight: var(--font-text-weight);
    min-height: 1em;
}

.contact-form-feedback--success {
    color: var(--color-text);
    font-size: var(--font-h4-size);
    font-weight: 700;
}

.contact-form-feedback--error {
    color: var(--color-pink);
}

/* ============================================================================
   SÉLECTION TEXTE — Globale
   ========================================================================== */

::selection {
    background-color: var(--color-text);
    color: var(--color-background);
}

/* ============================================================================
   ANIMATION — transmissionIntroBounce (tous breakpoints)
   Déclaré hors media query pour être utilisable sur desktop ET mobile.
   La classe .transmission-intro-bounce-active est appliquée par JS dans les deux contextes.
   ========================================================================== */

@keyframes transmissionIntroBounce {
    0% { transform: scale(1); }
    40% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* ============================================================================
   Sections Columns - Desktop uniquement (≥1201px)
   ========================================================================== */

@media (min-width: 1201px) {

    /* ===========================
       Typographie globale
       =========================== */

    /* Style H4 - Basé sur Elementor 757a89c */
    h4,
    .h4-style {
        font-family: var(--font-h4-family);
        font-size: var(--font-h4-size);
        font-weight: var(--font-h4-weight);
        line-height: var(--font-h4-line-height);
    }

    /* Style Small Text - Basé sur Elementor 940ab6d */
    .small-text {
        font-family: var(--font-small-text-family);
        font-size: var(--font-small-text-size);
        font-weight: var(--font-small-text-weight);
        line-height: var(--font-small-text-line-height);
    }

    /* Style Small Text Italic - Basé sur Elementor 76c230d */
    .small-text-italic {
        font-family: var(--font-small-text-italic-family);
        font-size: var(--font-small-text-size);
        font-weight: var(--font-small-text-italic-weight);
        font-style: var(--font-small-text-italic-style);
        line-height: var(--font-small-text-italic-line-height);
    }

    /* Style Small Text Accent - Basé sur Elementor 879aed5 */
    .small-text-accent {
        font-family: var(--font-small-text-accent-family);
        font-size: var(--font-small-text-accent-size);
        font-weight: var(--font-small-text-accent-weight);
        text-transform: var(--font-small-text-accent-text-transform);
        line-height: var(--font-small-text-accent-line-height);
    }

    /* Boutons / CTAs - État de base */
    .section-cta {
        font-family: var(--font-cta-family);
        font-size: var(--font-cta-size);
        font-weight: var(--font-cta-weight);
        line-height: var(--line-height-medium);
        text-transform: var(--font-cta-text-transform);
        display: inline-block;
        text-decoration: none;
        color: inherit;
        padding: 0 0 var(--spacing-2xs) 0;
        position: relative;
        align-self: flex-start;
        width: fit-content;
        /* Reset pour les éléments <button> */
        background: none;
        border: none;
        cursor: pointer;
        appearance: none;
    }

    /* Couleurs de bordure pour les CTAs */
    .section-cta-text {
        --cta-border-color: var(--color-text);
    }

    .section-cta-green {
        --cta-border-color: var(--color-green);
    }

    .section-cta-blue {
        --cta-border-color: var(--color-blue);
    }

    .section-cta-pink {
        --cta-border-color: var(--color-pink);
    }

    .section-cta-gold {
        --cta-border-color: var(--color-gold);
    }

    /* La ligne animée créée directement en CSS */
    .section-cta::after {
        content: '';
        position: absolute;
        left: 0;
        width: 100%;
        bottom: 0;
        height: var(--border-thick);
        background-color: var(--cta-border-color);

        /* État initial : Ligne visible (scale 1), point d'origine à GAUCHE */
        transform: scaleX(1);
        transform-origin: left;

        /* Transition fluide */
        transition: transform var(--transition-smooth) var(--ease-smooth);
    }

    /* L'animation au survol : la barre disparait vers la DROITE */
    .section-cta.is-animating-hover::after {
        transform: scaleX(0);
        transform-origin: right;
    }

    /* Niveaux d'indentation et padding */
    .lvl-0 {
        text-indent: 16vh;
    }

    .lvl-0-5 {
        text-indent: 4vh;
    }

    .lvl-1 {
        padding-left: 16vh;
    }

    .lvl-2 {
        padding-left: 32vh;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    /* Modèle de colonne "Page - Hero column" */
    .column-model-page-hero {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-lg);
    }

    .page-hero-ctas {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    /* Modèle de colonne "Titres / Texte / CTA" */
    .column-model-titres-texte-cta {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .column-model-titres-texte-cta h2 {
        width: var(--h2-width, 60vh);
    }

    .column-model-titres-texte-cta h3 {
        width: var(--h3-width, 70vh);
    }

    /* ===========================
       Modèle de section : Accueil - Transmission - Intro
       =========================== */

    /* Section avec colonne unique centrée à 53% */
    /* Le contenu utilise le modèle de colonne titres-texte-cta */
    .section-model-transmission-intro {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .section-model-transmission-intro .section-columns {
        width: 53%;
        display: block;
        gap: 0;
        margin: 0 auto;
        transform: translateX(15%);
    }

    /* Images décoratives */
    .section-model-transmission-intro {
        position: relative;
    }

    /* Arrière-plan */
    .transmission-intro-background {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        z-index: 0;
        background-size: contain;
        background-position: left center;
        background-repeat: no-repeat;
    }

    /* Jouets décoratifs */
    /* Apparition : fade-in outer + slide-up toy-inner. toy2: 0.25s delay, toy1: 0.5s delay */
    /* fill-mode: both → hidden pendant le délai (backwards), maintenu après (forwards) */
    @keyframes toy-fade-in {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    @keyframes toy-inner-appear {
        from { transform: translateY(1.5vh); }
        to   { transform: translateY(0); }
    }

    .transmission-intro-toy-1         { animation: toy-fade-in       0.8s ease 0.5s  both; }
    .transmission-intro-toy-2         { animation: toy-fade-in       0.8s ease 0.25s both; }
    .transmission-intro-toy-1 .toy-inner { animation: toy-inner-appear 0.8s ease 0.5s  both; }
    .transmission-intro-toy-2 .toy-inner { animation: toy-inner-appear 0.8s ease 0.25s both; }

    /* Avion (toy1) */
    .transmission-intro-toy-1 {
        position: absolute;
        left: 40vh;
        top: 10vh;
        z-index: 1;
    }

    .transmission-intro-toy-1 img {
        max-width: 15vh;
        max-height: 15vh;
        width: auto;
        height: auto;
        object-fit: contain;
    }

    /* Train (toy2) */
    .transmission-intro-toy-2 {
        position: absolute;
        left: 0;
        top: 45vh;
        z-index: 1;
    }

    .transmission-intro-toy-2 img {
        max-width: 22.5vh;
        max-height: 22.5vh;
        width: auto;
        height: auto;
        object-fit: contain;
    }

    /* Animation Transmission dans H2 - Bounce coloré lettre par lettre */
    .section-model-transmission-intro .transmission-intro-char-anim {
        display: inline-block;
        text-indent: 0;
        transition: color 0.15s ease-out, transform 0.4s;
        transform-origin: center bottom;
    }

    .transmission-intro-bounce-active {
        animation: transmissionIntroBounce 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }


    /* Modèle de colonne "Bandeau animé" */
    .column-model-bandeau-anime {
        padding-right: 10vh;
        position: relative;
        height: 95vh;
        flex-shrink: 0;
        display: flex;
        align-items: center;
    }

    .column-model-bandeau-anime img {
        width: 85%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        object-position: center center;
        display: block;
        margin-left: auto;
        position: relative;
        z-index: 1;
    }

    /* Bandeau animé en colonne 1 - image à gauche, bandeau décalé de 10vh */
    .bandeau-anime-col1.column-model-bandeau-anime img {
        margin-left: 0;
        margin-right: auto;
    }

    /* Support Imagify : <picture> est l'item flex, pas <img> */
    /* Sans dimensions explicites sur picture, width: 85% de l'img se résoudrait
       de façon circulaire → petite image native → l'image n'occupe pas l'espace prévu */
    .column-model-bandeau-anime picture {
        width: 85%;
        aspect-ratio: 4 / 3;
        display: block;
        overflow: hidden;
        margin-left: auto;
        position: relative;
        z-index: 1;
    }

    .column-model-bandeau-anime picture img {
        width: 100%;
        height: 100%;
        aspect-ratio: unset; /* picture gère le ratio, pas l'img */
        margin-left: 0;
        margin-right: 0;
    }

    .bandeau-anime-col1.column-model-bandeau-anime picture {
        margin-left: 0;
        margin-right: auto;
    }

    .bandeau-anime-col1 .bandeau-anime-color-bg {
        right: 10vh;
    }

    /* Bandeau Transmission : fond SVG + image center bottom */
    .column-model-bandeau-transmission {
        position: relative;
        flex-shrink: 0;
    }

    .bandeau-transmission-svg {
        display: block;
        height: 95vh;
        width: auto;
    }

    .bandeau-transmission-svg.bt-color-green { color: var(--color-green); }
    .bandeau-transmission-svg.bt-color-blue  { color: var(--color-blue); }
    .bandeau-transmission-svg.bt-color-pink  { color: var(--color-pink); }
    .bandeau-transmission-svg.bt-color-gold  { color: var(--color-gold); }

    .bandeau-transmission-image {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .bandeau-transmission-image picture {
        display: contents;
    }

    .bandeau-transmission-image img {
        display: block;
        width: auto;
        height: 85vh;
        max-width: none;
    }

    /* Conteneur de couleur en arrière-plan */
    .bandeau-anime-color-bg {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 20vh;
        height: 95vh;
        z-index: 0;
        overflow: hidden;
        display: flex;
        align-items: flex-start;
        justify-content: center;

        /* Optimisations GPU */
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        -webkit-mask-image: linear-gradient(to bottom, black, black);
        mask-image: linear-gradient(to bottom, black, black);
    }

    /* Rail d'animation */
    .bandeau-anime-track {
        position: absolute;
        top: 0;
        right: 2.5vh;
        width: 4vh;
        height: auto;
        will-change: transform;
        transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    /* Chaque texte dans le track */
    .bandeau-anime-track .bandeau-anime-text {
        width: 100%;
        margin: 0;
    }

    /* Couleurs de fond */
    .bandeau-anime-color-green {
        background-color: var(--color-green);
    }

    .bandeau-anime-color-blue {
        background-color: var(--color-blue);
    }

    .bandeau-anime-color-pink {
        background-color: var(--color-pink);
    }

    .bandeau-anime-color-gold {
        background-color: var(--color-gold);
    }

    /* Texte vertical dans le bandeau */
    .bandeau-anime-text {
        font-family: var(--font-texte-bandeau-family);
        font-size: var(--font-texte-bandeau-size);
        font-weight: var(--font-texte-bandeau-weight);
        text-transform: var(--font-texte-bandeau-text-transform);
        color: var(--color-white);
        writing-mode: vertical-rl;
        text-orientation: mixed;
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: var(--spacing-lg);
        padding: 0 0 var(--spacing-lg) 0;
        transform: rotate(180deg);
    }

    /* Icône de plume dans le bandeau */
    .bandeau-anime-icon {
        width: 3vh;
        height: 3vh;
        fill: currentColor;
        flex-shrink: 0;
        transform: rotate(90deg);
    }

    .section-columns {
        display: grid;
        grid-template-columns: var(--col1-width, 1fr) var(--col2-width, 1fr);
        gap: var(--spacing-lg);
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        align-items: center;
    }

    .section-column {
        /* Les colonnes prennent l'espace disponible */
        overflow: hidden;
        min-width: 0;
        max-width: 100%;
    }

    /* Images dans les sections */
    .section-image {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        display: block;
    }

    /* Spécifique aux modèles Hero Area (accueil + transmission) */
    .section-model-hero .section-columns,
    .section-model-transmission-hero .section-columns {
        gap: 0; /* Pas d'espacement desktop - voir sections-responsive.css pour mobile */
    }

    .section-model-hero .section-column-col1,
    .section-model-transmission-hero .section-column-col1 {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .section-model-hero .section-column-col2 {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .section-model-hero .section-image {
        max-width: 85%;
        max-height: 100%;
        width: 85%;
        height: auto;
        object-fit: contain;
    }

    /* Transmission hero : image pleine hauteur, bords top/bottom/right */
    html.uav-horizontal-enabled .section-model-transmission-hero {
        padding-top: 0;
        padding-bottom: 0;
        padding-right: 0;
        margin-right: -20vh;
        overflow: hidden;
    }

    .section-model-transmission-hero .section-columns {
        height: 100%;
        align-items: stretch;
    }

    .section-model-transmission-hero .section-column-col1 {
        padding-top: 8vh;
        padding-bottom: 8vh;
        justify-content: center;
    }

    .section-model-transmission-hero .section-column-col2 {
        flex: 1;
        overflow: visible;
        position: relative;
    }

    /* Wrapper du fond : couvre col2 entièrement et clip l'image sans affecter les jouets */
    .transmission-hero-background-wrap {
        position: absolute;
        inset: 0;
        overflow: hidden;
        z-index: 0;
    }

    /* Background pleine hauteur */
    .section-model-transmission-hero .transmission-hero-background,
    .section-model-transmission-hero .transmission-hero-background img {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        object-fit: contain;
        display: block;
    }

    /* Jouets décoratifs — positionnement absolu dans col2 */
    /* Apparition : fade-in outer + slide-up toy-inner. toy2: 0.25s delay, toy1: 0.5s delay */
    .transmission-hero-toy {
        position: absolute;
        z-index: 1;
    }

    .transmission-hero-toy-1 {
        right: 4vh;
        top: 8vh;
        animation: toy-fade-in 0.8s ease 0.5s both;
    }

    .transmission-hero-toy-1 .toy-inner { animation: toy-inner-appear 0.8s ease 0.5s  both; }

    .transmission-hero-toy-2 {
        animation: toy-fade-in 0.8s ease 0.25s both;
    }

    .transmission-hero-toy-1 img {
        width: 18vh;
        height: auto;
    }

    @keyframes submarine-float {
        0%, 100% { transform: translateY(0)      rotate(-1deg); }
        50%       { transform: translateY(-1.2vh) rotate(1deg);  }
    }

    .transmission-hero-toy-2 {
        left: -16vh;
        bottom: 20vh;
    }

    /* submarine-float sur .toy-inner : évite conflit transform avec toy-inner-appear */
    /* démarre à 1s = après la fin de l'apparition (0.5s delay + 0.5s duration) */
    .transmission-hero-toy-2 .toy-inner {
        animation: toy-inner-appear 0.8s ease 0.25s both, submarine-float 3.5s ease-in-out 1.05s infinite;
    }

    .transmission-hero-toy-2 img {
        width: 26vh;
        height: auto;
    }

    /* Sous-titre Hero Area */
    .section-model-hero .section-subtitle,
    .section-model-transmission-hero .section-subtitle {
        font-family: var(--font-subtitle-hero-family);
        font-size: var(--font-subtitle-hero-size);
        font-weight: var(--font-subtitle-hero-weight);
        line-height: var(--font-subtitle-hero-line-height);
        letter-spacing: var(--font-subtitle-hero-letter-spacing);
        text-transform: var(--font-subtitle-hero-text-transform);
    }

    /* Texte Hero Area */
    .section-model-hero .section-text,
    .section-model-transmission-hero .section-text {
        font-family: var(--font-text-family);
        font-size: var(--font-text-size);
        font-weight: var(--font-text-weight);
    }

    /* CTAs Hero Area */
    .section-model-hero .hero-ctas,
    .section-model-transmission-hero .hero-ctas {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
        align-items: flex-start;
    }

    /* Marge pour texte suivi d'un CTA */
    .section-text-with-cta {
        margin-bottom: 1vh;
    }

    /* Carousel et Articles : voir carousel.css et articles.css */

    /* --- H1 STANDARD (tous les H1 par défaut) --- */
    h1 {
        font-family: var(--font-h1-standard-family);
        font-size: var(--font-h1-standard-size);
        font-weight: var(--font-h1-standard-weight);
        line-height: var(--font-h1-standard-line-height);
    }

    /* --- H1 HOME PAGE + TRANSMISSION HERO --- */
    .home h1,
    .section-model-transmission-hero h1 {
        font-family: var(--font-h1-home-family);
        font-size: var(--font-h1-home-size);
        font-weight: var(--font-h1-home-weight);
        line-height: var(--font-h1-home-line-height);
    }

    /* --- SECTION DEMI-HAUTEUR (single post) --- */
    .main-section-demi {
        height: 50vh;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: var(--spacing-sm);
    }

    /* --- POST META (métadonnées article) --- */
    .post-meta {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
    }

    .post-meta-item {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
    }

    .post-meta-avatar {
        width: 3vh;
        height: 3vh;
        border-radius: 50% !important;
        object-fit: cover;
        overflow: hidden;
        display: block;
    }

    .post-meta-icon {
        width: 0.75em;
        height: 0.75em;
        fill: var(--color-text);
        flex-shrink: 0;
    }

    .text-meta {
        font-family: var(--font-small-text-accent-family);
        font-size: var(--font-small-text-accent-size);
        font-weight: var(--font-small-text-accent-weight);
        text-transform: var(--font-small-text-accent-text-transform);
        line-height: var(--font-small-text-accent-line-height);
        color: var(--color-text);
    }

    /* --- EXTRAIT ARTICLE (excerpt) --- */
    .post-excerpt {
        font-family: var(--font-small-text-italic-family);
        font-size: var(--text-size-cta);
        font-weight: var(--font-small-text-italic-weight);
        font-style: var(--font-small-text-italic-style);
        line-height: var(--line-height-comfortable);
        color: var(--color-text);
    }

    /* --- IMAGE À LA UNE (featured image) --- */
    /* Styles communs : <img> direct (sans Imagify) ET <picture> (avec Imagify) */
    .post-featured-image {
        display: block;
        width: 100%;
        height: 33.33vh;
        object-fit: cover;
        object-position: center center;
    }

    /* Support Imagify : <img> interne dans <picture class="post-featured-image"> */
    .post-featured-image img {
        width: 100%;
        height: 33.33vh;
        object-fit: cover;
        object-position: center center;
    }

    /* --- H2 SECTION AUTEUR (H1 Standard style) --- */
    h2.h2-author {
        font-family: var(--font-h1-standard-family) !important;
        font-size: var(--font-h1-standard-size) !important;
        font-weight: var(--font-h1-standard-weight) !important;
        line-height: var(--font-h1-standard-line-height) !important;
        width: 100%;
    }

    /* Largeurs section auteur */
    h2.h2-author + h3.lvl-1 {
        width: 75vh;
    }

    h2.h2-author ~ .lvl-2 {
        width: 100%;
    }

    /* Section auteur */
    .author-section .section-columns {
        gap: var(--spacing-lg);
    }

    /* Page auteur : intro (colonnes texte + bandeau) */
    .author-page-intro-section .section-columns {
        --col1-width: 1fr;
        --col2-width: 1fr;
        gap: var(--spacing-xl);
    }

    /* Page auteur : section maison d'édition
     * Calcul : .main-section = 178vh, padding left=0 right=8vh → contenu = 170vh
     * Grid 2fr/1fr gap 4vh → col1 = 166×⅔ ≈ 111vh, col2 ≈ 55vh
     * Section width = 111vh (contenu) + 8vh (padding-right) = 119vh */
    .author-publisher-section,
    html.uav-horizontal-enabled .author-publisher-section {
        padding-left: 0;
    }

    html.uav-horizontal-enabled .author-publisher-section {
        width: 119vh;
        min-width: 119vh;
    }

    .author-publisher-section h2.h2-author {
        width: 80vh;
    }

    /* Panneau "Autres publications" : côte à côte avec la rangée des livres */
    html.uav-horizontal-enabled .archive-products-section {
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-xl);
    }

    .author-other-publications {
        width: 55vh;
        flex-shrink: 0;
        align-self: center;
    }

    .author-other-publications p {
        margin-bottom: 0;
        margin-top: 1em;
    }

    .author-other-publications ul,
    .author-other-publications ol {
        padding-left: var(--spacing-md);
    }

    .author-page-intro-col-text {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .author-page-intro-col-text .author-social-links {
        margin-top: var(--spacing-sm);
    }

    .author-section .lvl-2 {
        align-items: flex-start;
    }

    /* ========================================================================
       ARTICLE HORIZONTAL LAYOUT (Desktop uniquement >1201px)
       ======================================================================== */

    /* Variables CSS */
    .article-contenu-horizontal {
        --h-col-height: 66.66vh;
        --h-col-gap: 8vh;
        --h-anim-speed: 0.3s;
        --h-image-bg-color: var(--color-green);
        --h-image-bg-width: 15vh;
    }

    /* Couleurs fond images selon catégorie */
    .article-category-green { --h-image-bg-color: var(--color-green); }
    .article-category-blue { --h-image-bg-color: var(--color-blue); }
    .article-category-pink { --h-image-bg-color: var(--color-pink); }
    .article-category-gold { --h-image-bg-color: var(--color-gold); }

    /* Centrage vertical de la section (95vh = viewport - header 5vh) */
    .main-section-variable.article-contenu-horizontal {
        margin-top: calc((95vh - var(--h-col-height)) / 2);
        margin-bottom: calc((95vh - var(--h-col-height)) / 2);
    }

    /* Masquer le contenu pendant le chargement JS (garde l'espace) */
    .article-contenu-horizontal.is-loading > *:not(.dynamic-column) {
        visibility: hidden !important;
    }

    /* Afficher le contenu une fois traité */
    .article-contenu-horizontal.is-processed > * {
        visibility: visible !important;
    }

    /* Suppression des spacers par défaut */
    .article-contenu-horizontal .wp-block-spacer {
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    /* Typographie de base */
    .article-contenu-horizontal h2,
    .article-contenu-horizontal h3 {
        display: block !important;
        width: 100% !important;
        margin-top: 0 !important;
        line-height: 1.2;
    }

    .article-contenu-horizontal h2 {
        margin-bottom: var(--spacing-sm); /* 2vh desktop / 16px mobile */
    }

    /* Liens dans le contenu : soulignés par défaut, pas au survol (inverse du footer) */
    .article-contenu-horizontal a {
        color: var(--color-text);
        text-decoration: underline;
        text-decoration-thickness: var(--border-thin);
        text-underline-offset: var(--border-thick);
        transition: text-decoration var(--transition-normal) var(--ease-standard);
    }

    .article-contenu-horizontal a:hover {
        text-decoration: none;
    }

    .article-contenu-horizontal p {
        orphans: 3;
        widows: 3;
    }

    /* Conteneur Flex Horizontal Desktop */
    .article-contenu-horizontal {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: var(--h-col-gap) !important;
        height: var(--h-col-height) !important;
        width: auto !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        align-items: center !important;
        text-align: left;
        scroll-behavior: smooth;
    }

    /* Colonnes dynamiques */
    .article-contenu-horizontal .dynamic-column {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        max-width: var(--h-col-height) !important;
        height: var(--h-col-height) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        overflow: visible !important;
        position: relative !important;
        transition: transform var(--h-anim-speed) ease-in-out;
    }

    .article-contenu-horizontal .dynamic-column-content {
        width: 100% !important;
        overflow: visible !important;
    }

    /* Images Desktop (support Imagify picture) */
    .article-contenu-horizontal picture,
    .article-contenu-horizontal img {
        max-height: 40vh !important;
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        display: flex !important;
        margin: 1vh auto !important;
        object-fit: contain;
        position: relative !important;
        z-index: 1 !important;
    }

    .article-contenu-horizontal picture img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    .article-contenu-horizontal figure {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
        width: 100% !important;
        position: relative !important;
    }

    /* Fond décoratif derrière l'image */
    .article-contenu-horizontal figure::before {
        content: '' !important;
        position: absolute !important;
        width: var(--h-image-bg-width) !important;
        height: var(--figure-bg-height, 50vh) !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        background-color: var(--h-image-bg-color) !important;
        z-index: 0 !important;
        pointer-events: none !important;
    }

    .article-contenu-horizontal figcaption {
        display: none !important;
    }

    /* ============================================================================
       SECTION ÉQUIPE — Desktop (≥1201px) — persons grid horizontal scroll
       ========================================================================== */

    /* Override padding : chaque person gère son propre padding */
    .section-model-equipe {
        padding: 0;
    }

    /* Grid horizontal : toutes les personnes côte à côte */
    .section-model-equipe .equipe-persons-grid {
        display: flex;
        flex-direction: row;
        gap: var(--spacing-xl);
    }

    /* Wrapper première fiche : empile le h2 au-dessus de la fiche en flex column */
    .section-model-equipe .equipe-person-wrapper {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
        width: 89vh;
        min-width: 89vh;
    }

    /* Chaque personne — flex row : photo gauche, textes droite */
    .section-model-equipe .equipe-person {
        width: 89vh;
        min-width: 89vh;
        padding: var(--spacing-md);
        display: flex;
        flex-direction: row;
        gap: var(--spacing-md);
        align-items: center;
    }

    /* Dans le wrapper, la fiche prend toute la largeur disponible */
    .section-model-equipe .equipe-person-wrapper > .equipe-person {
        width: 100%;
        min-width: 0;
    }

    /* Photo portrait format 3/4 — 50% du conteneur
       overflow: hidden nécessaire quand Imagify wrap l'<img> dans une <picture>
       aspect-ratio + overflow contiennent l'<img> interne qui sinon déborde */
    .section-model-equipe .equipe-person-photo {
        width: 40%;
        flex-shrink: 0;
        align-self: center;
        aspect-ratio: 3 / 4;
        overflow: hidden;
        display: block;
        /* object-fit/position ignorés sur <picture>, appliqués sur <img> direct */
        object-fit: cover;
        object-position: top;
    }

    /* <img> à l'intérieur de <picture> (Imagify) — doit remplir le conteneur */
    .section-model-equipe .equipe-person-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
        display: block;
    }

    /* Colonne droite : nom, rôle, accroche, description */
    .section-model-equipe .equipe-person-identity {
        display: flex;
        flex-direction: column;
        align-self: center;
    }

    /* Espace uniquement avant l'accroche et la description */
    .section-model-equipe .equipe-person-catchphrase,
    .section-model-equipe .equipe-person-description {
        margin-top: var(--spacing-2xs);
    }

    /* Titre de la section équipe */
    .section-model-equipe .equipe-section-title {
        width: 65vh;
    }

    /* Nom : h3 affiché comme h2 standard */
    .section-model-equipe .equipe-person-name {
        font-family: var(--font-h2-standard-family);
        font-size: var(--font-h2-standard-size);
        font-weight: var(--font-h2-standard-weight);
        line-height: var(--font-h2-standard-line-height);
    }

    /* Rôle en italique */
    .section-model-equipe .equipe-person-role {
        font-style: italic;
    }

    /* Accroche en gras */
    .section-model-equipe .equipe-person-catchphrase {
        font-weight: bold;
    }

    /* Zigzag : membres alternés verticalement */
    .section-model-equipe .equipe-person {
        transition: var(--transition-transform);
    }

    .section-model-equipe .equipe-persons-grid > .equipe-person:nth-child(odd of .equipe-person) {
        transform: translateY(calc(-1 * var(--spacing-lg)));
    }

    .section-model-equipe .equipe-persons-grid > .equipe-person:nth-child(even of .equipe-person) {
        transform: translateY(var(--spacing-lg));
    }

    /* Première fiche (dans le wrapper) : pas de décalage */
    .section-model-equipe .equipe-person-wrapper > .equipe-person {
        transform: none;
    }

    /* Description en small-text — cible aussi les <p> générés par wpautop() */
    .section-model-equipe .equipe-person-description,
    .section-model-equipe .equipe-person-description p {
        font-family: var(--font-small-text-family);
        font-size: calc((var(--font-small-text-size) + var(--font-text-size)) / 2);
        font-weight: var(--font-small-text-weight);
        line-height: var(--font-small-text-line-height);
    }

}

/* ============================================================================
   COLONNE CONTENU
   ========================================================================== */

.column-model-colonne-contenu {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.column-model-colonne-contenu hr {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

/* Listes ul/ol dans la colonne contenu : même margin-bottom que <p>, padding-left cohérent */
.column-model-colonne-contenu .colonne-contenu-body ul,
.column-model-colonne-contenu .colonne-contenu-body ol {
    margin-bottom: calc((var(--spacing-xs) + var(--spacing-sm)) / 2);
    padding-left: var(--spacing-md);
}

.column-model-colonne-contenu .colonne-contenu-body ul:last-child,
.column-model-colonne-contenu .colonne-contenu-body ol:last-child {
    margin-bottom: 0;
}

/* Bullet points carrés pour les listes non-ordonnées */
.column-model-colonne-contenu .colonne-contenu-body ul {
    list-style-type: square;
}

/* Éléments de liste : même typographie que les <p> */
.column-model-colonne-contenu .colonne-contenu-body li {
    font-family: var(--font-text-family);
    font-size: var(--font-text-size);
    font-weight: var(--font-text-weight);
    line-height: var(--font-text-line-height);
}

/* ============================================================================
   SECTION FAQ — Styles partagés (animation, structure hors breakpoints)
   ========================================================================== */

/* Conteneur de réponse : grid-template-rows anime 0fr → 1fr (ouverture) et 1fr → 0fr (fermeture)
   linear : vitesse constante → ouverture et fermeture parfaitement symétriques */
.section-model-faq .faq-answer,
.section-model-faq-courte .faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s linear;
    overflow: hidden;
}

/* Wrapper interne requis pour le grid trick (overflow hidden + min-height 0)
   Pas de padding ici : le padding contribuerait à la taille minimum du grid item
   et empêcherait grid-template-rows d'atteindre 0fr en fin de fermeture */
.section-model-faq .faq-answer-inner,
.section-model-faq-courte .faq-answer-inner {
    overflow: hidden;
    min-height: 0;
}

/* État ouvert : piloté par JS via la classe .is-open */
.section-model-faq .faq-item.is-open .faq-answer,
.section-model-faq-courte .faq-item.is-open .faq-answer {
    grid-template-rows: 1fr;
}

/* Icône bascule : + quand fermé, × quand ouvert */
.section-model-faq .faq-item.is-open > .faq-question::after,
.section-model-faq-courte .faq-item.is-open > .faq-question::after {
    content: '\00D7';
}

/* Seul le margin est resetté : la typo h4 s'applique normalement */
.section-model-faq .faq-question h4,
.section-model-faq-courte .faq-question h4 {
    margin: 0;
}

/* h3 sémantique mais visuellement identique à h4 */
.section-model-faq-courte .faq-question h3 {
    margin: 0;
    font-family: var(--font-h4-family);
    font-size: var(--font-h4-size);
    font-weight: var(--font-h4-weight);
    line-height: var(--font-h4-line-height);
}

/* ============================================================================
   SECTION FAQ — Accordion catégories + colonnes (desktop)
   ========================================================================== */

@media (min-width: 1201px) {

    .section-model-faq {
        padding-top: var(--spacing-xl);
        padding-bottom: var(--spacing-xl);
        display: flex;
        flex-direction: column;
        gap: var(--spacing-lg);
    }

    .section-model-faq .faq-section-title {
        width: 100%;
    }

    /* Catégories côte à côte en scroll horizontal : une nouvelle catégorie = une nouvelle colonne */
    .section-model-faq .faq-categories {
        display: flex;
        flex-direction: row;
        gap: 8vh; /* identique au gap entre colonnes FAQ et au CONFIG.gap de l'article layout */
        align-items: flex-start;
    }

    /* Une catégorie : titre au-dessus, colonnes en dessous */
    .section-model-faq .faq-category {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
    }

    /* Wrapper des colonnes d'une catégorie : côte à côte */
    .section-model-faq .faq-columns-wrapper {
        display: flex;
        flex-direction: row;
        gap: 8vh;
        align-items: flex-start;
    }

    /* Colonne : 66.66vh = CONFIG.columnHeight de l'article layout (article-horizontal-layout.js) */
    .section-model-faq .faq-column {
        width: 66.66vh;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
    }

    /* Conteneur des questions : pas de gap, les séparateurs sont les bordures */
    .section-model-faq .faq-items {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .section-model-faq .faq-category-title {
        margin-bottom: 0;
    }

    /* Accordion : items */
    .section-model-faq .faq-item {
        border-bottom: var(--border-thin) solid var(--color-text);
        padding: 1vh 0;
    }

    .section-model-faq .faq-items .faq-item:first-child {
        border-top: var(--border-thin) solid var(--color-text);
    }

    /* FAQ + FAQ Courte — règles communes */
    .section-model-faq .faq-question,
    .section-model-faq-courte .faq-question {
        cursor: pointer;
        padding: var(--spacing-2xs) 0;
        list-style: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--spacing-xs);
        user-select: none;
    }

    /* FAQ + FAQ Courte — règles communes */
    .section-model-faq .faq-question::-webkit-details-marker,
    .section-model-faq-courte .faq-question::-webkit-details-marker {
        display: none;
    }

    .section-model-faq .faq-question::after {
        content: '+';
        flex-shrink: 0;
        font-weight: var(--font-h4-weight);
        font-size: var(--text-size-xl);
        line-height: 1;
        transition: var(--transition-transform);
    }

    /* FAQ + FAQ Courte — règles communes */
    .section-model-faq .faq-answer p,
    .section-model-faq-courte .faq-answer p {
        margin: 0 0 var(--spacing-3xs);
    }

    /* FAQ + FAQ Courte — règles communes */
    /* margin-bottom sur le dernier p = espace sous la réponse avant le séparateur
       Égal au padding-top/bottom de .faq-question pour une symétrie visuelle */
    .section-model-faq .faq-answer p:last-child,
    .section-model-faq-courte .faq-answer p:last-child {
        margin-bottom: var(--spacing-2xs);
    }

    /* Liens dans les réponses : soulignés par défaut, pas au survol (même style qu'articles) */
    .section-model-faq .faq-answer a {
        color: var(--color-text);
        text-decoration: underline;
        text-decoration-thickness: var(--border-thin);
        text-underline-offset: var(--border-thick);
        transition: text-decoration var(--transition-normal) var(--ease-standard);
    }

    /* FAQ + FAQ Courte — règles communes */
    .section-model-faq .faq-answer a:hover,
    .section-model-faq-courte .faq-answer a:hover {
        text-decoration: none;
    }

    /* ===========================================
       Section FAQ Courte — Desktop
       Accordion plat sans catégories
       =========================================== */

    /* Override .main-section-demi : hauteur auto, alignement haut */
    .section-model-faq-courte {
        height: auto;
        justify-content: flex-start;
        padding-top: var(--spacing-xl);
        padding-bottom: var(--spacing-xl);
        gap: var(--spacing-md);
        overflow-y: auto;
    }

    .section-model-faq-courte .faq-courte-items {
        display: flex;
        flex-direction: column;
        width: 66.66vh;
    }

    .section-model-faq-courte .faq-item {
        border-bottom: var(--border-thin) solid var(--color-text);
        padding: 1vh 0;
    }

    .section-model-faq-courte .faq-courte-items .faq-item:first-child {
        border-top: var(--border-thin) solid var(--color-text);
    }

    .section-model-faq-courte .faq-question::after {
        content: '+';
        flex-shrink: 0;
        font-size: var(--text-size-xl);
        line-height: 1;
    }

    .section-model-faq-courte .faq-answer a {
        color: var(--color-text);
        text-decoration: underline;
    }

    /* ===========================================
       Section Transmission - Mission
       2 colonnes 25/75 via .section-columns standard
       =========================================== */

    .section-model-transmission-mission {
        margin-right: 20vh;
    }

    /* Colonnes fixes 45/55 */
    .section-model-transmission-mission .section-columns {
        grid-template-columns: 9fr 11fr;
    }

    /* Col1 : contexte de positionnement pour les nuages et le jouet */
    .section-model-transmission-mission .section-column-col1 {
        position: relative;
        align-self: stretch;
        overflow: visible;
    }

    /* Chaque élément : ancré au centre de la colonne */
    .section-model-transmission-mission .mission-cloud {
        position: absolute;
        left: 50%;
        top: 50%;
    }

    /* Images dans les éléments */
    .section-model-transmission-mission .mission-cloud img,
    .section-model-transmission-mission .mission-cloud picture img {
        height: auto;
        display: block;
    }

    /* Nuage Rose — 14vh largeur, -7vh gauche, -12vh haut, z-index 1 */
    .section-model-transmission-mission .mission-cloud-pink {
        z-index: 1;
        transform: translateX(calc(-50% - 7vh)) translateY(calc(-50% - 17vh));
    }
    .section-model-transmission-mission .mission-cloud-pink img,
    .section-model-transmission-mission .mission-cloud-pink picture img {
        width: 14vh;
    }

    /* Nuage Or — 19vh largeur, +4vh droite, -6vh haut, z-index 2 */
    .section-model-transmission-mission .mission-cloud-gold {
        z-index: 2;
        transform: translateX(calc(-50% + 4vh)) translateY(calc(-50% - 7vh));
    }
    .section-model-transmission-mission .mission-cloud-gold img,
    .section-model-transmission-mission .mission-cloud-gold picture img {
        width: 24vh;
    }

    /* Nuage Vert — 40vh largeur, -12vh gauche, +4vh bas, z-index 3 */
    .section-model-transmission-mission .mission-cloud-green {
        z-index: 3;
        transform: translateX(calc(-50% - 12vh)) translateY(calc(-50% + 4vh));
    }
    .section-model-transmission-mission .mission-cloud-green img,
    .section-model-transmission-mission .mission-cloud-green picture img {
        width: 48vh;
    }

    /* Jouet — 24vh largeur, -14vh gauche / +5vh bas (pré-compensé parallax 2:1), inversé horizontal, z-index 4 */
    .section-model-transmission-mission .mission-toy {
        z-index: 4;
        transform: translateX(calc(-50% - 14vh)) translateY(calc(-50% + 5vh)) scaleX(-1);
    }
    .section-model-transmission-mission .mission-toy img,
    .section-model-transmission-mission .mission-toy picture img {
        width: 24vh;
        animation: airplane-fly 4.2s ease-in-out infinite;
    }

    /* Avion en vol : banking (inclinaison) + légère houle verticale.
       Animé sur l'img — le transform de positionnement est sur le div parent, zéro conflit.
       Rythme asymétrique (25/55/80/100%) pour éviter l'effet pendule régulier du sous-marin. */
    @keyframes airplane-fly {
        0%   { transform: translateY(0)      rotate(0deg);   }
        25%  { transform: translateY(-0.5vh) rotate(-2deg);  }
        55%  { transform: translateY(-0.2vh) rotate(1.5deg); }
        80%  { transform: translateY(-0.7vh) rotate(-1deg);  }
        100% { transform: translateY(0)      rotate(0deg);   }
    }

    /* Icône plume : inline, alignée sur la ligne de texte */
    .section-model-transmission-mission .mission-icon-svg {
        width: 1em;
        height: 1em;
        vertical-align: -0.1em;
    }

    /* Espace entre H2 et texte */
    .section-model-transmission-mission .mission-text {
        margin-top: var(--spacing-md);
        width: 67vh;
    }

    /* CTA */
    .section-model-transmission-mission .mission-cta {
        margin-top: var(--spacing-xs);
    }

}