/* =========================================================================
   OURAYA CLOUD · FEUILLE DES GUIDES
   (transfert.ouraya.cloud/alternative-wetransfer,
    ouraya.cloud/alternative-google-drive, ouraya.cloud/cloud-suisse)

   Charte « La lumière » : tout le commun vit dans lumiere.css. Ce fichier
   n'ajoute que les blocs de ces trois pages, sans une couleur en dur, et
   reprend le langage de la page Sécurité : un document qui se lit, des
   sections numérotées, des surfaces mates, aucun dégradé hors de la lumière.
   ========================================================================= */

section{padding-block:clamp(56px,6.5vw,96px)}
h2{font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.12;letter-spacing:-.032em}
.surface,.carte{
  border-radius:var(--r-net);
  box-shadow:inset 0 1px 0 var(--arete-lumiere), inset 1px 0 0 var(--arete-lumiere-faible);
}
/* Deux sections se suivent sur le même fond : un filet plein les sépare,
   sans aplat qui couvrirait le mur de chiffré. */
main > section + section:not(.panneau):not(.appel)::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:var(--trait);
}

/* ================================================================= HERO ==
   Le texte à gauche, l'illustration à droite. Sur un téléphone,
   l'illustration passe entre le titre et le chapô. Le titre éclairé reste
   sans transform, ni lui ni ses ancêtres. */
.guide-hero{padding-block:clamp(48px,9vh,110px) clamp(48px,7vh,90px)}
.guide-hero-corps{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  grid-template-rows:auto auto auto 1fr;
  grid-template-areas:"sur visuel" "titre visuel" "chapo visuel" "actions visuel";
  column-gap:clamp(30px,5vw,72px);
}
.guide-hero-corps > .sur-titre{grid-area:sur}
.guide-hero-corps > .affiche{grid-area:titre}
.guide-hero-corps > .chapo{grid-area:chapo}
.guide-hero-corps > .guide-actions{grid-area:actions}
.guide-hero-visuel{grid-area:visuel;align-self:center}
.guide-hero-visuel img{aspect-ratio:16/10;object-fit:cover}
/* Les cadrages des photos de l'accueil, recadrées au format du hero. */
.cadre-table img{object-position:62% 50%}
.cadre-alveoles img{object-position:50% 58%}
.cadre-papier img{object-position:55% 60%}
.guide-hero .affiche{font-size:clamp(2rem,3.6vw,3.2rem);margin-bottom:clamp(22px,3vw,34px)}
.guide-hero .chapo{max-width:56ch}
.guide-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,3vw,30px)}
@media (max-width:620px){
  .guide-hero-corps{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:none;
    grid-template-areas:"sur" "titre" "visuel" "chapo" "actions";
  }
  .guide-hero .affiche{font-size:clamp(2.1rem,8.4vw,2.8rem)}
  .guide-hero-visuel{margin-bottom:clamp(22px,6vw,30px)}
}
/* La légende d'une image générée : elle ne passe jamais pour une
   photographie d'un lieu réel. */
.visuel-legende{
  position:absolute; right:12px; bottom:10px;
  margin:0; padding:3px 8px;
  background:var(--surface);
  border:1px solid var(--trait-net);
  border-radius:var(--r-net);
  font:400 10.5px/1.3 var(--f-technique);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--texte-doux);
}

/* ======================================================== TEXTE COURANT ==
   Seuls les paragraphes SANS classe sont visés : un sélecteur plus large
   écraserait la couleur du sur-titre et de la mention. */
.texte-courant p:not([class]){color:var(--texte-doux);max-width:64ch}
.texte-courant strong{color:var(--texte);font-weight:600}
.texte-courant h3{margin:clamp(26px,3vw,36px) 0 12px}

/* ================================================================ POINTS ==
   Des cartes égales : ce que fait l'outil, en quelques mots chacun. */
