/* ============================================================================
   OPAQ — pages.css
   ----------------------------------------------------------------------------
   Les pages questions, contact, mentions et 404 (plan §E.3 à §E.6, modifiés
   par R.7 : direction claire). Chargée après jetons.css et base.css, dont
   elle reprend les jetons, les rôles et les composants (.wrap, .reperes,
   .filet, .btn, .actions, .une, .question, .formulaire, .bloc-sombre,
   data-app).
      1. Commun : en-tête, sommaire,     3. Contact
         cadre d'image, listes, fin      4. Mentions
      2. Questions                       5. 404
   Grille : 4 colonnes sous 768 px, 8 jusqu'à 1199, 12 au-delà.
   Règles : seuls transform, opacity et clip-path s'animent ; les couleurs
   changent d'un coup ; tout survol est sous @media (hover:hover) and
   (pointer:fine) ; aucune ombre, aucun flou, aucun dégradé ; jamais de
   texte cuivre sur crème (le cuivre n'y sert qu'en aplat ou en filet).
   ============================================================================ */

/* 1. Commun ------------------------------------------------------------------------- */

/* Un mot à trait d'union (e-mail, puis-je, moi-même, au-delà, États-Unis…)
   ne se coupe jamais en fin de ligne : il passe entier à la ligne suivante.
   Dans un bouton (.btn, en flex, gap 12 px pour le trait final), le libellé
   entier est d'abord enveloppé dans un seul <span> : un .insecable posé
   directement dans le bouton y deviendrait un élément à part, et le gap
   s'ouvrirait entre les deux mots (« Prendre   rendez-vous »). */
.insecable{ white-space:nowrap; }

/* Liens dans le texte : la zone d'appui atteint 46 px de haut, quelle que
   soit la taille du texte (le contenu d'une ligne d'Inter mesure 1,2 em).
   Sur un élément en ligne, le remplissage vertical agrandit la zone sans
   déplacer la ligne, et vaut aussi pour un lien sur deux lignes. L'anneau
   de focus, lui, reste autour des mots : il est porté par le <span> du lien. */
:is(.fin-texte, .formulaire-note, .legal-corps) a{ padding-block:calc(23px - .6em); }
:is(.fin-texte, .formulaire-note, .legal-corps) a:focus-visible{ outline:none; }
:is(.fin-texte, .formulaire-note, .legal-corps) a:focus-visible > span{
  outline:2px solid var(--focus); outline-offset:3px; border-radius:2px;
}

/* En-tête de page : repère, très grand titre (Inter 800, accent en Fraunces
   italique), chapeau. Rien n'y est masqué : lisible à la première image. */
.tete{
  padding-top:calc(var(--nav-h) + clamp(48px, 5vw + 28px, 120px));
  padding-bottom:clamp(64px, 4vw + 48px, 120px);
}
.tete h1{ max-width:12ch; margin-top:var(--e-5); }
.tete-lead{
  max-width:var(--mesure-lead);
  margin-top:var(--e-6);
  font-size:var(--fs-lead); line-height:1.5;
  color:var(--texte-2);
}

/* En-tête avec image (questions, 404). Sous 1200 px, l'image vient sous le
   texte, jamais plus haute que 56 % de l'écran :
   - téléphone (< 600 px) : carrée, sur toute la largeur de la colonne ;
   - de 600 à 1199 px (tablette, téléphone couché) : en 4:3, sur toute la
     largeur de la colonne, comme le titre, les filets et les questions.
     Carrée, elle n'aurait couvert que 573 des 728 px à 768 × 1024 et
     laissé un vide à droite. Le rendu carré (fenetre) est recadré en haut
     et en bas (12,5 % de chaque côté, la pièce n'y est pas). Quand la
     hauteur manque (téléphone couché), le cadre rétrécit et se centre.
   À partir de 1200 px : le texte à gauche (colonnes 1–7), l'image à droite
   (8–12), carrée. Côte à côte sous 1200 px, la pièce n'aurait eu que
   245 px de côté : une vignette, pas la pièce « plus présente » de R.5.
   Carrée et non en 4:5 (plan §E.3) : en 4:5, la pièce flottait dans un
   grand vide crème et le premier écran ne montrait rien de la suite ; au
   carré, elle garde sa taille, et le haut des questions affleure en bas de
   l'écran de 1440 × 900. */
