/* ==========================================================================
   JOBUNT — Socle : remise à zéro, typographie, grille, apparitions.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}

body{
  background:var(--page);
  color:var(--ink);
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--blue-wash)}

/* Chiffres tabulaires : prix, quotas, distances, dates — les colonnes
   tiennent, et un 1 ne rétrécit pas la ligne. */
.num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}

/* ------------------------------------------------------------- Grille -- */
.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:var(--section)}
.sec--tight{padding-block:var(--s-9)}

/* --------------------------------------------------------- Typographie -- */
h1,h2,h3,h4{margin:0;font-weight:300;letter-spacing:-.025em}
/* Coupures de ligne (10/10) : sur téléphone, un titre centré finissait sur un
   mot seul (« recherche. »), un chapô sur un « lointaine. » orphelin. Les
   titres équilibrent leurs lignes, les paragraphes évitent le mot isolé.
   Ignoré par les navigateurs qui ne le connaissent pas, sans autre effet. */
h1,h2,h3,.h1,.h2,.h3,.eyebrow{text-wrap:balance}
/* Titres en deux temps, à la manière de l'Apple Store (textes v2, 10/10) :
   l'affirmation à l'encre, la relance en gris dans la même ligne. */
.relance{color:var(--grey)}
/* La seconde phrase ne se coupe pas en son milieu : elle tient sur la ligne
   de l'affirmation, ou passe entière à la ligne suivante. */
.relance,.suite{display:inline-block}
.photo .relance{color:rgba(255,255,255,.66)}
p,li,.lead{text-wrap:pretty}

.display{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);font-weight:300}
.h1{font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:-.03em;font-weight:300}
.h2{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:300}
.h3{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:500;letter-spacing:-.015em}
.h4{font-size:15.5px;font-weight:500;letter-spacing:-.01em;line-height:1.4}

.lead{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--grey);max-width:60ch}
.small{font-size:var(--fs-small);color:var(--grey)}
.micro{font-size:var(--fs-micro);color:var(--grey-2)}
.muted{color:var(--grey)}
.faint{color:var(--grey-2)}

/* Sur-titre : la seule majuscule espacée du système, et le premier endroit
   où le dégradé apparaît. */
.eyebrow{
  display:inline-block;
  font-size:var(--fs-eyebrow);
  font-weight:500;
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--grey-2);
}

/* Le dégradé posé sur du texte. À réserver aux libellés courts : sur une
   phrase entière il devient illisible et la couleur perd son sens. */
.grad{
  background-image:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  display:inline-block;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .grad{color:var(--blue);background-image:none}
}

/* En-tête de section : sur-titre, titre, chapô. Toujours centré — c'est
   ce qui donne son axe à la page. */
.head{max-width:680px;margin:0 auto var(--s-7);text-align:center}
.head .h2{margin-top:var(--s-3)}
.head .lead{margin:var(--s-4) auto 0}

/* ------------------------------------------------------------ Espacements */
.stack-2>*+*{margin-top:var(--s-2)}
.stack-3>*+*{margin-top:var(--s-3)}
.stack-4>*+*{margin-top:var(--s-4)}
.stack-5>*+*{margin-top:var(--s-5)}
.row{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.between{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap}

.grid{display:grid;gap:var(--s-4)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.g3,.g4{grid-template-columns:1fr}}
@media(max-width:700px){.g2{grid-template-columns:1fr}}

hr.rule{border:0;border-top:1px solid var(--line);margin:0}

/* -------------------------------------------------------- Apparitions ---
   Un seul mouvement dans tout le site : monter de 14 px en fondu.
   Le délai se règle par --d sur l'élément. */
[data-reveal]{
  opacity:0;transform:translateY(30px);
  transition:opacity var(--d3) var(--ease) var(--d,0ms),
             transform var(--d3) var(--ease) var(--d,0ms);
}
[data-reveal].in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}


