/* =====================================================================
   L'ATELIER — l'anneau (02/10/2026)
   La table des tirages est remplacée par le carrousel 3D (modèle maison,
   VEILLE/modeles/atelier-carrousel-3d, MIT — CREDITS.md dans carrousel-3d/).
   Ce fichier est l'HABILLAGE : il remplit les variables --m-* et --c3d-* du
   modèle avec la palette Encre, et porte les seuls écarts voulus par Enzo.
   Il est chargé APRÈS styles.css et les deux feuilles des modèles.
   Jetons (--abysse, --or, --champagne, --display…) : ceux de styles.css.
   ===================================================================== */

/* ---------------------------------------------------------- la tête ---- */
.atelier-tete{padding-top:clamp(7rem,14vh,10rem);padding-bottom:clamp(1rem,3vw,2.5rem);}
/* Le bas de la tête est court : l'anneau entre dans le premier écran, la
   phrase n'est pas suivie d'un écran vide. */
.atelier-tete h1{font-size:clamp(2.6rem,6vw,4.6rem);max-width:15ch;}
.atelier-tete .chapo{color:rgba(228,230,234,.78);max-width:54ch;margin-top:1.6rem;}

/* L'onglet de la page : le point d'or désigne où l'on est (l'or désigne,
   il ne remplit jamais). */
.nav a[aria-current="page"]{color:var(--ivoire-titre);padding-left:14px;}
.nav a[aria-current="page"]::before{width:5px;opacity:1;}
/* Sous 560 px, styles.css ne cache que les onglets « #… » de l'accueil ; ici
   ils s'écrivent « /#… ». Même règle : on ne garde que l'onglet de la page. */
@media (max-width:560px){
  .nav a[href^="/#"]{display:none;}
}
/* Sous 344 px (mesuré : à 320, l'appel « Entretien » sortait de 23 px à
   droite), l'onglet de la page elle-même cède : on y est déjà. */
@media (max-width:344px){
  .nav a[aria-current="page"]{display:none;}
}

/* ------------------------------------------------------- l'habillage ---- */
.c3d{
  --m-fond:var(--abysse);--m-surface:var(--abysse);
  --m-encre:var(--ivoire-texte);--m-encre-douce:var(--gris);
  --m-titre:var(--ivoire-titre);--m-accent:var(--or);--m-filet:var(--filet-sombre);
  --m-police-titre:var(--display);--m-police-texte:var(--texte);--m-rayon:0px;
  --c3d-marge:var(--marge);
  /* L'en-tête du site est fixe et collé (≈ 72 px sur ordinateur, ≈ 67 sur
     téléphone, mesurés) : la mention du haut se pose SOUS lui, jamais dessous. */
  --c3d-haut:5.4rem;
  --c3d-mention-encre:rgba(233,236,241,.94);
  --c3d-mention-fond:rgba(10,11,13,.9);
  z-index:1;
}

/* ÉTIQUETTES : en Cormorant italique, comme la salle de l'accueil — pas de
   petites capitales espacées (la maison en compte déjà trop). */
.c3d-etiquette{
  font-family:var(--display);font-style:italic;font-weight:500;
  font-size:1.3rem;line-height:1.15;letter-spacing:0;text-transform:none;
  color:var(--ivoire-titre);
}
.c3d-legende .c3d-etiquette{display:inline;margin-right:.45rem;}
.c3d-legende{color:rgba(228,230,234,.86);}
.c3d-format{
  display:inline-block;margin:0;font-size:.72rem;font-weight:600;
  letter-spacing:.06em;color:var(--champagne);
}
.c3d-legende .c3d-format{margin-left:.4rem;}
.c3d-format[hidden]{display:none;}

/* La colonne de gauche : l'étiquette de la pièce de face fait titre,
   sa légende (le texte alternatif, mot pour mot) se lit dessous. */
.c3d-legende-active .c3d-etiquette{font-size:clamp(2rem,2.9vw,2.8rem);line-height:1.05;}
.c3d-legende-active .c3d-quoi{
  margin:.75rem 0 0;max-width:30ch;
  font-family:var(--texte);font-weight:400;font-size:.95rem;line-height:1.55;
  color:rgba(228,230,234,.86);
}
.c3d-legende-active .c3d-format{margin-top:.5rem;}
.c3d-compte{color:var(--gris);}
.c3d-consigne{color:var(--gris);}
.c3d-commandes button,.c3d-fermer{font-family:var(--texte);white-space:nowrap;}

