/* ═══════════════════════════════════════════════════════════════════════
   SOCLE ktrium co — le plancher de qualité.
   ═══════════════════════════════════════════════════════════════════════

   CE FICHIER NE CONTIENT AUCUN CHOIX ESTHÉTIQUE.
   Pas une couleur de marque, pas une police d'affichage, pas une mise en
   page. Uniquement ce qui ne doit JAMAIS redescendre, quelle que soit la
   direction artistique du site : l'échelle des textes, les courbes
   d'animation, les zones tactiles, les contrastes, les réglages mobile.

   C'est la réponse à la question d'Adrien du 2026-10-02 :
   « des modèles figés par métier, ou j'invente à chaque fois ? »
   Ni l'un ni l'autre. Le NIVEAU est fixe (ici), la DIRECTION est variable
   (dans la feuille du site). Chaque commerçant a un site différent, aucun
   n'a un site tiède.

   ─── COMMENT ON S'EN SERT ───
   Dans le <head>, DEUX feuilles, dans cet ordre :
       <link rel="stylesheet" href="socle.css">
       <link rel="stylesheet" href="site.css">
   La deuxième redéfinit les jetons ci-dessous et ajoute la mise en page.
   Elle ne doit JAMAIS avoir à corriger le socle : si elle doit le faire,
   c'est le socle qui est à corriger, pour tous les sites.

   ─── LES JETONS QUE LE SITE DOIT DÉFINIR ───
   Sur :root ou sur body. Les valeurs ici sont des secours neutres, pas
   une proposition de design.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* Couleurs — à redéfinir par le site, toujours les six */
  --fond:#FFFFFF;          /* le fond de page */
  --fond-2:#F2F2F0;        /* les surfaces posées dessus (cartes, encarts) */
  --encre:#16181D;         /* le texte principal */
  --encre-2:#5A6069;       /* le texte secondaire, DOIT tenir 4,5:1 sur --fond */
  --filet:rgba(22,24,29,.12);
  --accent:#16181D;        /* le remplissage des boutons principaux */
  --accent-sur:#FFFFFF;    /* le texte POSÉ SUR --accent, DOIT tenir 4,5:1 */

  /* Polices — à redéfinir par le site */
  --texte:system-ui, -apple-system, "Segoe UI", sans-serif;
  --affiche:var(--texte);  /* la police des titres, si elle diffère */

  /* ─── CE QUI SUIT NE SE REDÉFINIT PAS ─────────────────────────────── */

  /* Courbes. Valeurs exactes du skill `animate`, pas des approximations.
     Les courbes natives du navigateur sont trop molles. */
  --sortie:cubic-bezier(.23, 1, .32, 1);        /* entrée et sortie */
  --mouvement:cubic-bezier(.77, 0, .175, 1);    /* déplacement à l'écran */
  --ressort:cubic-bezier(.32, .72, 0, 1);       /* tiroirs, cartes, ressort iOS */
  /* 🔴 `ease-in` est INTERDIT sur de l'interface : il démarre lentement,
     donc il retarde exactement l'instant que l'œil regarde. */

  /* Durées. Au-delà de 300 ms, une interface paraît lourde. */
  --t-appui:140ms;         /* retour au doigt / au clic */
  --t-survol:200ms;        /* survol */
  --t-ui:260ms;            /* menus, bascules */
  --t-vitrine:800ms;       /* révélations de page, vitrine uniquement */
  --cascade:60ms;          /* décalage entre deux éléments d'une série */

  /* Zones tactiles. 46 et pas 44 : mesuré sur le rendu, `min-height:44px`
     ressortait parfois à 43 px (arrondi), et l'outil de contrôle le
     refusait. */
  --tactile:46px;

  /* Rythme vertical */
  --gouttiere:20px;
  --section:clamp(64px, 9vw, 104px);
}