/* ==========================================================================
   TRANSITIONS DE PAGE
   Voie native : l'API View Transitions fait le fondu croisé entre deux
   documents, sans JavaScript et sans page blanche intermédiaire. La règle
   doit figurer dans la feuille des DEUX pages — c'est le cas, elles
   partagent celle-ci.
   ========================================================================== */

@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root){
  animation-duration: 340ms;
  animation-timing-function: cubic-bezier(.32,.72,0,1);
}

/* Repli pour les navigateurs sans View Transitions (voir js/page.js) :
   la page sortante s'efface, l'entrante monte de 8 px en fondu. */
.pt-out{opacity:0;transition:opacity 180ms linear}
.pt-in{animation:ptIn 320ms cubic-bezier(.32,.72,0,1) both}
@keyframes ptIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),::view-transition-new(root){animation-duration:1ms}
  .pt-out,.pt-in{opacity:1 !important;transform:none !important;animation:none !important;
    transition:none !important}
}

/* ================================================ SECTIONS PLEIN ÉCRAN ===
   Chaque section occupe au moins la hauteur de l'écran — celle de l'ordi,
   celle du téléphone.

   `min-height` et non `height` : trois sections dépassent déjà un écran
   (« fonctionnalités » fait près de quatre écrans sur téléphone). Une hauteur
   fixe les couperait ; un minimum les laisse s'étendre.

   `svh` et non `dvh` (10/10, Landry) : `dvh` SUIT la barre d'adresse du
   téléphone, qui se replie et revient au défilement — la section changeait
   de hauteur à chaque fois, et sa photo (`cover`) de taille avec elle.
   `svh` est la hauteur visible barre déployée : fixe, et jamais plus grande
   que l'écran. `100vh` reste en repli pour les navigateurs qui l'ignorent.

   Le contenu est centré verticalement : sans ça, une section courte collerait
   son texte en haut avec un grand vide dessous, ce qui a l'air d'un bug. */
#top > header,
#top > section{
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Le contenu etant centre dans une boite pleine hauteur, la marge verticale
   de `.sec` (176px en haut ET en bas) ne sert plus a aerer : elle ne fait que
   gonfler la hauteur et pousser les sections au-dela d'un ecran. On la ramene
   a une respiration minimale, qui ne joue que si le contenu deborde. */
#top > section.sec{
  padding-block:var(--s-8);
}
@media(max-width:860px){
  #top > section.sec{padding-block:var(--s-7)}
}

/* Les bandes photo ont leur propre marge (`.band{padding-block:var(--section)}`)
   qui echappe a la regle ci-dessus. Meme raisonnement : le contenu y est deja
   centre. */
