/* =============================================================================
   cta-devis.css — la bande « Realisons ensemble le voyage dont vous revez »
   =============================================================================
   Repris de la maquette figee : `style.css` l. 1380-1398 (base + `@media 680px`),
   plus la part qui nous concerne de deux regles PARTAGEES, cf. les encadres.

   La section : une video de fond plein cadre, un voile degrade venant de la
   DROITE, et le texte aligne a droite avec une vraie marge.

   ⚠️ TOUT le CSS de ce type de bloc vit ici — y compris ses @media. Rien dans le
   CSS d'une page : un bloc duplique vers une page vierge doit rester correct.
   ============================================================================= */

/* CTA "Réalisons ensemble…" : VIDÉO aérienne de fond (drone 4x4 savane) + voile dégradé depuis la
   DROITE pour la lisibilité ; texte aligné À DROITE, avec une vraie MARGE à droite (pas collé au bord). */
.cta-devis{ position:relative; overflow:hidden; min-height:min(72vh,580px);
  display:flex; align-items:center; background:#241d12; text-align:right; }
/* vidéo de fond plein cadre */
.cta-devis__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
/* voile : sombre à DROITE (sous le texte) -> transparent à gauche (on garde la vidéo visible) */
.cta-devis::before{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to left, rgba(14,14,14,.88) 0%, rgba(14,14,14,.64) 34%, rgba(14,14,14,.20) 68%, rgba(14,14,14,.05) 100%); }
/* bloc texte : dans le container (garde donc le padding latéral -> MARGE à droite), aligné à droite */
.cta-devis__inner{ position:relative; z-index:2; width:100%; padding-top:clamp(40px,6vw,80px); padding-bottom:clamp(40px,6vw,80px); }
.cta-devis__title{ font-size:var(--fs-title); color:var(--blanc); margin:0 0 18px auto; line-height:1.05; max-width:20ch; }
.cta-devis__txt{ font-size:var(--fs-body); line-height:1.65; color:rgba(255,255,255,.85); margin:0 0 32px auto; max-width:58ch; }
.cta-devis .btn--primary{ background:var(--jaune); color:var(--noir); }
.cta-devis .btn--primary:hover{ background:#f4c020; box-shadow:0 12px 30px -8px rgba(0,0,0,.5); }

/* =============================================================================
   DIVERGENCE ASSUMEE — le fond est un IFRAME Vimeo, pas un <video>
   =============================================================================
   La maquette heberge ses 7 videos en local (23 Mo) et les rend en `<video>`,
   d'ou le `object-fit:cover` ci-dessus. Arbitrage d'Alexandre le 2026-10-01 :
   les videos partent sur **Vimeo** et se reglent au backoffice. Trois raisons,
   toutes mesurees : notre mediatheque REFUSE les videos (`uploadDeny => ['all']`,
   `video/mp4` hors liste blanche), sa limite est a 10 Mo quand le hero pese
   8,5 Mo, et versionner 23 Mo contredirait le motif de D48.

   ⚠️ CONSEQUENCE QUI N'EST PAS UN DETAIL : `object-fit` NE S'APPLIQUE PAS a un
   iframe. La regle de la maquette est donc conservee telle quelle pour le cas
   `<video>` (une video locale resterait correcte), et le recouvrement de l'iframe
   est obtenu par la geometrie : on surdimensionne au plus grand des deux cotes
   d'un 16/9 et on recentre. `177.78vh` = 16/9 x 100vh, `56.25vw` = 9/16 x 100vw.
   ⚠️ Ces deux nombres SUPPOSENT un format 16/9. Une video verticale ou carree
   laisserait des bandes : c'est a dire a la cliente, pas a deviner.

   ⚠️ ET L'IFRAME NE CAPTE PAS LE POINTEUR (`pointer-events:none`) : sans ca, le
   lecteur Vimeo intercepte les clics au-dessus de la section et le bouton d'appel
   a l'action devient inatteignable sur la moitie gauche. Le mode `background=1`
   masque les controles mais l'iframe reste cliquable.
   ============================================================================= */
.cta-devis__video--embed{ border:0; pointer-events:none; }
.cta-devis__video--embed iframe{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:max(100%, 177.78vh);      /* 16/9 du viewport : couvre en hauteur */
  height:max(100%, 56.25vw);      /* 9/16 du viewport : couvre en largeur */
  border:0; pointer-events:none;
}

/* ⚠️ PAS DE REGLE POUR L'IMAGE DE REPLI, et ce n'est pas un oubli : la vue lui
   donne la MEME classe `.cta-devis__video` qu'a la video, donc elle herite du
   `object-fit:cover` ci-dessus. Une `<img>` et un `<video>` se cadrent de la meme
   facon — ajouter un selecteur dedie dupliquerait la regle et les laisserait
   diverger. */

@media (max-width:680px){
  /* mobile : voile vertical + texte centré */
  .cta-devis{ text-align:center; }
  .cta-devis::before{ background:linear-gradient(to top, rgba(14,14,14,.9) 0%, rgba(14,14,14,.55) 60%, rgba(14,14,14,.35) 100%); }
  .cta-devis__title, .cta-devis__txt{ margin-left:auto; margin-right:auto; }
}

/* ⚠️ REGLE PARTAGEE, part extraite. `mobile.css:1271` porte
   `.intro-hero__inner, .feature__inner, .cta-devis__inner{ padding-inline:24px; }`
   — les deux premiers blocs ne sont pas encore decoupes. C'est le TROISIEME cas
   du meme piege dans ce portage (apres la grille du pied de page et l'anneau de
   focus de la pilule) : une regle de la maquette melange du global et du
   page-specifique, et l'ecarter en bloc emporte ce qui nous concerne.
   Au moment de decouper `intro-hero` et `feature`, ajouter LEUR part dans LEUR
   fichier — ne pas revenir elargir ce selecteur ici. */
@media (max-width:640px){
  .cta-devis__inner{ padding-inline:24px; }
}