/* =========================================================================
   OURAYA CLOUD · LA PAGE DES TARIFS (ouraya.cloud/tarifs, audit V1-04)

   Charte « La lumière » : le commun vit dans lumiere.css, les blocs des
   guides (hero, questions, appel, voisins) dans guides.css. Ce fichier
   n'ajoute que la grille des prix, la bascule du profil, la carte
   Découverte et la liste des engagements, sans une couleur en dur : tout
   passe par les jetons, jour et nuit. Aucun dégradé hors de la lumière.

   La grille se lit d'un regard : sur ordinateur, un tableau ; sous 761 px,
   chaque formule tient sur trois lignes (le nom et le prix au mois, les
   fichiers et le prix à l'année, le prix du To et le lien).
   ========================================================================= */

/* Lu par les lecteurs d'écran, invisible à l'œil. */
.sr{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* L'année coupée (ANNUEL_COUPE) ou sans prix : tarifs.js pose .sans-annuel,
   comme vente.js sur l'accueil. */
.sans-annuel [data-annuel]{display:none !important}

/* ================================================================= HERO ==
   Court : la grille doit arriver tôt, surtout sur un téléphone. Le titre
   éclairé reste sans transform, ni lui ni ses ancêtres. */
.tarifs-hero{padding-block:clamp(40px,7vh,88px) clamp(20px,3vh,36px)}
.tarifs-hero .affiche{font-size:clamp(2rem,4.4vw,3.4rem);max-width:22ch;margin-bottom:clamp(18px,2.4vw,26px)}
.tarifs-hero .chapo{max-width:60ch}
main > section.tarifs-formules::before{display:none}
.tarifs-formules{padding-top:clamp(20px,3vw,40px)}

/* ======================================================== TÊTE ET BASCULE */
.formules-tete{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:18px 30px;
  margin-bottom:clamp(20px,2.6vw,30px);
}
.formules-tete h2{margin:0}

.bascule-prix{
  position:relative;
  display:inline-grid; grid-template-columns:1fr 1fr;
  padding:4px;
  background:var(--fond-creux);
  border:1px solid var(--trait);
  border-radius:var(--r-net);
  flex:none;
}
.bascule-prix .curseur{
  position:absolute; top:4px; bottom:4px; left:4px;
  width:calc(50% - 4px);
  background:var(--surface-haute);
  border:1px solid var(--trait-net);
  border-radius:var(--r-net);
  transform:translateX(0);
  transition:transform .45s var(--sortie);
}
.bascule-prix[data-taxe="ht"] .curseur{transform:translateX(100%)}
.bascule-prix button{
  position:relative; z-index:1;
  padding:11px 20px; white-space:nowrap;
  background:none; border:0; cursor:pointer;
  font-family:var(--f-titre); font-weight:500; font-size:.9rem;
  color:var(--texte-faible);
  transition:color .3s var(--sortie);
}
.bascule-prix button span{font-family:var(--f-technique);font-size:10.5px;letter-spacing:.1em;margin-left:5px}
.bascule-prix button.actif{color:var(--texte)}
.bascule-prix button:hover{color:var(--texte-doux)}

/* ============================================================ DÉCOUVERTE ==
   À part du tableau : ni prix au mois ni prix du To, mais la réserve des
   places (conditions générales, 8.2) et leur nombre, lu dans /api/offre. */
.decouverte{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:16px 30px;
  padding:clamp(18px,2.4vw,26px) clamp(18px,2.6vw,30px);
}
.decouverte-texte{flex:1 1 420px;min-width:0}
.decouverte h3{margin:0 0 8px;font-size:1.18rem}
.decouverte-volume{color:var(--accent);font-weight:400;margin-left:6px}
.decouverte-texte p{margin:0 0 8px;max-width:70ch}
.decouverte-texte p:where(:not(.mention)){color:var(--texte-doux);font-size:.97rem;line-height:1.6}
.decouverte-texte b{font-weight:600;color:var(--texte)}
.decouverte-btn{flex:none}

/* Le nombre de places : un voyant, un nombre, trois mots (comme l'accueil).
   Vide sans script ou sans réponse : la ligne ne montre rien. */
.places{
  display:flex; align-items:flex-start; gap:9px;
  min-height:18px; margin:4px 0 0;
  font:400 12px/1.5 var(--f-technique);
  letter-spacing:.04em;
  color:var(--texte-faible);
  font-variant-numeric:tabular-nums;
}
.places:empty{visibility:hidden}
.places::before{
  content:""; flex:none;
  width:6px; height:6px; margin-top:6px; border-radius:50%;
  background:var(--accent-aplat);
}
.places b{font-weight:500;color:var(--texte)}
.places[data-etat="complet"]{color:var(--texte-doux)}
.places[data-etat="complet"]::before{background:var(--trait-net)}

/* ============================================================== LA GRILLE */
.formules-profil{
  margin:clamp(22px,3vw,32px) 0 0;
  font:400 11.5px/1.4 var(--f-technique);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent);
}
.table-prix{margin-top:12px}
.table-prix table{
  width:100%;
  border-collapse:collapse;
  font-variant-numeric:tabular-nums;
}
.table-prix th,.table-prix td{
  text-align:left; vertical-align:baseline;
  padding:15px 16px 15px 0;
  border-bottom:1px solid var(--trait);
}
.table-prix .n{text-align:right}
.table-prix thead th{
  vertical-align:bottom;
  padding-top:0; padding-bottom:12px;
  font:400 11px/1.3 var(--f-technique);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--texte-faible);
  border-bottom-color:var(--trait-net);
}
.table-prix thead th span{letter-spacing:.1em}
.table-prix tbody th{
  font-family:var(--f-titre); font-weight:500; font-size:1.08rem;
  letter-spacing:-.018em;
  color:var(--texte);
  width:22%;
}
.table-prix td{color:var(--texte-doux);font-size:.97rem;line-height:1.5}
.table-prix .f-mois b{
  font-family:var(--f-titre); font-weight:500; font-size:1.14rem;
  letter-spacing:-.02em;
  color:var(--texte);
}
.table-prix .f-volume{color:var(--texte)}
.table-prix .f-choisir{text-align:right;padding-right:0;white-space:nowrap}
.table-prix .f-choisir .lien{font-size:.93rem}
.f-sous{
  display:block; margin-top:2px;
  font:400 11px/1.4 var(--f-technique);
  letter-spacing:.06em;
  color:var(--texte-faible);
}
/* L'unité : écrite dans la tête du tableau sur ordinateur, à côté du
   nombre sur un téléphone (la tête y est masquée). */