.tete-figure{ margin-top:var(--e-7); margin-inline:auto; width:min(100%, 56svh); }
@media (min-width:600px) and (max-width:1199.98px){
  .tete-figure.cadre{ aspect-ratio:4 / 3; width:min(100%, 56svh * 4 / 3); }
}
@media (min-width:1200px){
  .tete-avec-image{
    display:grid; grid-template-columns:repeat(12, minmax(0, 1fr));
    column-gap:var(--gouttiere); align-items:start;
  }
  .tete-avec-image > .tete-texte{ grid-column:1 / span 7; }
  .tete-avec-image > .tete-figure{ grid-column:8 / -1; width:auto; margin:0; }
}
/* Le titre ne dépasse jamais sa colonne (il remplit les 7 colonnes à 1440). */
.tete-avec-image h1{ max-width:none; }

/* Sommaire en pilules : aller droit à une partie de la page. Le numéro en
   Fraunces italique, comme les numéros des parties. Au survol, un voile se
   déroule (clip-path), comme sur les boutons. */
.sommaire{ display:flex; flex-wrap:wrap; gap:var(--e-2); margin-top:var(--e-6); }
/* Une ligne de 42 px dans un bord de 1 px : 44 px de haut, le numéro et le
   libellé sur la même ligne de base. */
.sommaire a{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-block;
  padding:0 18px;
  border:1px solid var(--bord-controle); border-radius:var(--rayon-pilule);
  font-size:.9375rem; font-weight:500; line-height:42px; color:var(--texte);
  text-decoration:none; white-space:nowrap;
  touch-action:manipulation;
  transition:transform var(--d-appui) var(--sortie);
}
.sommaire a::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--btn-trait-voile);
  clip-path:inset(0 100% 0 0);
  transition:clip-path calc(var(--d-voile) * .6) var(--sortie);
}
.sommaire a:focus-visible::before{ clip-path:inset(0); transition-duration:var(--d-voile); }
@media (hover:hover) and (pointer:fine){
  .sommaire a:hover::before{ clip-path:inset(0); transition-duration:var(--d-voile); }
}
.sommaire a:active{ transform:scale(.98); }
.sommaire-num, .partie-num{
  font-family:var(--serif); font-style:italic; font-weight:400; font-optical-sizing:auto;
  letter-spacing:0; color:var(--texte-2);
  font-variant-numeric:lining-nums;
}
.sommaire-num{ margin-right:.4em; font-size:1.0625rem; }

/* Cadre d'image : coins arrondis, un filet fin qui dessine la fenêtre (le
   rendu est posé sur le crème exact de la page : sans ce filet, l'arrondi ne
   se verrait pas). L'image remplit le cadre (object-fit) et s'y pose
   (data-app="pose" : 103,5 % → 100 %, rognée par le cadre). */
.cadre{
  position:relative;
  aspect-ratio:1;
  border-radius:var(--rayon);
  overflow:hidden; overflow:clip;
  background:var(--creme);
}
.cadre::after{
  content:''; position:absolute; inset:0; z-index:1;
  border:1px solid var(--filet-fort); border-radius:inherit;
  pointer-events:none;
}
.cadre picture, .cadre img{ width:100%; height:100%; }
.cadre img{ object-fit:cover; object-position:50% 50%; }

/* Numéro et titre d'une partie (groupes de questions, volets du contact) :
   le h2 ne porte que ses deux lignes. */
.partie-tete{ font-size:inherit; font-weight:inherit; line-height:inherit; letter-spacing:normal; }
.partie-num{ display:block; font-size:clamp(1.25rem, 1.1rem + .5vw, 1.625rem); line-height:1; }
.partie-titre{
  display:block; margin-top:var(--e-3);
  font-size:clamp(1.875rem, 1.25rem + 2vw, 3.25rem); font-weight:var(--g-h2);
  line-height:.98; letter-spacing:var(--ap-h2);
}

/* Filet du haut d'une partie : posé en premier enfant, il se trace. */
.a-filet{ position:relative; padding-top:var(--e-5); }
.a-filet > .filet:first-child{ position:absolute; inset:0 0 auto 0; }

/* Listes à puces : le point cuivre du logo « opaq. » (un aplat, pas du
   texte), centré sur la première ligne. */
.puces li{ position:relative; margin-top:var(--e-2); padding-left:22px; }
.puces li::before{
  content:''; position:absolute; left:1px; top:calc(.775em - 3.5px);
  width:7px; height:7px; border-radius:50%;
  background:var(--cuivre);
}
:is(.reponse, .legal-corps) strong{ font-weight:600; color:var(--texte); }

