/* =========================================================================
   OURAYA CLOUD · FEUILLE DE L'ACCÈS POUR LES IA
   (ouraya.cloud/ia, la page pour l'abonné ; ouraya.cloud/ia/reference, la
    page pour les IA)

   Charte « La lumière » : le commun vit dans lumiere.css, les blocs des
   guides (hero, sections numérotées, tableau, panneau, questions, appel,
   voisins) dans guides.css. Ce fichier n'ajoute que ce que ces deux pages
   ont en propre : l'avis de la version, le trajet d'une demande, les
   cartes, les blocs de code, et la mise en page de la référence, dont le
   contenu est généré depuis le code de l'application (applis/bureau/ouraya-ia,
   balises simples : section.ref-section, h2, h3, p, ul, pre.ref-code,
   div.ref-tableau > table, code, strong, a). Aucune couleur en dur, aucun
   dégradé : seule la lumière en a.
   ========================================================================= */

/* ============================================================ L'AVIS ==
   « Disponible depuis la version 0.6.0 » : en tête de page, avant le chapô,
   lisible sans faire défiler. Il dit depuis quand l'accès existe ; sur /ia,
   comment avoir cette version. */
.avis-version{
  margin:0 0 clamp(20px,2.6vw,28px);
  max-width:60ch;
  padding:13px 18px;
  border-left:2px solid var(--accent);
  background:var(--accent-voile);
  border-radius:0 var(--r-net) var(--r-net) 0;
  color:var(--texte);
  font-size:.98rem; line-height:1.55;
}
.avis-version strong{font-weight:600}

/* Le code au fil du texte : la chasse fixe, ramenée à 86 % pour que la
   ligne ne boite pas ; un long chemin se coupe plutôt que de déborder. */
