/* Page Contact. S'appuie sur css/tokens.css et css/accueil.css (tampons, navigation, entrées, lignes, pied de page).
   Un seul écran avec le pied de page : en haut à gauche, sur fond jaune, le titre, la phrase et l'adresse mail ;
   à droite le formulaire sur un panneau noir, puis la colonne de navigation. Sur téléphone, tout s'empile. */

html{ scroll-snap-type:none; }
.screen, .foot{ scroll-snap-align:none; scroll-snap-stop:normal; }
/* Une ligne de titre cinétique ne se coupe jamais entre deux lettres. */
[data-kine] .line > span{ white-space:nowrap; }

/* =============== L'écran =============== */
/* Jaune pâle : une teinte claire du Jaune Signal (22 % de jaune sur blanc), pour que le titre et le texte noirs respirent. */
.ct{ --edge:max(20px,4vw); --pkw:52vw; --jaune-pale:#FEF4CF; --jaune-pale:color-mix(in srgb, var(--jaune) 22%, var(--blanc));
  position:relative; overflow:hidden; background:var(--jaune-pale); color:var(--noir);
  display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:none; }

/* L'affiche : retour, titre géant, phrase */
.ct__affiche{ position:relative; display:grid; gap:var(--s-4); align-content:start;
  padding:max(var(--s-4),env(safe-area-inset-top,0px)) var(--edge) var(--s-7); }
.ct__legs{ padding-right:var(--nav-reserve); color:var(--noir); }
.ct__legs li::before{ content:""; display:block; width:14px; height:3px; margin-bottom:5px; background:var(--noir); }
.ct__legs a{ text-decoration:none; }
.ct__legs a:hover, .ct__legs a:focus-visible{ color:var(--bleu); }
/* « PARLE ? », la ligne la plus longue, mesure environ 4,4 em : le corps du titre en découle. */
/* Le titre s'arrête avant la tête d'Élie (qui sort du bord droit) : « PARLE ? » et l'astérisque font ~3,9 em. */
.ct__title{ --tfs:calc((100vw - var(--edge) - var(--pkw) * .608 - 14px) / 3.9); margin-top:clamp(8px,2svh,24px);
  font:900 var(--tfs)/.95 var(--ff-title); text-transform:uppercase; letter-spacing:-.02em; }
.ct__title{ position:relative; }
.ct__title .line + .line{ color:var(--bleu); }
/* L'astérisque de la marque, juste à droite du titre (au bout de « ON SE »), qui tourne comme sur l'accueil */
.ct__aster{ position:absolute; top:.1em; left:3.04em; width:.7em; height:.7em; color:var(--bleu); }   /* « ON SE » se termine à 2,9 em */
.ct__aster svg{ display:block; width:100%; height:100%; animation:tourne 18s linear infinite; }
.ct.is-off .ct__aster svg{ animation-play-state:paused; }
.play .ct__aster{ animation:ct-eclot 900ms var(--sortie) both; animation-delay:calc(var(--t-decal) * 3); }
@keyframes ct-eclot{ from{ transform:scale(0) rotate(-90deg); } to{ transform:none; } }
/* La phrase dans la police des sous-titres du site (Bricolage Grotesque), comme sous le titre de l'accueil. */
.ct .ct__lede{ color:var(--noir); max-width:min(24ch, 100vw - var(--edge) - var(--pkw) * .608 - 16px); font-size:clamp(1.3rem,1.4vw + .5rem,2rem); line-height:1.12; }
/* L'adresse mail, en grand : un clic ouvre la messagerie */
.ct__mail{ justify-self:start; margin-top:var(--s-3); font:900 min(clamp(1.35rem,2.6vw + .3rem,2.75rem), (100vw - var(--edge) - var(--pkw) * .608 - 16px) / 13.4)/1.05 var(--ff-title); letter-spacing:-.01em;
  color:var(--noir); text-decoration:none; overflow-wrap:anywhere;
  background:linear-gradient(var(--noir),var(--noir)) 0 100% / 100% 3px no-repeat; padding-bottom:4px;
  transition:color var(--t-survol) var(--sortie), background-size var(--t-survol) var(--sortie); }
.ct__mail:hover, .ct__mail:focus-visible{ color:var(--bleu); background-image:linear-gradient(var(--bleu),var(--bleu)); }
.ct__mail:focus-visible{ outline:3px solid var(--noir); outline-offset:4px; }