/* LE DOS NE SE MONTRE JAMAIS (Enzo, 02/10) : il se lisait comme un rectangle
   bleu nuit vide, une image manquante. Le modèle peignait une surface au dos ;
   ici, rien. La face est en backface-visibility:hidden (modèle) et le script
   éteint la pièce avant qu'elle soit de chant. */
.c3d[data-c3d-mode="anneau"] .c3d-ouvrir::before{content:none;}

/* LA MENTION — réglée ICI et nulle part ailleurs : couleur + fond, graisse
   600, 12 px, bas de casse (une ligne de capitales espacées de plus, non). */
.c3d-mention{
  font-size:.75rem;font-weight:600;letter-spacing:.02em;text-transform:none;
  line-height:1.35;padding:.38rem .6rem;
}
/* Sans script et en bande : collée au bas de l'écran, au-dessus de la
   barre d'accueil des iPhone. */
.c3d:not([data-c3d-mode="anneau"]) .c3d-colle > .c3d-mention{
  bottom:calc(.75rem + env(safe-area-inset-bottom, 0px));
  margin-bottom:.75rem;
}
@media (min-width:701px){
  .c3d[data-c3d-mode="anneau"][data-c3d-mention="bas"] .c3d-colle > .c3d-mention{bottom:1rem;}
}

/* Sans script : la grille respire sous la tête, sans titre en plus. Le
   retrait du haut n'est PAS décoratif : la mention, collée par le bas, ne peut
   pas monter au-dessus du haut de ce bloc. À 0, sur un écran bas (844×390),
   la première rangée entrait à l'écran ~49 px avant que la mention y tienne.
   ⚠ Ce doit être du CONTENU, pas un retrait : Chromium borne la mention à la
   boîte de CONTENU du bloc (mesuré : un padding de 6,5 rem décalait le trou de
   104 px sans le refermer). D'où une cale en ::before. */
.c3d:not([data-c3d-mode]) .c3d-colle{padding-top:0;}
.c3d:not([data-c3d-mode]) .c3d-colle::before{content:"";display:block;height:7rem;}

/* LE MONTAGE NE MONTRE PAS LA GRILLE. Le <head> pose html.c3d-attente avant le
   premier affichage : tant qu'aucun mode n'est posé, les pièces attendent,
   invisibles, 1,5 s au plus. Passé ce délai (script en 404, bloqué), la grille
   apparaît d'elle-même : le masque est une animation qui FINIT, jamais une
   valeur de repli. Sans JavaScript, la classe n'existe pas : grille d'emblée. */
@keyframes c3d-attente{from,to{visibility:hidden;}}
html.c3d-attente .c3d:not([data-c3d-mode]) .c3d-anneau{animation:c3d-attente 1.5s step-end;}

/* LA MAIN NE TOUCHE QUE LE LIEN. Le cadre de la pièce (li) et l'anneau (ul)
   sont au même plan 3D que le lien : une tape tombait sur eux, et rien ne
   s'ouvrait. Le glisser reste écouté sur la scène. Une pièce éteinte (de dos
   ou presque, posé par le script) ne se touche plus : on ne fait pas tourner
   l'anneau vers une pièce qu'on ne voit pas. */
.c3d[data-c3d-mode="anneau"] .c3d-anneau,
.c3d[data-c3d-mode="anneau"] .c3d-panneau{pointer-events:none;}
.c3d[data-c3d-mode="anneau"] .c3d-ouvrir{pointer-events:auto;}
.c3d[data-c3d-mode="anneau"] .c3d-panneau[data-c3d-eteint] .c3d-ouvrir{pointer-events:none;}

/* L'ENTRÉE, SUR GRAND ÉCRAN : la tête se pose DANS le quart haut-gauche de la
   scène épinglée, au lieu de la précéder. L'anneau est là dès le premier écran,
   et la tête part au défilement pendant qu'il tourne (« faire arriver la suite
   pendant la sortie »). La scène étant collée dès le haut de page, elle n'a
   plus d'entrée : la mention se tient en bas, d'un bout à l'autre.
   Sans :has() (vieux navigateurs), rien de tout ça : la tête précède. */