/* Fin de page (les quatre pages) : elle ouvre le bloc sombre, que le pied
   de page prolonge sans couture (coins du haut arrondis par base.css). Le
   titre à la taille de la une. */
.fin{ padding-top:var(--section); padding-bottom:var(--e-8); }
.fin-titre{ max-width:11ch; }
.fin-texte{
  max-width:var(--mesure-lead);
  margin-top:var(--e-6);
  font-size:var(--fs-lead); line-height:1.5; color:var(--texte-2);
  --app-delai:150ms;
}
.fin-texte a{ color:var(--texte); }
.fin .actions{ margin-top:var(--e-7); --app-delai:var(--suite); }

/* 2. Questions (faq.html) ---------------------------------------------------------------
   Trois groupes. Sur ordinateur (≥ 1200 px), le titre du groupe reste collé
   en haut de l'écran (colonnes 1–3) pendant qu'on lit ses questions
   (colonnes 5–12) : s'orienter. Accordéon sur filets (base.css), sans
   animation de hauteur. */
.questions{ padding-bottom:var(--section); }
.groupe + .groupe{ margin-top:var(--e-9); }
.groupe-liste{ margin-top:var(--e-5); }
.groupe-liste > .question:first-child > summary{ padding-top:var(--e-4); }
@media (min-width:1200px){
  .groupe{
    display:grid; grid-template-columns:repeat(12, minmax(0, 1fr));
    column-gap:var(--gouttiere); align-items:start;
  }
  .groupe-tete{
    grid-column:1 / span 3;
    position:sticky; top:calc(var(--nav-h) + 24px);
    padding-top:var(--e-4);
  }
  .groupe-liste{ grid-column:5 / -1; margin-top:0; }
}
.reponse p + p, .reponse p + ul, .reponse ul + p{ margin-top:var(--e-4); }
.reponse ul{ margin-top:var(--e-3); }
@media (max-width:767.98px){
  .reponse{ padding-right:0; }
}

/* 3. Contact (contact.html) ------------------------------------------------------------
   Deux volets : « Prendre rendez-vous » (colonnes 1–5) et « Nous écrire »
   (colonnes 7–12) ; empilés sous 1200 px. L'agenda (Cal.com) s'ouvre
   à l'ouverture de la page, dans le volet 01 (contact.js). */
/* À partir de 1200 px : le repère sur toute la largeur ; dessous, le titre
   en colonnes 1–8 et, à sa droite, le chapeau et le sommaire (colonnes
   9–12), dont la première ligne s'aligne sur le haut des capitales du titre. */
@media (min-width:1200px){
  .tete-contact{
    display:grid; grid-template-columns:repeat(12, minmax(0, 1fr));
    column-gap:var(--gouttiere); align-items:start;
  }
  .tete-contact > .tete-titre{ display:contents; }
  .tete-contact .reperes{ grid-column:1 / -1; grid-row:1; }
  .tete-contact h1{ grid-column:1 / span 8; grid-row:2; max-width:none; }
  .tete-contact > .tete-suite{ grid-column:9 / span 4; grid-row:2; margin-top:var(--e-5); padding-top:.45em; }
  .tete-contact .tete-lead{ margin-top:0; }
}