/* Six cartes : trois colonnes, puis deux, puis une, jamais de case vide
   (la grille commune en ferait 4 + 2 sur un grand écran). */
.points{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.points{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.points{grid-template-columns:minmax(0,1fr)}}
.points .carte{display:flex;flex-direction:column}
.points h3{margin:0 0 10px;font-size:1.12rem}
/* Une étiquette n'est jamais attrapée par une règle de paragraphe (CLAUDE.md). */
.points p:where(:not(.etiquette)){margin:0;color:var(--texte-doux);font-size:.97rem;line-height:1.6}
.etiquette{
  margin:0 0 16px;
  font:400 11px/1.3 var(--f-technique);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent);
}

/* ======================================================== GAGNER, PERDRE ==
   Deux colonnes, deux matières : ce que vous gagnez est éclairé et signé
   d'un trait d'accent, ce que vous perdez est creusé dans la page. */
.deux-colonnes{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:clamp(16px,2vw,24px);
}
.colonne{padding:clamp(24px,3vw,36px);position:relative}
.colonne.gagne::before{
  content:""; position:absolute; inset:-1px -1px auto -1px; height:2px;
  background:var(--accent-aplat);
}
.colonne h3{margin:0 0 20px}
.colonne.perd h3{color:var(--texte-doux)}

/* ================================================================ LISTES == */
.mesures{list-style:none;margin:0;padding:0;border-top:1px solid var(--trait)}
.mesures li{
  position:relative;
  padding:15px 0 15px 24px;
  border-bottom:1px solid var(--trait);
  font-size:.97rem; line-height:1.6;
  color:var(--texte-doux);
}
.mesures li:last-child{border-bottom:0}
.mesures li::before{
  content:""; position:absolute; left:0; top:1.5em;
  width:10px; height:1px;
  background:var(--accent);
}
.colonne.perd .mesures li::before{background:var(--trait-net)}
.mesures li strong{color:var(--texte);font-weight:600}

/* ================================================================ ÉTAPES ==
   Un registre, comme le chemin d'un fichier de la page Sécurité. */
.etapes{
  list-style:none; margin:0; padding:0 0 0 clamp(0px,3vw,40px);
  counter-reset:etape;
  position:relative;
}
.etapes::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:1px;
  background:var(--accent-trait);
}
.etapes li{
  counter-increment:etape;
  display:grid;
  grid-template-columns:clamp(56px,7vw,96px) minmax(0,1fr);
  column-gap:clamp(18px,3.4vw,48px);
  padding:clamp(22px,3vw,34px) 0;
  border-bottom:1px solid var(--trait);
}
.etapes li:last-child{border-bottom:0}
.etapes li::before{
  content:counter(etape,decimal-leading-zero);
  grid-row:1 / span 2;
  font-family:var(--f-titre); font-weight:200;
  font-size:clamp(2.2rem,3.6vw,3.2rem); line-height:.8;
  letter-spacing:-.05em;
  color:var(--texte-faible);
  opacity:.55;
  font-variant-numeric:tabular-nums;
}
.etapes h3{margin:0 0 10px}
.etapes p{margin:0;max-width:66ch;color:var(--texte-doux)}
@media (max-width:640px){
  .etapes{padding-left:22px}
  .etapes li{grid-template-columns:1fr;row-gap:10px}
  .etapes li::before{grid-row:auto;font-size:2.4rem}
}

/* ============================================================ COMPARATIF ==
   Un tableau daté et sourcé. Sur téléphone, chaque ligne devient une fiche :
   l'intitulé de colonne passe devant chaque valeur. */