main :not(pre) > code{
  font-family:var(--f-technique); font-size:.86em;
  padding:1px 5px;
  border:1px solid var(--trait);
  border-radius:var(--r-net);
  background:var(--fond-creux);
  color:var(--texte);
  overflow-wrap:anywhere;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

/* LE BLOC DE CODE. Lisible et sélectionnable en entier, jamais tronqué : une
   commande ou un JSON d'une ligne revient à la ligne dans sa boîte (on le
   lit d'un coup d'œil, la copie reste d'un seul tenant) ; le schéma, aligné
   par des espaces, garde ses lignes et défile dans sa boîte. Jamais la page.
   Son étiquette dit ce qu'il est. */
.ref-code{
  position:relative;
  margin:14px 0 20px;
  max-width:100%;
  padding:34px 18px 16px;
  background:var(--fond-creux);
  border:1px solid var(--trait);
  border-radius:var(--r-bloc);
  box-shadow:var(--creux-ombre);
  color:var(--texte);
  font:400 12.5px/1.7 var(--f-technique);
  letter-spacing:0;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  tab-size:2;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.ref-code[data-langue="text"]{white-space:pre;overflow-wrap:normal}
.ref-code code{font:inherit;color:inherit;background:none;border:0;padding:0;white-space:inherit}
.ref-code::before{
  content:attr(data-langue);
  position:absolute; top:11px; left:18px;
  font:400 10px/1 var(--f-technique);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--texte-faible);
}
.ref-code[data-langue="sh"]::before{content:"Terminal"}
.ref-code[data-langue="json"]::before{content:"JSON"}
.ref-code[data-langue="text"]::before{content:"Schéma"}
.ref-code::selection,.ref-code *::selection{background:var(--accent-aplat);color:var(--sur-accent)}


/* ============================================================ LE HERO ==
   Le texte à gauche, le trajet d'une demande à droite. Sur un écran
   étroit, le trajet passe sous les boutons. Le titre éclairé reste sans
   transform, ni lui ni ses ancêtres. */
.ia-hero-corps{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  grid-template-rows:auto auto auto auto 1fr;
  grid-template-areas:"sur trajet" "titre trajet" "avis trajet" "chapo trajet" "actions trajet";
  column-gap:clamp(30px,5vw,72px);
}
.ia-hero-corps > .sur-titre{grid-area:sur}
.ia-hero-corps > .affiche{grid-area:titre}
.ia-hero-corps > .avis-version{grid-area:avis}
.ia-hero-corps > .chapo{grid-area:chapo}
.ia-hero-corps > .guide-actions{grid-area:actions;align-self:start}
.ia-hero-corps > .trajet{grid-area:trajet;align-self:center}
@media (max-width:900px){
  .ia-hero-corps{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:none;
    grid-template-areas:"sur" "titre" "avis" "chapo" "actions" "trajet";
  }
  .ia-hero-corps > .trajet{margin-top:clamp(34px,6vw,48px);max-width:560px}
}
@media (max-width:620px){
  .guide-hero .ia-hero-corps > .affiche{font-size:clamp(2rem,8vw,2.6rem)}
}

/* LE TRAJET D'UNE DEMANDE : quatre maillons reliés par un filet, chacun
   nommé, et le nom de la liaison dans l'intervalle. */
.trajet{margin:0;padding:clamp(20px,2.6vw,30px)}
.trajet-titre{
  margin:0 0 20px;
  font:400 11px/1.3 var(--f-technique);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent);
}
.trajet-liste{list-style:none;margin:0;padding:0}
.maillon{
  position:relative;
  padding:13px 16px 14px;
  background:var(--fond-creux);
  border:1px solid var(--trait);
  border-radius:var(--r-net);
}
.maillon + .maillon{margin-top:42px}
.maillon + .maillon::before{
  content:""; position:absolute;
  left:22px; top:-43px;
  width:1px; height:42px;
  background:var(--accent-trait);
}
.maillon .maillon-liaison{
  position:absolute; left:36px; top:-29px;
  margin:0;
  font:400 10px/1.3 var(--f-technique);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--texte-faible);
  white-space:nowrap;
}
.maillon .maillon-nom{
  margin:0 0 4px;
  font-family:var(--f-titre); font-weight:500; font-size:1rem; line-height:1.35;
  letter-spacing:-.015em;
  color:var(--texte);
}
.maillon .maillon-role{margin:0;font-size:.9rem;line-height:1.5;color:var(--texte-doux)}
/* Le maillon qui tient les clés : un trait d'accent. */
.maillon.maillon-cle{border-color:var(--accent-trait);box-shadow:inset 2px 0 0 var(--accent)}


/* ========================================================== LES CARTES ==
   Quatre cartes, deux par rangée, puis une : jamais de case vide. */
.ia-cartes{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2vw,24px);
  margin-top:clamp(26px,3.4vw,40px);
}
@media (max-width:760px){.ia-cartes{grid-template-columns:minmax(0,1fr)}}
.ia-cartes h3{margin:0 0 10px;font-size:1.12rem}
.ia-cartes p{margin:0;color:var(--texte-doux);font-size:.97rem;line-height:1.6}

/* Claude Desktop et Claude Code, côte à côte. */
.ia-clients{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2vw,24px);
  align-items:start;
}
@media (max-width:900px){.ia-clients{grid-template-columns:minmax(0,1fr)}}
.ia-client h3{margin:0 0 16px;font-size:1.2rem}
.ia-client p{color:var(--texte-doux);font-size:.97rem;line-height:1.6}
.ia-client .ref-code{margin:12px 0 16px}
.ia-pas{list-style:none;margin:0 0 16px;padding:0;counter-reset:pas}
.ia-pas li{
  counter-increment:pas;
  position:relative;
  padding:0 0 14px 36px;
  color:var(--texte-doux); font-size:.97rem; line-height:1.6;
}
.ia-pas li:last-child{padding-bottom:0}
.ia-pas li::before{
  content:counter(pas);
  position:absolute; left:0; top:.12em;
  width:23px; height:23px;
  border:1px solid var(--accent-trait);
  border-radius:var(--r-pastille);
  font:400 11px/21px var(--f-technique);
  text-align:center;
  color:var(--accent);
}