/* ═══ BASES ═══ */
*{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;      /* pas de grossissement en paysage */
  -webkit-tap-highlight-color:transparent;  /* le flash gris au doigt */
  overscroll-behavior:none;           /* pas de « tirer pour rafraîchir » */
  overflow-x:hidden;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--fond);
  color:var(--encre);
  font-family:var(--texte);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%;height:auto}
p,li{text-wrap:pretty}
h1,h2,h3{text-wrap:balance;margin:0}
a,button{touch-action:manipulation}   /* supprime le délai de 300 ms au tap */

/* 🔴 LE PIÈGE DE SPÉCIFICITÉ (incident du 2026-10-02).
   Une règle `a{color:…}` posée sur la page pèse plus lourd qu'un composant
   qui n'a qu'une classe (`.btn`, `.carte`, `.marque`). Résultat ce jour-là :
   le numéro de téléphone dans la pilule blanche en violet sur blanc, à
   2,29:1, donc illisible, plus les titres et les boutons repeints.
   Ici, seuls les liens SANS classe prennent l'accent : les composants
   gardent la leur. Le site ne doit jamais écrire `a{color:…}` tout court.
   Fiche : memoire.py --fiche la-regle-de-couleur-qui-mange-tout-le-site-2026-10-02 */
a:not([class]){color:var(--accent)}

/* Tout lien en ligne dans un paragraphe atteint la zone tactile. */
main p a:not([class]){display:inline-flex;align-items:center;
  min-height:var(--tactile)}

/* ═══ CLAVIER ═══ */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.evite{position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--accent);color:var(--accent-sur);padding:.8rem 1.1rem}
.evite:focus{left:0}

/* ═══ ÉCHELLE DE TEXTE ═══
   Fluide, donc aucune taille ne se fige à une largeur d'écran. Le site
   peut remplacer une taille, jamais l'ensemble. */
.t1{font-family:var(--affiche);font-size:clamp(2.4rem,8.5vw,5rem);
  font-weight:800;line-height:.98;letter-spacing:-.04em}
.t2{font-family:var(--affiche);font-size:clamp(1.8rem,5vw,3rem);
  font-weight:700;line-height:1.06;letter-spacing:-.032em}
.t3{font-family:var(--affiche);font-size:clamp(1.1rem,2.6vw,1.45rem);
  font-weight:700;line-height:1.2;letter-spacing:-.02em}
.chapo{font-size:1.05rem;line-height:1.62;color:var(--encre-2);max-width:52ch}
.menu{font-size:.95rem;line-height:1.6;color:var(--encre-2)}
.fine{font-size:.88rem;line-height:1.6;color:var(--encre-2)}

/* ═══ GRILLE ═══
   🔴 Les largeurs de colonne vivent dans la requête média TOUT EN BAS de ce
   fichier, APRÈS `.c12`. À spécificité égale c'est l'ordre du fichier qui
   tranche : déclarées avant, `.c12` les écrasait et toutes les colonnes
   s'empilaient, y compris sur grand écran. (Incident Chez Étienne.) */
.w{width:100%;max-width:1180px;margin:0 auto;padding:0 var(--gouttiere)}
.g12{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gouttiere)}
.c12{grid-column:span 12}

/* ═══ BOUTONS ═══
   🔴 Le remplissage et le filet sont des couleurs FIXES, jamais
   `currentColor`. Sur L'Eau Vive (2026-09-24), un survol qui changeait la
   couleur du texte emportait le fond et le filet avec lui : le bouton
   disparaissait entièrement. Invisible dans le code, invisible sur une
   capture au repos. Les trois couleurs passent par trois variables. */
.btn{
  --b-fond:var(--accent);
  --b-filet:var(--accent);
  --b-texte:var(--accent-sur);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:52px;padding:0 1.5rem;
  border:1.5px solid var(--b-filet);border-radius:999px;
  background:var(--b-fond);color:var(--b-texte);
  font-family:var(--texte);font-size:.96rem;font-weight:600;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background var(--t-survol) var(--sortie),
             color var(--t-survol) var(--sortie),
             border-color var(--t-survol) var(--sortie),
             transform var(--t-appui) var(--sortie);
}
/* Variante creuse : le site fournit le filet et le texte. */
.btn--creux{--b-fond:transparent; --b-filet:var(--filet); --b-texte:var(--encre)}
/* Le retour au doigt. Marche sur TOUS les appareils, contrairement au survol. */
.btn:active{transform:scale(.975)}