/* Élie qui passe la tête. Repères mesurés sur l'image : le bord vertical (le « mur ») est à 77,5 % de sa largeur
   (le liseré gris d'origine a été nettoyé : le bord est net) ; le bord gauche de la tête est à 16,6 % (d'où 60,8 %
   de la largeur entre la tête et le mur). La photo est posée sur le bas de l'affiche.
   Téléphone : le mur est le bord droit de l'écran ; deux calques, le corps qui sort de derrière le bord, les mains
   (au-delà du mur) devant. Ordinateur : voir plus bas, la photo tire le panneau bleu. */
.ct__peek{ position:absolute; bottom:0; right:calc(var(--pkw) * -.2248 - 2px); width:var(--pkw); aspect-ratio:805 / 1200; pointer-events:none; }
.ct__peek img{ position:absolute; inset:0; width:100%; height:100%; }
.ct__peek-corps{ z-index:1; filter:var(--sh-cut); }
.ct__peek-mains{ z-index:4; clip-path:inset(0 0 0 77.5%); }
.play .ct__peek-corps{ animation:ct-sort 1000ms var(--sortie) both; animation-delay:calc(var(--t-decal) * 2); }
/* Le corps sort de derrière le panneau : il glisse vers la gauche, depuis l'arrière du mur */
@keyframes ct-sort{ from{ translate:62% 0; } to{ translate:0 0; } }

/* Le panneau du formulaire */
.ct__panneau{ position:relative; z-index:2; display:grid; gap:var(--s-5); align-content:start;
  padding:var(--s-7) var(--edge) var(--s-7); background:var(--bleu); color:var(--blanc); }
.ct__h2{ font:900 clamp(1.8rem,2.4vw + .7rem,2.8rem)/1 var(--ff-title); text-transform:uppercase; letter-spacing:-.01em; color:var(--blanc); }

.ct-form{ display:grid; gap:var(--s-5); }
.ct-champ{ display:grid; gap:6px; }
/* Sur le bleu : textes en blanc (le jaune, trop clair sur bleu pour de petits caractères, reste au bouton et aux repères). */
.ct-champ label{ font:700 var(--t-leg)/1 var(--ff-title); letter-spacing:.16em; text-transform:uppercase; color:var(--blanc); }
.ct-champ input, .ct-champ textarea{ width:100%; padding:.55rem 0 .6rem; border:0; border-bottom:2px solid rgba(255,255,255,.45); border-radius:0;
  background:transparent; color:var(--blanc); font:400 1.0625rem/1.4 var(--ff-title);
  transition:border-color var(--t-survol) var(--sortie); }