.comparatif{margin-top:clamp(26px,3.4vw,40px)}
.comparatif table{width:100%;border-collapse:collapse;font-size:.93rem;line-height:1.55}
.comparatif caption{
  caption-side:top; text-align:left;
  padding-bottom:14px;
  font:400 11px/1.3 var(--f-technique);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent);
}
.comparatif th,.comparatif td{
  text-align:left; vertical-align:top;
  padding:15px 18px 15px 0;
  border-bottom:1px solid var(--trait);
}
.comparatif thead th{
  font:400 11px/1.3 var(--f-technique);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--texte-faible);
  border-bottom-color:var(--trait-net);
}
.comparatif tbody th{
  font-family:var(--f-titre); font-weight:500; font-size:1rem;
  letter-spacing:-.018em;
  color:var(--texte);
  width:20%;
}
.comparatif td{color:var(--texte-doux)}
.comparatif tr.nous th,.comparatif tr.nous td{color:var(--texte)}
.comparatif tr.nous th{box-shadow:inset 2px 0 0 var(--accent);padding-left:12px}
.sources{margin-top:18px}
.sources a{color:inherit;text-decoration:underline;text-decoration-color:var(--trait-net);text-underline-offset:3px}
.sources a:hover{color:var(--accent)}
@media (max-width:760px){
  .comparatif thead{display:none}
  .comparatif table,.comparatif caption,.comparatif tbody,.comparatif tr,
  .comparatif th,.comparatif td,.comparatif tbody th{display:block;width:auto}
  .comparatif tr{padding:16px 0;border-bottom:1px solid var(--trait)}
  .comparatif tbody th,.comparatif td{border:0;padding:0 0 10px}
  .comparatif tr.nous th{padding-left:12px}
  .comparatif td::before{
    content:attr(data-titre);
    display:block; margin-bottom:2px;
    font:400 10.5px/1.3 var(--f-technique);
    letter-spacing:.12em; text-transform:uppercase;
    color:var(--texte-faible);
  }
}

/* ============================================================== LIMITES ==
   Le bloc soustrait à la lumière : ce que l'outil ne fait pas. */
.limites .tete{margin-bottom:clamp(34px,4vw,54px)}
.limites-grille{
  gap:1px;
  background:var(--panneau-trait);
  border:1px solid var(--panneau-trait);
  grid-template-columns:repeat(auto-fit,minmax(min(258px,100%),1fr));
}
.limites-grille article{background:var(--panneau-fond);padding:clamp(22px,2.6vw,32px)}
.limites-grille h3{margin:0 0 12px;font-size:1.12rem}
.limites-grille p{margin:0;font-size:.95rem;line-height:1.6}

/* ============================================================ QUESTIONS ==
   Une seule réponse ouverte à la fois : <details name>, et le repli de
   lumiere.js pour les navigateurs qui ne le connaissent pas. */
.questions-corps{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(26px,5vw,70px);align-items:start}
.questions-tete{position:sticky;top:110px;margin-bottom:0}
.questions-liste{border-top:1px solid var(--trait)}
@media (max-width:900px){
  .questions-corps{grid-template-columns:1fr}
  .questions-tete{position:static}
}

/* =============================================================== APPEL ==
   La page se referme sur sa source, comme la page Sécurité. */
.appel{overflow:hidden}
.appel h2{margin-bottom:20px}
.appel .chapo{max-width:52ch;margin-bottom:30px}
.appel .guide-actions{justify-content:center}
.appel .mention{margin-top:22px}

/* Les guides voisins, en bas de page. */
.voisins{display:grid;gap:clamp(14px,2vw,20px);grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.voisins a{
  display:block; padding:clamp(20px,2.4vw,28px);
  text-decoration:none; color:var(--texte);
}
.voisins a:hover h3{color:var(--accent)}
.voisins h3{margin:0 0 8px;font-size:1.06rem;transition:color .25s}
.voisins p{margin:0;color:var(--texte-doux);font-size:.94rem;line-height:1.55}

/* La page d'une adresse inconnue (public/404.html) : l'appel seul, au milieu
   de l'écran. */
.introuvable{min-height:calc(100svh - 160px);display:grid;align-content:center}
.introuvable .affiche{font-size:clamp(2rem,4.4vw,3.2rem);margin-bottom:20px}