/* ============================================================
 * Avion · Cover
 * Image + titre positionnable.
 * Modes de hauteur : natural / screen / large / medium / small.
 * Mobile : peut hériter du desktop ou avoir une hauteur propre.
 * ============================================================ */

/* ---------- Conteneur ---------- */
.avion-cover {
    position: relative;
    width: 100%;
    overflow: hidden;
    color: #fff;
    background-color: #e8e8e6; /* couleur de placeholder quand pas d'image */
}

/* Front : force le full-width même dans des templates contraints */
.avion-cover.alignfull,
.wp-block-avion-cover.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* ---------- Image ---------- */
.avion-cover__image {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: bottom; /* supprime le gap baseline (~10px) sous l'image */
}

/* Mode "natural" : l'image est en flux normal, la section prend sa hauteur native */
.avion-cover.is-height-natural .avion-cover__image {
    position: relative;
    z-index: 0;
}
/* Réserve la place avant chargement (anti-CLS) via la CSS var fournie par le PHP/JS */
.avion-cover.is-height-natural[style*="--cover-aspect"] {
    aspect-ratio: var(--cover-aspect);
}
/* Pas d'image en mode natural : on garde un min-height pour le placeholder */
.avion-cover.is-height-natural.is-no-image {
    min-height: 360px;
}

/* Modes hauteur fixe : image cropée pour remplir */
.avion-cover.is-height-screen,
.avion-cover.is-height-large,
.avion-cover.is-height-medium,
.avion-cover.is-height-small {
    display: flex;
}
.avion-cover.is-height-screen { min-height: 100vh; }
.avion-cover.is-height-large  { min-height: 80vh;  }
.avion-cover.is-height-medium { min-height: 55vh;  }
.avion-cover.is-height-small  { min-height: 35vh;  }

.avion-cover.is-height-screen .avion-cover__image,
.avion-cover.is-height-large .avion-cover__image,
.avion-cover.is-height-medium .avion-cover__image,
.avion-cover.is-height-small .avion-cover__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* ============================================================
 * Effet d'apparition (reveal) — trois phases, crescendo doux.
 *   Phase 1 (0 → 1.2s)   : ::before (couleur) wipe gauche → droite
 *   Phase 2 (0.8 → 2.4s) : image fade + slide depuis la droite (translateX 100→0)
 *   Phase 3 (1.4 → 3.4s) : titre fade + slide, prend son temps
 * Toutes les durées dans la fourchette 1.2–2s pour rester uniformes.
 * Déclenché par .is-revealed ajouté par l'IO dans footer.php.
 * ============================================================ */
.avion-cover--reveal {
    background-color: transparent;
}
.avion-cover--reveal::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--cover-bg, #dddddd);
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.2s ease;
}
.avion-cover--reveal .avion-cover__image {
    z-index: 1; /* au-dessus du ::before couleur */
    opacity: 0;
    transform: translateX(100px);
    transition: opacity 1.6s ease 0.8s, transform 1.6s ease 0.8s;
}
/* Le titre conserve ses classes effet2/timer2 (héritées de index.php) mais on
   redéfinit ici sa transition pour rester dans le tempo du reveal (2s au lieu
   de 4s par défaut). Plus délai léger pour qu'il démarre pendant l'image. */
.avion-cover--reveal .avion-cover__title.effet2.timer2 {
    transition: opacity 2s ease 1.4s, transform 2s ease 1.4s;
}
.avion-cover--reveal.is-revealed::before {
    clip-path: inset(0 0 0 0);
}
.avion-cover--reveal.is-revealed .avion-cover__image {
    opacity: 1;
    transform: translateX(0);
}