.ct-champ textarea{ resize:vertical; min-height:6.5rem; }
.ct-champ ::placeholder{ color:rgba(255,255,255,.62); }
.ct-champ input:hover, .ct-champ textarea:hover{ border-bottom-color:rgba(255,255,255,.8); }
.ct-champ input:focus, .ct-champ textarea:focus{ outline:none; border-bottom-color:var(--jaune); }
.ct-champ input:focus-visible, .ct-champ textarea:focus-visible{ box-shadow:0 2px 0 var(--jaune); }
/* Champ à corriger : trait en pointillés jaunes, le message dit lequel sous le bouton */
.ct-champ [aria-invalid="true"]{ border-bottom-style:dashed; border-bottom-color:var(--jaune); }
.ct-miel{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.ct-envoi{ display:grid; gap:var(--s-3); justify-items:start; margin-top:var(--s-2); }
.ct-envoi .stamp:focus-visible{ outline-color:var(--blanc); }
.ct-etat{ font-size:.9375rem; line-height:1.45; min-height:1.45em; }
.ct-etat[data-ton="ok"]{ color:var(--blanc); font-weight:700; }
.ct-etat a{ color:var(--blanc); font-weight:700; text-underline-offset:3px; }


/* =============== Ordinateur : trois colonnes dans un écran =============== */
@media (min-width:64em){
  .ct{ --panel:clamp(360px,31vw,500px);
    grid-template-columns:minmax(0,1fr) var(--panel) var(--nav-reserve);
    height:calc(100svh - var(--foot-h, 0px)); min-height:560px; }
  .ct__affiche{ grid-column:1; grid-row:1; gap:var(--s-5); padding:var(--s-5) var(--s-6) var(--s-6) var(--edge); }
  .ct__legs{ padding-right:0; }
  /* La photo : ~20 % de la largeur (et au plus 44 % de la hauteur de l'écran), le mur calé sur le bord du panneau */
  .ct{ --pkw:min(20vw, (100svh - var(--foot-h, 0px)) * .44); --mur:calc(100vw - var(--panel) - var(--nav-reserve)); }
  .ct__title{ --tfs:min((var(--mur) - var(--pkw) * .608 - var(--edge) - 32px) / 3.9, 19svh); }
  .ct .ct__lede{ max-width:min(24ch, var(--mur) - var(--pkw) * .608 - var(--edge) - 32px); }
  .ct__mail{ font-size:min(clamp(1.35rem,2.6vw + .3rem,2.75rem), (var(--mur) - var(--pkw) * .608 - var(--edge) - 32px) / 13.4); }
  /* Le panneau bleu file jusqu'au bord droit de l'écran ; son contenu s'arrête avant la colonne de navigation. */
  .ct__panneau{ grid-column:2 / -1; grid-row:1; align-content:center; gap:clamp(1rem,2.6svh,1.75rem);
    padding:clamp(1.5rem,4svh,3rem) var(--nav-reserve) clamp(1.5rem,4svh,3rem) clamp(1.5rem,2.5vw,2.75rem); }
  .ct-form{ gap:clamp(.9rem,2.4svh,1.5rem); }
  .ct-champ textarea{ min-height:clamp(4.5rem,13svh,8rem); }
  /* La photo entière passe devant le panneau, son bord net posé pile sur le bord du panneau (1 px de recouvrement) :
     les mains tiennent le panneau. */
  .ct__peek{ right:calc(var(--pkw) * -.2248 - 1px); }
  .ct__peek-corps{ z-index:4; }
  .ct__peek-mains{ display:none; }
}

/* Pied de page noir, séparé de l'écran par un filet blanc */
.foot{ border-top:1px solid var(--blanc); }

/* =============== Entrées =============== */
/* Téléphone : le panneau bleu se lève comme un rideau ; le corps sort de derrière le bord de l'écran. */
.play .ct__panneau{ animation:ct-rideau var(--t-entree) var(--sortie) both; }
@keyframes ct-rideau{ from{ clip-path:inset(100% 0 0 0); } to{ clip-path:inset(0); } }
/* Ordinateur : la photo tire le panneau depuis la droite de l'écran. Les deux glissent ensemble, de la même
   distance (la largeur du panneau, colonne de navigation comprise), avec la même courbe : ils restent collés. */
/* Au départ, tout est hors de l'écran : le panneau ET la photo (la partie de la photo à gauche du mur fait
   77,5 % de sa largeur, d'où le décalage supplémentaire). Même distance pour les deux : ils restent collés. */
@keyframes ct-tire-panneau{ from{ translate:var(--tire) 0; } to{ translate:0 0; } }
@keyframes ct-tire-photo{ from{ translate:var(--tire) 0; } to{ translate:0 0; } }
@media (min-width:64em){
  .ct{ --tire:calc(100vw - var(--mur) + var(--pkw) * .7752 + 4px); }
  .play .ct__panneau{ animation:ct-tire-panneau 1100ms var(--sortie) both; animation-delay:var(--t-decal); }
  .play .ct__peek{ animation:ct-tire-photo 1100ms var(--sortie) both; animation-delay:var(--t-decal); }
  .play .ct__peek-corps{ animation:none; }
}
@media (prefers-reduced-motion:no-preference){
  .js .ct:not(.play) .ct__panneau{ clip-path:inset(100% 0 0 0); }
  .js .ct:not(.play) .ct__aster{ transform:scale(0); }
  .js .ct:not(.play) .ct__peek-corps{ translate:62% 0; }
}
@media (prefers-reduced-motion:no-preference) and (min-width:64em){
  .js .ct:not(.play) .ct__panneau{ clip-path:none; translate:var(--tire) 0; }
  .js .ct:not(.play) .ct__peek{ translate:var(--tire) 0; }
  .js .ct:not(.play) .ct__peek-corps{ translate:0 0; }
}
@media (prefers-reduced-motion:reduce){
  .play .ct__panneau, .play .ct__aster, .ct__aster svg, .play .ct__peek-corps, .play .ct__peek{ animation:none; }
}