@supports selector(:has(a)){
  /* Dès 700 px de haut : à 1280×720 et 1366×768 (portables courants), la tête
     posée devant poussait la première image hors du premier écran. Pour tenir,
     la tête se règle sur la HAUTEUR (titre en vh, retrait réduit) et le chapo
     ne dépasse jamais le tiers gauche, là où commencent les pièces de côté
     (mesuré : à 1536×864, le chapo de 54ch mordait la pièce de gauche). */
  /* Seuil à 600 px (05/10) : un écran 1366×768 ne laisse à Chrome qu'une
     fenêtre de ~657 px (onglets, barre d'adresse), 1280×720 ~609, 1280×800
     sous Safari ~689 — sous l'ancien seuil de 700, la tête restait devant et
     le premier écran ne montrait AUCUNE image. */
  @media (min-width:1200px) and (min-height:600px){
    main:has(> .c3d[data-c3d-mode="anneau"]) > .atelier-tete{
      position:absolute;top:0;left:0;right:0;z-index:2;pointer-events:none;
      padding-top:calc(4.5rem + clamp(.75rem, 6vh - 1.75rem, 3.5rem));
    }
    main:has(> .c3d[data-c3d-mode="anneau"]) > .atelier-tete::before{display:none;}
    main:has(> .c3d[data-c3d-mode="anneau"]) > .atelier-tete :is(h1,p){pointer-events:auto;}
    main:has(> .c3d[data-c3d-mode="anneau"]) > .atelier-tete h1{font-size:clamp(2.6rem, min(4.4vw, 6.6vh), 4.6rem);}
    main:has(> .c3d[data-c3d-mode="anneau"]) > .atelier-tete .chapo{
      max-width:calc(32vw - var(--marge) - 1rem);
      font-size:clamp(1rem, min(1.5vw, 2.4vh), 1.25rem);
      margin-top:clamp(.9rem, 2vh, 1.6rem);
    }
    .c3d[data-c3d-mode="anneau"] .c3d-colle > .c3d-mention,
    .c3d[data-c3d-mode="anneau"][data-c3d-mention] .c3d-colle > .c3d-mention{top:auto;bottom:1rem;}
  }
  /* Sous 860 px de haut, la consigne cède sa place : le chapo et la légende
     partagent la colonne de gauche (à 1280×720, le chapo touchait « 1 / 12 »). */
  @media (min-width:1200px) and (min-height:600px) and (max-height:859px){
    main:has(> .c3d[data-c3d-mode="anneau"]) .c3d-consigne{display:none;}
  }
  /* De 600 à 699 px de haut, la tête se resserre encore : à 1280×609, elle
     touchait la légende (« 1 / 12 »). */
  @media (min-width:1200px) and (min-height:600px) and (max-height:699px){
    main:has(> .c3d[data-c3d-mode="anneau"]) > .atelier-tete{padding-top:5rem;}
    main:has(> .c3d[data-c3d-mode="anneau"]) > .atelier-tete h1{font-size:clamp(2.1rem, 5.6vh, 2.6rem);}
    main:has(> .c3d[data-c3d-mode="anneau"]) > .atelier-tete .chapo{font-size:.9375rem;line-height:1.5;margin-top:.7rem;}
  }
}

/* ----------------------------------------------------------- la vue ---- */
.c3d-vue{
  --pc-accent:var(--or);--pc-encre:var(--ivoire-texte);--pc-encre-titre:var(--ivoire-titre);
  --pc-encre-douce:var(--gris);
  --pc-halo:rgba(10,11,13,.62);
  --pc-police-titre:var(--display);--pc-police-texte:var(--texte);
  --pc-graisse-titre:600;--pc-relevement-titre:1.08;
  --pc-duree-trace:.55s;--pc-duree-ouverture:.25s;
  --pc-courbe-trace:cubic-bezier(.16,1,.3,1);--pc-courbe-ouverture:cubic-bezier(.4,0,.2,1);
  --pc-cible:44px;--pc-anneau:20px;--pc-trait:1.5px;
  overflow:auto;overscroll-behavior:contain;
  /* Pas de filet autour de la fenêtre non plus : une carte à liseré, la DA
     n'en veut pas (Enzo l'a retiré de la fiche le 02/10). */
  border:0;
}
.c3d-vue-cadre{position:relative;}
.c3d-vue-media{display:grid;place-items:center;align-content:center;}
.c3d-vue-scene{
  position:relative;
  width:min(100%, calc((100vh - 2rem) * var(--vue-ratio, 1)));
  width:min(100%, calc((100svh - 2rem) * var(--vue-ratio, 1)));
  aspect-ratio:var(--vue-ratio, 1);
}
.c3d-vue-scene .c3d-vue-el{
  position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;
}
/* La mention de la vue suit le défilement de la fenêtre : un support de
   hauteur nulle, collant en haut, tant qu'un morceau du média est là.
   z-index 5 : au-dessus du point (4), de la fiche (3) et du filet (2) — à
   360×640, en défilant la vue, l'anneau d'or passait sur la mention. */
