/*
Theme Name: Atelier Futur Papa
Theme URI: https://atelierfuturpapa.fr
Description: Thème enfant de Hello Elementor pour atelierfuturpapa.fr. Reprend à l'identique la maquette « FR v8 » : header vidéo, les deux portes, les deux offres, la méthode, le bandeau, la présentation et la réservation. Les cinq pages sont générées automatiquement à l'activation.
Author: Atelier Futur Papa
Template: hello-elementor
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: atelier-futur-papa
Tags: elementor, child-theme
*/

/* ==========================================================================
   Ce fichier ne contient AUCUN style de la maquette.
   Tout le design vit dans assets/css/style.css, copié tel quel depuis la
   maquette du designer. On ne trouve ici que les correctifs propres à
   WordPress, invisibles pour le visiteur.
   ========================================================================== */

/* La barre d'administration WordPress (visible uniquement quand vous êtes
   connecté) mesure 32 px et se superpose au header collant. On décale le
   header d'autant, pour vous seul : un visiteur non connecté ne voit
   strictement rien de ces règles. */
body.admin-bar .hdr { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .hdr { top: 46px; }
}

/* ---------- Cadre de la vidéo de la page Formation ----------

   Le designer avait dessiné cette bande en 3:1 sur ordinateur (et 4:3 sur
   mobile), proportions pensées pour une photo. Une vidéo YouTube étant en
   16:9, elle s'y affichait avec 293 px de noir de chaque côté sur un écran de
   1440 px, soit 41 % de la largeur. On aligne donc le cadre sur la vidéo :
   elle remplit maintenant toute la largeur, sans aucune bande.

   Le sélecteur est plus spécifique que celui du designer
   (.hero-band.small.band-video img contre .hero-band.small img), ce qui lui
   permet de l'emporter à toutes les largeurs, y compris sur la règle mobile
   placée plus loin dans son fichier. Et comme il exige la classe
   .band-video, la bande image de la page Atelier garde exactement son
   cadrage 3:1 d'origine.

   Conséquence assumée : le bloc passe de 480 à 810 px de haut sur ordinateur,
   ce qui décale la suite de la page vers le bas. C'est le choix validé. */
.hero-band.small.band-video img { aspect-ratio: 16 / 9; }

/* ---------- Titre à mots tournants : « Découvrir, apprendre… » ----------

   « Découvrir, » reste fixe ; les trois mots suivants se relaient au même
   endroit, toutes les 2,2 secondes.

   Le point délicat est la largeur. Les trois mots ne font pas la même
   longueur : si le mot affiché occupait la place en flux normal, le titre
   s'allongerait et se raccourcirait sans arrêt, et pourrait même changer de
   nombre de lignes. On les superpose donc tous dans une même cellule de
   grille (inline-grid, tous en grid-area 1/1) : le conteneur prend
   automatiquement la largeur du mot le plus long et ne bouge plus jamais,
   quelle que soit la taille de police — laquelle varie ici avec clamp(). */

.afp-rota .rota {
  position: relative;
  display: inline-grid;
  /* baseline, et non top : le mot doit poser sur la même ligne d'écriture que
     « Découvrir, ». Avec un alignement sur le haut de la ligne, il flottait
     4 à 5 px trop bas, ce qui se voit tout de suite sur un grand titre. */
  vertical-align: baseline;
}

/* Les virgules d'origine : retirées de l'affichage mais laissées au texte,
   pour qu'un lecteur d'écran entende toujours la phrase complète du designer,
   « Découvrir, apprendre, pratiquer, répéter ». Positionnées en absolu, elles
   n'entrent pas dans le calcul de la largeur de la grille. */
.afp-rota .rota-sep {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.afp-rota .rota-mot {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(.34em);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  white-space: nowrap;
}

/* Les mots tournants prennent le dégradé violet de la charte, celui des
   boutons principaux. Le procédé consiste à peindre le dégradé en fond du
   mot, puis à le découper à la forme des lettres.

   La règle est enfermée dans un @supports : sur un navigateur qui ignorerait
   le découpage, `color:transparent` rendrait le mot invisible. Là, il garde
   simplement l'encre du titre. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .afp-rota .rota-mot {
    background-image: var(--grad-violet);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.afp-rota .rota-mot.on {
  opacity: 1;
  transform: none;
}

/* Réglage système « réduire les animations » : le script ne fait alors rien
   tourner. Ces règles ne servent que de garde-fou si la classe était posée
   malgré tout — la phrase complète réapparaît, immobile. */
@media (prefers-reduced-motion: reduce) {
  .afp-rota .rota { display: inline; }
  .afp-rota .rota-sep {
    position: static; width: auto; height: auto; clip-path: none;
  }
  .afp-rota .rota-mot {
    opacity: 1; transform: none; transition: none;
  }
}

/* Message affiché si l'envoi du formulaire échoue (panne de messagerie,
   coupure réseau). Cet état n'existe pas dans la maquette — il n'y avait pas
   d'envoi réel — donc cette règle ne peut modifier aucun écran maquetté.
   Elle reprend le pendant rouge du vert de confirmation `.form-ok`. */
.afp-err { color: #B4232A; font-weight: 600; }

/* Le contenu des deux pages légales est stocké dans l'éditeur WordPress.
   L'éditeur peut y insérer des figures et des blocs d'image : on leur donne
   le même rythme vertical que les paragraphes de la maquette. */
.legal .container > figure,
.legal .container > .wp-block-image { margin: 0 0 1.1em; }