/* Les risques : le panneau soustrait à la lumière, en deux colonnes égales
   (la grille des guides laisserait une case vide entre 780 et 1100 px). */
.ia-risques .limites-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:700px){.ia-risques .limites-grille{grid-template-columns:minmax(0,1fr)}}

/* Un lien au fil d'un chapô. */
.lien-texte{color:var(--texte);text-decoration:underline;text-decoration-color:var(--accent-trait);text-underline-offset:.22em}
.lien-texte:hover{text-decoration-color:var(--accent)}


/* ========================================================= LA RÉFÉRENCE ==
   Un document qui se lit : le sommaire collé à gauche sur un grand écran,
   au-dessus du texte ailleurs. Le contenu est celui du générateur ; rien
   ici ne suppose plus que ses balises simples. */
.ref-hero{padding-block:clamp(48px,9vh,110px) clamp(30px,5vh,56px)}
.ref-hero .affiche{font-size:clamp(2rem,4vw,3.4rem);max-width:24ch;margin-bottom:clamp(22px,3vw,34px)}
.ref-hero .chapo{max-width:62ch}
.ref-hero .ref-textes{margin-top:18px;max-width:62ch}
.ref-hero .ref-textes a{color:inherit}
@media (max-width:620px){.ref-hero .affiche{font-size:clamp(1.9rem,8vw,2.5rem)}}

.ref-cadre{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(28px,4vw,56px);
  padding-block:clamp(10px,2vw,24px) clamp(56px,6.5vw,96px);
}
@media (min-width:1100px){
  .ref-cadre{grid-template-columns:minmax(0,16rem) minmax(0,1fr)}
}

/* Le sommaire. */
.ref-sommaire{
  align-self:start;
  padding:clamp(18px,2.4vw,24px);
  background:var(--fond-creux);
  border:1px solid var(--trait);
  border-radius:var(--r-bloc);
  box-shadow:inset 0 1px 0 var(--arete-lumiere-faible);
}
@media (min-width:1100px){
  .ref-sommaire{
    position:sticky;
    top:calc(var(--barre-compacte) + 24px);
    max-height:calc(100vh - var(--barre-compacte) - 48px);
    overflow:auto;
  }
}
.ref-sommaire-titre{
  margin:0 0 14px;
  font:400 11px/1.3 var(--f-technique);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent);
}
.ref-sommaire ol{list-style:none;margin:0;padding:0}
.ref-sommaire li{margin:0}
.ref-sommaire a{
  display:block;
  padding:5px 0;
  font:400 12.5px/1.4 var(--f-technique);
  color:var(--texte-doux);
  text-decoration:none;
  overflow-wrap:anywhere;
  transition:color .25s;
}
.ref-sommaire a:hover{color:var(--accent)}
.ref-sommaire .ref-sommaire-outils{margin:2px 0 6px;padding-left:12px;border-left:1px solid var(--trait)}
.ref-sommaire .ref-sommaire-outils a{font-size:11.5px;padding:3px 0}
.ref-sommaire code{font:inherit;color:inherit;background:none;border:0;padding:0}
/* Au-dessus du texte : deux colonnes dès qu'il y a la place, les outils en
   trois. Sur un téléphone, les douze outils se trouvent sous « Les outils ». */
@media (max-width:1099px){
  .ref-sommaire-liste{columns:2 15rem;column-gap:32px}
  .ref-sommaire-liste > li{break-inside:avoid}
  .ref-sommaire .ref-sommaire-outils{columns:2 13rem;column-gap:24px}
}
@media (max-width:620px){
  .ref-sommaire .ref-sommaire-outils{display:none}
}