/* ---------- Overlay sombre ---------- */
.avion-cover__overlay {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

/* ---------- Conteneur du titre ----------
   Couvre toute la section. La position se calque sur .cover-principal :
   le titre lui-même porte margin-left:5% / width:45% (ou center/right).
   Le flex container gère uniquement la position verticale. */
.avion-cover__inner {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: clamp(20px, 4vw, 60px) 0;
    display: flex;
    flex-direction: column;
}

/* --- Position verticale --- */
.avion-cover.is-pos-top-left      .avion-cover__inner,
.avion-cover.is-pos-top-center    .avion-cover__inner,
.avion-cover.is-pos-top-right     .avion-cover__inner    { justify-content: flex-start; }

.avion-cover.is-pos-center-left   .avion-cover__inner,
.avion-cover.is-pos-center-center .avion-cover__inner,
.avion-cover.is-pos-center-right  .avion-cover__inner    { justify-content: center; }

.avion-cover.is-pos-bottom-left   .avion-cover__inner,
.avion-cover.is-pos-bottom-center .avion-cover__inner,
.avion-cover.is-pos-bottom-right  .avion-cover__inner    { justify-content: flex-end; }

/* --- Position horizontale (inspiré de .cover-principal h1) --- */

/* Gauche : titre dans un bloc de 45% collé à 5% du bord gauche */
.avion-cover.is-pos-top-left .avion-cover__title,
.avion-cover.is-pos-center-left .avion-cover__title,
.avion-cover.is-pos-bottom-left .avion-cover__title {
    width: 45%;
    margin-left: 5%;
    margin-right: auto;
    text-align: left;
}

/* Centre : titre centré, max 90% */
.avion-cover.is-pos-top-center .avion-cover__title,
.avion-cover.is-pos-center-center .avion-cover__title,
.avion-cover.is-pos-bottom-center .avion-cover__title {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Droite : symétrique de gauche */
.avion-cover.is-pos-top-right .avion-cover__title,
.avion-cover.is-pos-center-right .avion-cover__title,
.avion-cover.is-pos-bottom-right .avion-cover__title {
    width: 45%;
    margin-left: auto;
    margin-right: 5%;
    text-align: right;
}

/* Override explicite par l'utilisateur (panneau Titre > Alignement) */
.avion-cover.has-align-left   .avion-cover__title { text-align: left; }
.avion-cover.has-align-center .avion-cover__title { text-align: center; }
.avion-cover.has-align-right  .avion-cover__title { text-align: right; }

/* ---------- Titre (front) — base inspirée de .cover-principal h1 ---------- */
.avion-cover__title {
    margin-top: 0;
    margin-bottom: 0;
    padding: 10px;
    box-sizing: border-box;
    font-family: 'HelveticaNeueETPro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 300;
    letter-spacing: -2px;
    line-height: 1.05;
    transform: scaleY(1.02);
}

/* Police "primary" (défaut) = Helvetica */
.avion-cover.is-font-primary .avion-cover__title {
    font-family: 'HelveticaNeueETPro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 300;
    letter-spacing: -2px;
}
/* Police "secondary" = Cormorant Garamond (sans scaleY) */
.avion-cover.is-font-secondary .avion-cover__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
    letter-spacing: -0.01em;
    transform: none;
}

/* Tailles — la taille L (par défaut) reprend exactement .cover-principal h1 */
.avion-cover.is-size-small  .avion-cover__title { font-size: calc(1.5vw + 8px); }
.avion-cover.is-size-medium .avion-cover__title { font-size: calc(2.2vw + 9px); }
.avion-cover.is-size-large  .avion-cover__title { font-size: calc(3vw + 10px); }
.avion-cover.is-size-huge   .avion-cover__title { font-size: calc(4.5vw + 12px); }

/* Formatage inline du RichText :
   <strong> (Ctrl/Cmd+B) → équivalent à .cover-principal span.bold
   <em>     (Ctrl/Cmd+I) → équivalent à .cover-principal span.fine (Merriweather italic) */
.avion-cover__title strong,
.avion-cover__title span.bold {
    font-weight: 500;
}
.avion-cover__title em,
.avion-cover__title span.fine {
    font-family: 'Merriweather', Georgia, serif;
    font-weight: 100;
    font-style: italic;
    letter-spacing: 0;
}

/* ============================================================
 * Réglages mobile (≤ 768px) — surchargent le desktop
 * ============================================================ */
@media (max-width: 768px) {
    /* Reset : neutralise les contraintes desktop avant d'appliquer la version mobile */
    .avion-cover.has-mobile-natural,
    .avion-cover.has-mobile-screen,
    .avion-cover.has-mobile-large,
    .avion-cover.has-mobile-medium,
    .avion-cover.has-mobile-small {
        min-height: 0;
        aspect-ratio: auto;
        display: block;
    }

    /* Mobile = image native (sans crop) */
    .avion-cover.has-mobile-natural .avion-cover__image {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        object-fit: initial;
    }
    .avion-cover.has-mobile-natural.is-no-image { min-height: 280px; }

    /* Mobile = hauteur fixe (image cropée) */
    .avion-cover.has-mobile-screen,
    .avion-cover.has-mobile-large,
    .avion-cover.has-mobile-medium,
    .avion-cover.has-mobile-small {
        display: flex;
    }
    .avion-cover.has-mobile-screen { min-height: 100vh; }
    .avion-cover.has-mobile-large  { min-height: 80vh; }
    .avion-cover.has-mobile-medium { min-height: 55vh; }
    .avion-cover.has-mobile-small  { min-height: 35vh; }

    .avion-cover.has-mobile-screen .avion-cover__image,
    .avion-cover.has-mobile-large .avion-cover__image,
    .avion-cover.has-mobile-medium .avion-cover__image,
    .avion-cover.has-mobile-small .avion-cover__image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Tailles de titre adaptées au mobile */
    .avion-cover.is-size-huge .avion-cover__title { font-size: clamp(2.4rem, 11vw, 4.6rem); }

    /* Sur mobile, le titre gauche/droite prend 60% comme .cover-principal mobile */
    .avion-cover.is-pos-top-left .avion-cover__title,
    .avion-cover.is-pos-center-left .avion-cover__title,
    .avion-cover.is-pos-bottom-left .avion-cover__title,
    .avion-cover.is-pos-top-right .avion-cover__title,
    .avion-cover.is-pos-center-right .avion-cover__title,
    .avion-cover.is-pos-bottom-right .avion-cover__title {
        width: 60%;
    }
}

/* ============================================================
 * Éditeur Gutenberg — WYSIWYG strict
 * ============================================================ */

/* Hauteur minimale dans l'éditeur en mode natural sans image */
.editor-styles-wrapper .avion-cover.is-height-natural.is-no-image { min-height: 360px; }

/* --- Neutralisation des classes d'animation dans l'éditeur ---
   Sur le front c'est l'IntersectionObserver (footer.php) qui passe opacity à 1
   et transform à 0 quand l'élément entre dans le viewport. Dans l'éditeur on
   veut voir le rendu final immédiatement. */
.editor-styles-wrapper .avion-cover.effet2,
.editor-styles-wrapper .avion-cover .effet2 {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* Idem pour le reveal : on veut voir le rendu final dans l'éditeur. */
.editor-styles-wrapper .avion-cover--reveal {
    background-color: var(--cover-bg, #dddddd);
}
.editor-styles-wrapper .avion-cover--reveal::before {
    display: none;
}
.editor-styles-wrapper .avion-cover--reveal .avion-cover__image {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* --- RichText (h2 contenteditable) dans l'éditeur ---
   Le RichText reçoit la classe .avion-cover__title donc il hérite déjà de
   tous les styles du front. On ajoute juste un bon comportement de focus
   et de placeholder. */
.editor-styles-wrapper .avion-cover h2.avion-cover__title {
    outline: none;
    cursor: text;
}
.editor-styles-wrapper .avion-cover h2.avion-cover__title:focus-within,
.editor-styles-wrapper .avion-cover h2.avion-cover__title.is-selected {
    outline: 1px dashed currentColor;
    outline-offset: 6px;
}
/* Placeholder de RichText : on respecte la couleur du titre */
.editor-styles-wrapper .avion-cover h2.avion-cover__title[data-rich-text-placeholder]::before,
.editor-styles-wrapper .avion-cover .block-editor-rich-text__editable[data-rich-text-placeholder]::before {
    color: currentColor !important;
    opacity: 0.45 !important;
}

/* Filigrane discret quand pas d'image */
.avion-cover__editor-hint {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.avion-cover__editor-hint-icon.dashicons {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 120px;
    width: 120px;
    height: 120px;
    color: #c8c8c4;
    opacity: 0.55;
}
.avion-cover__editor-hint-btn {
    position: absolute !important;
    top: 14px;
    right: 14px;
    pointer-events: auto;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

/* ============================================================
 * Contrôles dans la sidebar
 * ============================================================ */

/* Grille 3x3 de positions */
.avion-cover-ctrl__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    width: 100%;
    aspect-ratio: 3 / 2;
    background: #f0f0f0;
    border-radius: 4px;
    padding: 4px;
}
.avion-cover-ctrl__cell {
    all: unset;
    cursor: pointer;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.avion-cover-ctrl__cell:hover {
    background: #fafafa;
    border-color: #999;
}
.avion-cover-ctrl__cell.is-active {
    background: #252626;
    border-color: #252626;
}
.avion-cover-ctrl__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c8c8c8;
}
.avion-cover-ctrl__cell.is-active .avion-cover-ctrl__dot {
    background: #ffffff;
}

/* Stack de boutons (mode hauteur) */
.avion-cover-ctrl__stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.avion-cover-ctrl__stack .components-button {
    width: 100%;
    text-align: left !important;
    justify-content: flex-start !important;
}