/* La flèche dans son propre cercle, jamais collée au texte. */
.btn__fl{flex:none;width:22px;height:22px;border-radius:999px;
  background:var(--b-texte);opacity:.18;
  transition:transform var(--t-ui) var(--ressort)}

/* ═══ RÉVÉLATION AU DÉFILEMENT ═══
   Hors du fil principal, donc sans à-coup. Sans le support de `view()`
   (Firefox), tout reste simplement VISIBLE : rien ne disparaît jamais.
   🔴 À réserver aux séries (une galerie, une liste). Un fondu sur CHAQUE
   titre et CHAQUE paragraphe est le geste qui fait « page générée ». */
@keyframes socle-monte{
  from{opacity:0;transform:translateY(16px)}
  to  {opacity:1;transform:translateY(0)}
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .rv{animation:socle-monte var(--t-vitrine) var(--sortie) both;
      animation-timeline:view();animation-range:entry 4% cover 22%}
  }
}

/* ═══ LA CONFIRMATION DE COPIE ═══
   Posée par socle.js quand on clique un numéro depuis un ordinateur.
   Sans elle, le bouton d'appel ne fait rien de visible. */
.copie{position:fixed;z-index:400;left:50%;bottom:26px;
  transform:translate(-50%,14px);opacity:0;pointer-events:none;
  background:#141414;color:#fff;font-size:.95rem;font-weight:600;
  padding:.8rem 1.3rem;border-radius:999px;white-space:nowrap;
  box-shadow:0 16px 40px rgba(0,0,0,.34);
  transition:opacity var(--t-ui) var(--sortie),
             transform var(--t-ui) var(--ressort)}
.copie.vu{opacity:1;transform:translate(-50%,0)}

/* ═══ SURVOL ═══
   🔴 TOUT ce qui réagit au survol vit ici, et nulle part ailleurs. Sur un
   écran tactile, un appui déclenche un faux survol qui reste collé au
   doigt. Les deux conditions comptent : `hover` pour la capacité,
   `pointer:fine` pour écarter les stylets et quelques Android menteurs. */
@media (hover: hover) and (pointer: fine){
  .btn:hover{--b-fond:var(--encre); --b-filet:var(--encre); --b-texte:var(--fond)}
  .btn:hover .btn__fl{transform:translate(2px,-2px)}
}
@media (hover: none), (pointer: coarse){
  /* On neutralise ce qui se déclenche au survol, et seulement ça :
     `:active` doit continuer à répondre au doigt. */
  .btn{transform:none}
}

/* ═══ COMMANDES ═══
   Un appui long sur un bouton ne doit pas sélectionner son libellé ni
   ouvrir le menu copier/partager d'iOS. Sur les COMMANDES uniquement :
   le texte de la page doit rester copiable (adresse, horaires, numéro). */
.btn,.commande{user-select:none;-webkit-user-select:none;
  -webkit-touch-callout:none}

/* ═══ MOUVEMENT RÉDUIT ═══
   Moins et plus doux, pas zéro : on garde ce qui aide à comprendre, on
   retire les déplacements. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ═══ GRAND ÉCRAN ═══
   🔴 Doit rester le DERNIER bloc de ce fichier. Voir la note sur la grille. */
@media (min-width: 900px){
  .c2{grid-column:span 2}
  .c3{grid-column:span 3}
  .c4{grid-column:span 4}
  .c5{grid-column:span 5}
  .c6{grid-column:span 6}
  .c7{grid-column:span 7}
  .c8{grid-column:span 8}
  .c9{grid-column:span 9}
}