.c3d-vue-colle{position:sticky;top:0;z-index:5;height:0;align-self:start;justify-self:stretch;}
.c3d-vue .c3d-vue-mention{position:absolute;top:.75rem;left:.75rem;margin:0;}
.c3d-vue-titre{font-weight:500;}
.c3d-vue-texte-libre{color:var(--champagne);font-size:.8125rem;font-weight:600;letter-spacing:.04em;}
.c3d-vue-texte [hidden]{display:none;}

/* LES POINTS. Le modèle ne les montre que si le script s'est armé. */
.c3d-vue[data-pc-etat="actif"] .pc-point{display:grid;}
.c3d-vue-points{position:relative;flex:1 0 auto;min-height:13rem;margin-top:.4rem;}
.c3d-vue-points[hidden]{display:none;}
.c3d-vue .pc-liste{display:block;}
.c3d-vue .pc-filet[hidden]{display:none;}
/* La fiche : PAS de cadre à filet (Enzo, 02/10) — du texte sur la nuit,
   l'or seulement pour désigner (l'anneau du point et le filet qui le relie). */
.c3d-vue .pc-fiche{background:none;border:0;padding:0;color:var(--ivoire-texte);}
.c3d-vue .pc-fiche[hidden]{display:none;}
.c3d-vue[data-pc-disposition="droite"] .pc-fiche{position:absolute;left:0;right:0;top:0;}
.c3d-vue .pc-titre{font-size:1.45rem;margin:0 0 .55rem;}
.c3d-vue .pc-texte{font-size:.9375rem;line-height:1.6;color:rgba(228,230,234,.86);}

/* ---------------------------------------------- téléphone, écran bas ---- */
/* La PILE est réservée au téléphone TENU DROIT. Appliquée au téléphone couché
   (667×375, 640×360, 568×320), sa partie fixe (~386 px) dépassait la hauteur :
   largeur des pièces négative, ramenée à 0 — AUCUNE pièce sur toute la course
   (contre-vérification du 05/10). Couché, il passe au régime « écran bas »
   plus bas ; et la largeur a un plancher, quoi qu'il arrive. */