#top > .band{padding-block:var(--s-8)}
@media(max-width:860px){#top > .band{padding-block:var(--s-7)}}

/* Tablette en portrait (17/10, audit responsive) : l'écran est très haut
   (1024 à 1366 px) pour un contenu de 450 à 800 px — une section pleine
   hauteur y laissait 300 à 900 px de vide. Les sections reprennent la
   hauteur de leur contenu, avec une respiration de section. L'en-tête garde
   sa photo plein écran ; ordinateur, téléphone et tablette couchée ne
   changent pas. */
@media (min-width:700px) and (max-width:1100px) and (orientation:portrait){
  #top > section{min-height:0}
  #top > section.sec,#top > .band{padding-block:var(--s-9)}
  #top > .band.cta{min-height:0}
}

/* La grille des tarifs : deux cartes cote a cote suffisent a depasser l'ecran
   avec les espacements par defaut. On resserre uniquement ici. */
/* Aligner les deux boutons se paie en hauteur : les rangees etant partagees
   (`subgrid`, components.css), chacune prend la taille de la plus grande des
   deux cartes, et la place du paragraphe du semestre est reservee en
   permanence. La section passait de 900 a 990px. On resserre ici, et nulle
   part ailleurs — les valeurs sont calees pour que `#tarifs` retombe pile sur
   un ecran a 1440x900. */
/* Aligner les deux boutons se paie en hauteur : les rangees etant partagees
   (`subgrid`, components.css), chacune prend la taille de la plus grande des
   deux cartes, et la place du paragraphe du semestre est reservee en
   permanence. La grille passe de 455 a 584px. On resserre donc ici — et nulle
   part ailleurs — pour que la section retombe sur un ecran ET que le chapeau
   reste sous la barre de navigation, qui flotte au-dessus des 76 premiers px. */
#tarifs .plans{gap:var(--s-3)}
#tarifs .plan{padding:18px 22px 12px}
/* Une colonne : pas d'écart de grille sous le bouton, le bas reprend le haut. */
@media(max-width:760px){#tarifs .plan{padding-bottom:18px}}
#tarifs .plan ul{margin:10px 0 12px}
#tarifs .plan li{padding:3px 0}
#tarifs .plan__p{margin:14px 0 4px}
#tarifs .head{margin-bottom:var(--s-6)}
#tarifs .plan__note{min-height:0}
#tarifs > p.small{margin-top:var(--s-4)}
/* Rembourrage ASYMETRIQUE : il ne sert pas a aerer (le contenu est centre)
   mais a descendre le bloc de la moitie de ce qu'on pose. Sans ces 64px, le
   sur-titre « Tarifs » tombait a 52px du haut, sous la barre de navigation qui
   flotte jusqu'a 74px : en arrivant par l'ancre, le chapeau etait masque. */
#top > section#tarifs{padding-block:var(--s-8) 0}

/* ------------------------------------------------- Mobile : plein écran ---
   Sur téléphone l'écran n'offre que ~750 px utiles. Les sections nommées par
   Landry doivent y tenir : on resserre les marges internes, les grilles et
   les blocs illustrés, sans toucher aux tailles de texte (la lisibilité sur
   téléphone prime sur l'alignement au pixel). */
@media(max-width:860px){
  /* Le héros n'a plus besoin de 120px : la navbar flotte au-dessus du voile. */
  #top > .hero{padding-block:88px var(--s-6)}

  /* Les chapeaux de section (sur-titre + titre + phrase) */
  #top > section .head{margin-bottom:var(--s-5)}

  /* Grilles empilées : c'est l'espace entre cartes qui coûte le plus cher */
  #top > section .grid,
  #top > section .g2,
  #top > section .g3,
  #top > section .g4{gap:var(--s-4)}

  /* Le panneau de recherche en phrase */
  #recherche .panel{padding:var(--s-5)}

  /* Les bandes photo : le texte est déjà court, c'est la marge qui déborde */
  #top > .band{padding-block:var(--s-6)}

  /* Les cartes empilées sont le vrai poste de dépense : trois cartes de
     ~250px ne tiennent pas dans 750px avec un chapeau au-dessus. On rogne le
     rembourrage, pas la typographie. */
  #top > section .card{padding:18px 18px}
  #top > section .card .symtile{margin-bottom:12px}
  #top > section .head{margin-bottom:var(--s-4)}
  #top > section#tarifs .head{margin-bottom:var(--s-5)}
}

/* ============================================== PAS D'ACCROCHAGE CSS =======
   `scroll-snap` a été essayé puis retiré : ce n'est pas un compteur de gestes
   mais un aimant. Il retient tout geste plus court que la moitié du pas, ce
   qui donnait deux coups de molette pour une fonctionnalité et une sensation
   de blocage à l'entrée comme à la sortie de la section.

   Le pas des fonctionnalités est désormais piloté par `js/main.js`, qui
   compte les GESTES et déplace lui-même la page. Aucune règle
   `scroll-snap-*` ne subsiste : partout ailleurs, le défilement est celui du
   navigateur, sans aimant d'aucune sorte. */

/* ------------------------------------------- Reglage fin des jonctions ----
   Les sections font toutes un ecran et centrent leur contenu : leur hauteur
   ne se regle donc pas au rembourrage, qui ne joue que si le contenu deborde.
   En revanche un rembourrage ASYMETRIQUE deplace le centre — c'est le seul
   levier pour rapprocher deux sections voisines, et il vaut la moitie de
   l'ecart pose (`padding-block: 96px 0` descend le contenu de 48px).

   « Le probleme » remonte : il se colle davantage a « La recherche » qui le
   precede, et laisse plus d'air avant « Comment ca marche ». */
/* (18/10, Landry) Encore un peu plus près de « La recherche ». */
#top > section#probleme{padding-block:0 192px}

/* Les questions sont calees en HAUT de leur ecran, pas centrees : deplier
   une reponse doit pousser ce qui suit vers le bas, pas remonter ce qui
   precede. Le centrage, lui, repartissait la croissance des deux cotes et le
   chapeau sautait vers le haut a chaque clic. Le rembourrage haut reproduit
   la position du bloc une fois tout replie. */
#top > section#faq{justify-content:flex-start;padding-block:180px var(--s-8)}

/* La confidentialite remonte : plus d'air avant les tarifs. */
#top > section.photo--3{padding-block:0 var(--s-9)}

/* L'appel final est une conclusion, pas une section de contenu : il fait la
   moitie d'un ecran. C'est l'intention de `.band.cta` (components.css), que
   la regle plein ecran ci-dessous emportait faute de specificite. */
#top > section.cta{min-height:50vh}

/* ------------------------------------------------- Sections plein écran ---
   Le plein écran reste la règle partout SAUF sur les fonctionnalités : cette
   section-là mesure désormais un écran par fonctionnalité (voir `.featpin`),
   et son contenu est centré par l'étage épinglé, pas par la section. */
#top > section#fonctionnalites{
  min-height:0;
  display:block;
  padding-block:0 var(--s-9);
}
/* (18/10, Landry) De l'air sous la dernière fonctionnalité, avant la bande
   de la confidentialité : le rembourrage bas ci-dessus. */

/* --------------------------------------------- Téléphone : plus d'air ----
   (17/10, Landry) Sur téléphone le contenu dépasse l'écran : le centrage ne
   joue plus et les rembourrages ASYMÉTRIQUES réglés pour l'ordinateur
   (`padding-block:0 …` sur le problème, la confidentialité et les
   fonctionnalités) collaient le sur-titre à 3 px du haut de sa section.
   Chaque section reprend ici la même respiration en haut et en bas, et
   les écarts entre éléments, resserrés pour tenir dans un écran, sont
   rouverts. Téléphone seul (portrait, ou couché) : ordinateur et tablette
   ne changent pas. */
@media (max-width:699px), (orientation:landscape) and (max-height:500px){
  #top > section.sec,
  #top > .band,
  #top > section#probleme,
  #top > section.photo--3,
  #top > section#tarifs,
  #top > section#faq{padding-block:var(--s-8)}
  #top > section#probleme{padding-top:var(--s-7)}
  #top > section#fonctionnalites{padding-block:var(--s-8)}

  /* Chapeaux : sur-titre, titre, phrase, puis le contenu */
  #top .head .h2{margin-top:var(--s-4)}
  #top .head .lead{margin-top:var(--s-5)}
  #top > section .head,
  #top > section#tarifs .head{margin-bottom:var(--s-7)}
  #top .featpin__stage .head{margin-bottom:var(--s-2)}

  /* Cartes et grilles empilées */
  #top > section .grid,
  #top > section .g2,
  #top > section .g3,
  #top > section .g4{gap:var(--s-5)}
  #top > section .card{padding:24px 22px}
  #top > section .card .symtile{margin-bottom:var(--s-4)}

  /* Fonctionnalités : un vrai blanc entre deux blocs */
  #top .featpin__deck > .feat{padding-block:var(--s-7);gap:var(--s-6)}
  #top .feat__t{margin:var(--s-5) 0 var(--s-3)}

  /* Tarifs : les deux cartes et leurs listes */
  #tarifs .plans{gap:var(--s-5)}
  #tarifs .plan{padding:24px 22px}
  #tarifs .plan ul{margin:var(--s-4) 0 var(--s-5)}
  #tarifs .plan li{padding:5px 0}
  #tarifs .plan__p{margin:var(--s-4) 0 6px}
  #tarifs > p.small{margin-top:var(--s-6)}
}