.contact{ display:grid; row-gap:var(--e-9); padding-bottom:var(--section); }
@media (min-width:1200px){
  /* Les deux volets ont la même hauteur : le cadre de l'agenda (volet 01) occupe tout ce que
     le formulaire (volet 02) occupe sous le titre, et les deux commencent et finissent
     ensemble. */
  .contact{ grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:var(--gouttiere); align-items:stretch; }
  .contact > #rendez-vous{ grid-column:1 / span 5; display:flex; flex-direction:column; }
  .contact > #rendez-vous > .volet-corps{ flex:1; display:flex; flex-direction:column; }
  .contact > #ecrire{ grid-column:7 / -1; }
  .contact > .par-courriel{ grid-column:1 / -1; }
  /* Les deux titres tiennent sur une ligne (« Prendre rendez-vous » dans la colonne étroite, dès
     1200 px) : sinon le volet 01 commencerait plus bas que le volet 02. */
  .contact .partie-titre{ font-size:min(clamp(1.875rem, 1.25rem + 2vw, 3.25rem), 3.4vw); }
  /* Le cadre de l'agenda ne fait jamais grandir la page : il remplit la place sous le titre
     (position absolue dans .agenda, d'au moins 640 px) et l'agenda défile à l'intérieur,
     quelle que soit la longueur des créneaux. La hauteur de la ligne vient du formulaire (ou
     de ces 640 px s'ils sont plus hauts) : le champ « message » s'allonge pour le rejoindre. */
  .contact .agenda{ flex:1; position:relative; min-height:640px; }
  .contact .agenda-cadre{ position:absolute; inset:0; height:auto; }
  .contact > #ecrire{ display:flex; flex-direction:column; }
  .contact > #ecrire > .volet-corps{ flex:1; display:flex; flex-direction:column; }
  .contact .formulaire{ flex:1; grid-template-rows:auto auto 1fr auto; }
  .contact .champ-message{ display:flex; flex-direction:column; }
  .contact .champ-message textarea{ flex:1; resize:none; }
}
/* Arrivée sur #rendez-vous ou #ecrire : le décalage sous la barre vient de
   scroll-padding-top (base.css) ; un scroll-margin s'y ajouterait. */
.volet{ min-width:0; }
.volet-texte{ max-width:30em; margin-top:var(--e-5); color:var(--texte-2); }

/* Même écart sous le titre que le formulaire (.volet .formulaire) : les deux commencent à la même
   hauteur. Sans JavaScript, la phrase-lien prend la place de l'agenda ; avec lui, elle disparaît. */
.agenda{ margin-top:var(--e-6); }
.js .agenda-sans-js{ display:none; }
.agenda-sans-js + .agenda{ margin-top:0; }
.js .agenda-sans-js + .agenda{ margin-top:var(--e-6); }
/* Le cadre de l'agenda. Pendant le chargement : une place arrondie, sur le
   crème de la page, sans jamais remplir tout l'écran d'un téléphone.
   Affiché (contact.js, data-etat="affiche") : il s'efface derrière la carte
   de Cal.com (qui a son filet et ses coins), garde sa hauteur et c'est lui qui
   défile (20/10) : l'iframe prend la hauteur exacte du contenu annoncée par
   Cal.com (--agenda-contenu), le cadre la fait défiler, à la molette comme au
   doigt, sans jamais allonger la page (un lundi aux créneaux sans fin compris). */
.agenda-cadre{
  position:relative;
  height:clamp(560px, calc(100svh - var(--nav-h) - 72px), 760px);
  border:1px solid var(--filet-fort); border-radius:var(--rayon);
  overflow:hidden; overflow:clip;
  background:var(--creme);
}
.agenda-cadre[data-etat="affiche"]{
  border:0; border-radius:0; background:none;
  overflow-y:auto; overflow-x:hidden; overscroll-behavior:auto;
  scrollbar-width:thin; scrollbar-color:var(--filet-fort) transparent;
}
.agenda-cadre:focus{ outline:none; }
.agenda-cadre:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }
.agenda-cadre iframe{ display:block; width:100%; height:100%; border:0; }
.agenda-cadre[data-etat="affiche"] iframe{ height:var(--agenda-contenu, 640px); }
/* Le lien de secours, sous les deux volets : l'agenda dans un nouvel onglet. */
.agenda-onglet{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:var(--fs-petit); color:var(--texte);
  text-decoration:underline; text-decoration-color:var(--trait); text-underline-offset:.22em;
}
/* La note (zone annoncée aux lecteurs d'écran) reste toujours dans la page,
   même vide : une zone qui sortirait de display:none au moment où son
   texte arrive ne serait pas toujours annoncée. Vide, elle ne mesure rien. */
.agenda-note{ display:flex; gap:10px; margin-top:var(--e-4); font-size:var(--fs-petit); color:var(--texte); }
.agenda-note::before{ content:''; flex:none; width:2px; background:var(--cuivre); }
.agenda-note:empty{ margin:0; }
.agenda-note:empty::before{ display:none; }

.par-courriel{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--e-4) var(--e-6);
  padding-top:var(--e-5); border-top:1px solid var(--filet);
}
.par-courriel p{ font-size:.9375rem; color:var(--texte-2); }
.par-courriel-lien{
  display:inline-flex; align-items:center; min-height:44px; margin-top:var(--e-1);
  font-size:var(--fs-h3); font-weight:var(--g-h3); letter-spacing:var(--ap-h3);
  color:var(--texte);
  text-decoration:underline; text-decoration-color:var(--trait);
  text-decoration-thickness:1.5px; text-underline-offset:.18em;
}
@media (hover:hover) and (pointer:fine){
  .par-courriel-lien:hover{ text-decoration-thickness:3px; }
}