.unite{display:none}

@media (max-width:760px){
  .table-prix thead{display:none}
  .table-prix table,.table-prix tbody{display:block}
  /* Trois lignes par formule : le nom, son volume et le prix au mois ; les
     fichiers et le prix à l'année ; le prix du To et le lien. Les colonnes
     « auto » se resserrent jusqu'au mot le plus long avant de déborder (la
     colonne vide du milieu prend le reste) : sous 300 px, un nom ou une
     unité passe à la ligne, rien ne sort de sa case. */
  .table-prix tbody tr{
    display:grid;
    grid-template-columns:auto auto minmax(0,1fr) auto;
    grid-template-areas:
      "nom volume . mois"
      "fichiers fichiers fichiers an"
      "to to to choisir";
    align-items:baseline;
    column-gap:10px; row-gap:3px;
    padding:11px 0 10px;
    border-bottom:1px solid var(--trait);
  }
  .table-prix tbody th,.table-prix tbody td{padding:0;border:0;width:auto;line-height:1.35}
  .table-prix .f-nom{grid-area:nom}
  .table-prix .f-volume{grid-area:volume;text-align:left;color:var(--accent);font-size:.9rem;white-space:nowrap}
  .table-prix .f-mois{grid-area:mois}
  .table-prix .f-fichiers{grid-area:fichiers;text-align:left;font-size:.88rem}
  .table-prix .f-an{grid-area:an;font-size:.88rem}
  .table-prix .f-to{grid-area:to;text-align:left;font-size:.88rem}
  .table-prix .f-choisir{grid-area:choisir}
  .table-prix .f-choisir .lien{font-size:.84rem}
  /* « au-delà de Max » : le lien « Partir de Max » le dit déjà à l'œil ;
     les lecteurs d'écran le gardent. */
  .table-prix .f-sous{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
  .unite{display:inline}
  .f-mois .unite{font-size:.82rem}
}

.formules-pied{margin-top:clamp(18px,2.4vw,26px)}
.formules-pied > .mention{max-width:70ch}
.facturation{margin-top:12px;border-top:1px solid var(--trait)}
.facturation summary{padding:16px 0;font-size:.98rem}
.facturation-texte{padding:0 0 18px}
.facturation-texte p{margin:0 0 12px;max-width:70ch;color:var(--texte-doux);font-size:.93rem;line-height:1.6}
.facturation-texte p:last-child{margin-bottom:0}

/* ======================================================== LES ENGAGEMENTS ==
   Une ligne par engagement : son nom et son article à gauche, la phrase du
   contrat à droite, sa réserve dessous. */
.engagements{list-style:none;margin:0;padding:0;border-top:1px solid var(--trait)}
.engagements li{
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  column-gap:clamp(22px,4vw,60px); row-gap:10px;
  padding:clamp(20px,2.6vw,30px) 0;
  border-bottom:1px solid var(--trait);
}
.engagement-tete h3{margin:0 0 8px;font-size:1.12rem}
.engagement-article{font-size:.9rem}
.engagement-corps p{margin:0;max-width:66ch}
.engagement-texte{color:var(--texte);font-size:1.02rem;line-height:1.62}
.engagement-corps .engagement-reserve{margin-top:10px;color:var(--texte-faible);font-size:.9rem;line-height:1.55}
@media (max-width:760px){
  .engagements li{grid-template-columns:minmax(0,1fr)}
}

/* Sous le doigt (V1-18, lumiere.css) : chaque moitié de la bascule se touche
   sur 44 px, la carte Découverte prend toute la largeur. */
@media (max-width:719px){
  .bascule-prix button{min-height:44px}
}
@media (max-width:660px){
  .formules-tete{flex-direction:column;align-items:stretch}
  .bascule-prix{width:100%}
  .bascule-prix button{padding-inline:10px}
  .decouverte-btn{width:100%}
}
/* Sous 301 px, « Professionnel HT » ne tient plus sur une ligne. */
@media (max-width:300px){
  .bascule-prix button{padding-inline:6px;white-space:normal;line-height:1.25}
}