/* Le texte généré. */
.ref-corps{min-width:0;max-width:56rem}
.ref-corps > p:first-child{font-size:1.04rem;line-height:1.65;color:var(--texte-doux);max-width:68ch;margin-bottom:clamp(26px,3vw,36px)}
.ref-corps > p:first-child strong{color:var(--texte)}
.ref-section{
  padding-block:clamp(34px,4vw,54px);
  border-top:1px solid var(--trait);
}
.ref-section h2{
  margin:0 0 18px;
  font-size:clamp(1.55rem,2.6vw,2.1rem);
  line-height:1.14;
  letter-spacing:-.032em;
}
.ref-section h3{margin:30px 0 12px;font-size:1.14rem;line-height:1.35}
.ref-section h2 + h3{margin-top:8px}
/* Chaque outil ouvre un bloc, sous un filet. */
.ref-section h3[id^="ouraya_"]{
  margin-top:40px;
  padding-top:30px;
  border-top:1px solid var(--trait);
  overflow-wrap:anywhere;
}
.ref-section p,.ref-section li{color:var(--texte-doux);font-size:.98rem;line-height:1.65}
.ref-section p{max-width:72ch}
.ref-section strong{color:var(--texte);font-weight:600}
.ref-section ul{list-style:none;margin:0 0 1.1em;padding:0;max-width:72ch}
.ref-section li{position:relative;padding:7px 0 7px 24px}
.ref-section li::before{
  content:""; position:absolute; left:0; top:1.33em;
  width:10px; height:1px;
  background:var(--accent);
}
.ref-section a{color:var(--texte);text-decoration-color:var(--accent-trait);text-underline-offset:.22em}
.ref-section a:hover{text-decoration-color:var(--accent)}

/* LE TABLEAU : il défile dans sa boîte. Ses colonnes gardent une largeur
   lisible : sur un téléphone, on fait glisser le tableau, pas la page. */
.ref-tableau{
  margin:14px 0 22px;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--surface);
  border:1px solid var(--trait);
  border-radius:var(--r-bloc);
}
.ref-tableau table{width:100%;border-collapse:collapse;font-size:.9rem;line-height:1.5}
.ref-tableau table:has(th:nth-child(3)){min-width:34rem}
.ref-tableau table:has(th:nth-child(5)){min-width:44rem}
.ref-tableau th,.ref-tableau td{
  text-align:left; vertical-align:top;
  padding:11px 14px;
  border-bottom:1px solid var(--trait);
}
.ref-tableau thead th{
  font:400 10.5px/1.3 var(--f-technique);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--texte-faible);
  background:var(--fond-creux);
  border-bottom-color:var(--trait-net);
  white-space:nowrap;
}
.ref-tableau tbody tr:last-child td{border-bottom:0}
/* Sur un écran plus étroit que le tableau, une ligne le dit : la colonne
   suivante commence souvent pile au bord de la boîte, rien ne le laisse
   deviner. Les seuils suivent la largeur minimale des tableaux (34 et
   44 rem), les marges de la page et le bord de la boîte. */
@media (max-width:580px){
  .ref-tableau:has(th:nth-child(3))::before{
    content:"Faites glisser le tableau sur le côté";
    display:block;
    padding:10px 14px 0;
    font:400 10px/1.3 var(--f-technique);
    letter-spacing:.12em; text-transform:uppercase;
    color:var(--texte-faible);
  }
}
@media (max-width:752px){
  .ref-tableau:has(th:nth-child(5))::before{
    content:"Faites glisser le tableau sur le côté";
    display:block;
    padding:10px 14px 0;
    font:400 10px/1.3 var(--f-technique);
    letter-spacing:.12em; text-transform:uppercase;
    color:var(--texte-faible);
  }
}
.ref-tableau td{color:var(--texte-doux)}
.ref-tableau td:first-child{color:var(--texte)}
.ref-tableau td:first-child code{white-space:nowrap}
.ref-tableau code{overflow-wrap:normal}

/* Les voisins, sous la référence. */
.ref-voisins{border-top:1px solid var(--trait)}