@media (max-width:700px) and (orientation:portrait){
  /* LA SCÈNE EST UNE PILE, de haut en bas : mention, images, légende,
     commandes, puis la réserve de la mention du bas (sortie). Les images
     sont accrochées par le HAUT : quel que soit le format de la pièce de
     face (carré, paysage, portrait), la mention est juste au-dessus d'elle
     et la légende tombe toujours au même endroit, sous le filet d'or.
     La largeur des pièces se déduit de la hauteur d'écran : à 360×640 et
     375×667, la légende passait sur les images. Le jeu restant est partagé
     au-dessus et au-dessous de la pile. Réservé à l'anneau : la bande du
     mouvement réduit garde la largeur du modèle. */
  .c3d[data-c3d-mode="anneau"]{
    --c3d-h:100vh;
    --c3d-haut:4.6rem;     /* sous l'en-tête collant (≈ 67 px mesurés) */
    --c3d-m-h:1.8rem;      /* la mention, sur une ligne */
    --c3d-e1:.5rem;        /* mention → haut des images */
    --c3d-e2:1.6rem;       /* bas des images → légende : le filet d'or passe entre */
    --c3d-bloc:12.75rem;   /* légende la plus haute (film du parfum, 143 px) + commandes, mesurée */
    --c3d-reserve:2.9rem;  /* la mention du bas, à la sortie */
    --c3d-fixe:calc(var(--c3d-haut) + var(--c3d-m-h) + var(--c3d-e1) + var(--c3d-e2) + var(--c3d-bloc) + var(--c3d-reserve));
    --c3d-largeur:max(7.5rem, min(66vw, 17rem, (var(--c3d-h) - var(--c3d-fixe)) / var(--c3d-proportion)));
    --c3d-jeu:max(0px, (var(--c3d-h) - var(--c3d-fixe) - var(--c3d-largeur) * var(--c3d-proportion)) / 2);
    --c3d-haut-images:calc(var(--c3d-haut) + var(--c3d-jeu) + var(--c3d-m-h) + var(--c3d-e1));
    /* L'inclinaison de l'anneau (-2°) fait descendre la pièce de face de
       rayon × sin 2° : on la remonte d'autant. */
    --c3d-centre-y:calc(var(--c3d-haut-images) + var(--c3d-largeur) * var(--c3d-proportion) / 2 - var(--c3d-rayon, 0px) * .0349);
    --c3d-origine-y:var(--c3d-centre-y);
  }
  .atelier-tete{padding-bottom:.5rem;}
  .c3d[data-c3d-mode="anneau"] .c3d-panneau{align-items:flex-start;}
  .c3d[data-c3d-mode="anneau"] .c3d-colle > .c3d-mention{top:calc(var(--c3d-haut) + var(--c3d-jeu));}
  .c3d[data-c3d-mode="anneau"] .c3d-texte{
    top:calc(var(--c3d-haut-images) + var(--c3d-largeur) * var(--c3d-proportion) + var(--c3d-e2));
    bottom:var(--c3d-reserve);
  }
  .c3d[data-c3d-mode="anneau"] .c3d-legende-active{margin-top:0;}
  .c3d[data-c3d-mode="anneau"] .c3d-commandes{margin-top:.9rem;}
  .c3d[data-c3d-mode="anneau"][data-c3d-mention="bas"] .c3d-colle > .c3d-mention{bottom:.75rem;}
}
@media (max-width:700px){
  /* La vue a une hauteur fixe : quand la fiche se ferme, l'image ne bouge
     pas (centrée, la vue raccourcissait et le point sautait sous le doigt). */
  .c3d-vue{height:calc(100vh - 2rem);height:calc(100svh - 2rem);}
  /* Le point ENTOURE le A au lieu de le couvrir : un anneau creux de la taille
     de la cible, sans pastille au centre. L'or désigne, il ne masque pas. */
  .c3d-vue{--pc-anneau:44px;}
  .c3d-vue .pc-anneau::after{display:none;}
  .c3d-legende-active .c3d-etiquette{font-size:1.75rem;}
  .c3d-legende-active .c3d-quoi{font-size:.9rem;max-width:none;}
  .c3d[data-c3d-mode="anneau"] .c3d-legende-active .c3d-etiquette{display:block;}
  .c3d-compte{display:block;margin:0 0 .35rem;}
  .c3d-vue-scene{
    width:min(100%, calc(60vh * var(--vue-ratio, 1)));
    width:min(100%, calc(60svh * var(--vue-ratio, 1)));
  }
  .c3d-vue-media{padding-top:0;}
  /* Fermer passe sur le coin de l'image : jamais au bout d'une fenêtre qui défile. */
  .c3d-fermer{position:absolute;top:.5rem;right:.5rem;z-index:4;background:rgba(10,11,13,.9);}
  .c3d-vue-texte{padding-top:1rem;}
  /* La mention ne passe jamais sous « Fermer » : elle s'arrête avant, quitte
     à tenir sur deux lignes. */
  .c3d-vue .c3d-vue-mention{max-width:calc(100% - 7.5rem);}
  /* La fiche vient JUSTE sous l'image : le filet descend du point à elle sans
     traverser l'étiquette ni la légende. */
  .c3d-vue-points{min-height:0;order:-1;margin:0 0 1.1rem;}
}
@supports (height:1svh){
  @media (max-width:700px) and (orientation:portrait){ .c3d[data-c3d-mode="anneau"]{--c3d-h:100svh;} }
}
/* Sous 360 px, la mention passe sur deux lignes (mesuré à 320). */
@media (max-width:359px){ .c3d[data-c3d-mode="anneau"]{--c3d-m-h:2.85rem;} }
/* Téléphone couché (même sous 701 px de large), petit écran d'ordinateur : la
   colonne se resserre. */
@media (max-height:560px) and (orientation:landscape){
  /* Sous 701 px de large, le modèle prend sa taille de téléphone debout
     (17 rem : 340 px de haut sur un écran de 375) et les pièces de côté
     passaient sous la légende. Couché, la pièce se règle comme sur ordinateur. */
  .c3d{--c3d-haut:5.1rem;--c3d-largeur:clamp(8rem, 21vw, 20rem);}
  .c3d[data-c3d-mode="anneau"] .c3d-texte{top:calc(var(--c3d-haut) + 2.4rem);bottom:3.4rem;}
  .c3d[data-c3d-mode="anneau"] .c3d-consigne{display:none;}
  /* L'anneau recule à droite et la colonne se resserre : à 844×390 la légende
     passait sur les pièces de côté. */
  .c3d{--c3d-centre-x:74%;}
  .c3d[data-c3d-mode="anneau"] .c3d-texte{width:min(22rem,26%);}
  .c3d[data-c3d-mode="anneau"] .c3d-commandes{width:max-content;}
  .c3d-commandes button{padding:.6rem .75rem;}
  .c3d-legende-active .c3d-etiquette{font-size:1.6rem;}
  .c3d-legende-active .c3d-quoi{font-size:.85rem;margin-top:.4rem;}
  .c3d-compte{margin-bottom:.4rem;}
  .c3d[data-c3d-mode="anneau"][data-c3d-mention="bas"] .c3d-colle > .c3d-mention{bottom:.75rem;}
  .c3d-vue-points{min-height:0;}
}