/* Le formulaire : deux champs par ligne à partir de 600 px de large
   (nom et e-mail, téléphone et formule), le message en pleine largeur. */
.volet .formulaire{ margin-top:var(--e-6); }
@media (min-width:600px){
  .formulaire{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); column-gap:var(--e-4); }
  .formulaire > :not(.champ-moitie){ grid-column:1 / -1; }
}
.formulaire-envoi{ display:grid; gap:var(--e-4); }
.formulaire-envoi .btn{ justify-self:start; }
@media (max-width:767.98px){ .formulaire-envoi .btn{ justify-self:stretch; } }

/* Message envoyé : une carte arrondie, un point cuivre (confirmer une action). */
.envoye{
  margin-top:var(--e-6);
  padding:var(--e-6) var(--e-6) var(--e-6);
  border-radius:var(--rayon);
  background:rgb(255 255 255 / .5);
}
.envoye-titre{
  display:flex; align-items:baseline; gap:14px;
  font-size:var(--fs-h3); font-weight:var(--g-h3); line-height:1.2; letter-spacing:var(--ap-h3);
  color:var(--texte);
}
.envoye-titre::before{
  content:''; flex:none; width:10px; height:10px; border-radius:50%;
  background:var(--cuivre); transform:translateY(-.1em);
}
.envoye-titre + p{ margin-top:var(--e-2); padding-left:24px; color:var(--texte-2); }

/* 4. Mentions (mentions.html) ------------------------------------------------------------
   Une partie par rubrique : le titre à gauche, le texte à droite (à partir
   de 768 px), un filet qui se trace au-dessus de chaque rubrique (montrer la
   précision). */
.legal{ padding-bottom:var(--section); }
.legal-bloc{ padding-bottom:var(--e-8); }
.legal-bloc h2{
  font-size:var(--fs-h3); font-weight:var(--g-h3);
  line-height:var(--il-h3); letter-spacing:var(--ap-h3);
}
.legal-corps{ max-width:var(--mesure-corps); margin-top:var(--e-4); color:var(--texte-2); }
.legal-corps p + p, .legal-corps p + ul, .legal-corps ul + p{ margin-top:var(--e-3); }
.legal-corps a{ color:var(--texte); }
@media (min-width:768px){
  .legal-bloc{
    display:grid; grid-template-columns:repeat(var(--colonnes), minmax(0, 1fr));
    column-gap:var(--gouttiere);
  }
  .legal-bloc h2{ grid-column:1 / span 3; }
  .legal-corps{ grid-column:4 / -1; margin-top:0; }
}
@media (min-width:1200px){
  .legal-bloc h2{ grid-column:1 / span 4; }
  .legal-corps{ grid-column:5 / span 7; }
}
/* Ce qui reste à renseigner se voit : un aplat cuivre clair sous l'encre (11:1). */
.a-renseigner{
  padding:.05em .3em; border-radius:6px;
  background:rgb(200 153 104 / .35); color:var(--texte);
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.legal-maj{ padding-top:var(--e-5); border-top:1px solid var(--filet); font-size:var(--fs-petit); color:var(--texte-3); }
@media (min-width:1200px){
  .legal-maj{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:var(--gouttiere); }
  .legal-maj > span{ grid-column:5 / span 7; }
}

/* 5. 404 (404.html) --------------------------------------------------------------------
   Trois pilules pour repartir (≥ 48 px) ; l'image de la pièce à qui il
   manque un élément, à droite sur ordinateur, sous les liens sur téléphone.
   Toutes les adresses de la page sont absolues : elle est servie à
   n'importe quelle adresse. */
.introuvable .tete{ padding-bottom:var(--section); }
.reprendre{ display:flex; flex-wrap:wrap; gap:12px; margin-top:var(--e-7); }
.reprendre .btn{ min-height:56px; }
.reprendre li:nth-child(2){ --app-delai:60ms; }
.reprendre li:nth-child(3){ --app-delai:120ms; }
@media (max-width:767.98px){
  .reprendre{ flex-direction:column; align-items:stretch; }
  .reprendre .btn{ width:100%; min-height:52px; }
}