/* =====================================================================
   HOLA STUDIO · feuille propre au produit.
   Refonte du 29/08/2026 : le site n'a plus de portfolio et ne parle plus
   d'aucun projet nomme. Il se tient donc sur ce que HolaSignal tient
   deja, et qui a ete demande comme reference : une barre haute qui ne
   bouge pas, un hero en deux colonnes ou la droite est DESSINEE et non
   photographiee, des sections qui alternent fond blanc et bande teintee,
   des prix ecrits en clair, et un bloc de contact encre en fin de page.

   ORDRE DE CHARGEMENT, obligatoire :
     1. /vendor/polices.css        Inter et Poppins, chez nous
     2. /estilos/hola-system.css   les jetons de la famille
     3. /marcas/hola-studio.css    la couche bordeaux, et elle seule
     4. /estilos/studio.css        ce fichier

   POURQUOI DES CLASSES SANS PREFIXE ICI. hola-system.css prefixe tout
   en « hs- » : il n'y a donc aucune collision possible, et les noms
   courts de HolaSignal (.barre, .liens, .pack, .etapes) se transposent
   tels quels. C'est voulu : les deux sites doivent pouvoir etre
   compares ligne a ligne.

   LA REGLE DE MARQUE QUI SE PERD SI ON NE L'ECRIT PAS : le bordeaux
   profond (--br-500) se lit comme du noir en petite surface. Tout ce
   qui est petit (puce, filet, anneau, icone) prend --br-400, le clair.
   Et le bordeaux ne signale JAMAIS une erreur : les erreurs sont en
   gris encre, avec un filet epais a gauche.
   ===================================================================== */

:root{
  /* Ce que le socle ne nomme pas et que cette page utilise. */
  --gap-sections:clamp(64px,7vw,112px);
  --sp-20:20px;
  --sp-40:40px;

  /* L'encre du site. Ce n'est pas du noir : c'est un gris tres sombre
     legerement chaud, pour que le bordeaux pose dessus reste du
     bordeaux et ne vire pas au brun. */
  --sombre:#191013;
  --sombre-2:#241A1E;
  --sur-sombre:#C9BEC2;
  --sur-sombre-fort:#FFFFFF;

  --wa:#1EA85A;
}

/* ---------------------------------------------------------------------
   BASE
   ------------------------------------------------------------------ */
html{scroll-behavior:smooth}
::selection{background:var(--br-100);color:var(--encre)}
:focus-visible{outline:2px solid var(--br-400);outline-offset:2px;border-radius:var(--r-xs)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;
    scroll-behavior:auto !important}
}
img{display:block;max-width:100%}
svg{display:block}

/* ---------------------------------------------------------------------
   MISE EN PAGE
   La page occupe l'ecran. Sur un grand moniteur on ne laisse pas deux
   bandes vides de 400 px : la largeur sert a poser les blocs cote a
   cote, pas a border une colonne etroite.
   ------------------------------------------------------------------ */
.page{width:100%;max-width:1440px;margin:0 auto;padding-inline:clamp(20px,4vw,64px)}
.texte{max-width:68ch}
main section{padding-block:var(--gap-sections)}
.bande{background:var(--surface-2);border-block:1px solid var(--trait)}
.pile{display:flex;flex-direction:column;gap:var(--sp-24)}

.label{
  display:inline-block;font-size:var(--t-label);font-weight:var(--w-semi);
  letter-spacing:.08em;text-transform:uppercase;color:var(--br-ink);
}
.lead{font-size:var(--t-lead);line-height:var(--lh-body);color:var(--doux)}
.note{font-size:var(--t-small);color:var(--doux)}
.nota{margin-top:var(--sp-20);font-size:var(--t-small);color:var(--doux);max-width:64ch}
.grad{background:var(--br-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.entete-sec{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-32);flex-wrap:wrap}
.entete-sec .titre{max-width:none;flex:0 1 auto}
.entete-sec h2{font-size:var(--t-h2);max-width:17ch}
.entete-sec h1{font-size:var(--t-h1);max-width:17ch}
.entete-sec .label{margin-bottom:var(--sp-8)}
.entete-sec p{margin-top:var(--sp-12);max-width:54ch}
.entete-sec .titre.ancho{max-width:none}
.entete-sec .titre.ancho h1{max-width:20ch}

/* ---------------------------------------------------------------------
   BOUTONS
   Un seul deplacement de 2 px au survol, jamais deux.
   ------------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-8);
  font-size:14.5px;font-weight:var(--w-semi);line-height:1;
  padding:14px 24px;border-radius:var(--r-md);border:1px solid transparent;
  transition:background var(--d-court) var(--ease-doux),
             border-color var(--d-court) var(--ease-doux),
             transform var(--d-normal) var(--ease),
             box-shadow var(--d-normal) var(--ease);
}
.btn svg{width:17px;height:17px;flex:none}
.btn-1{background:var(--br-500);color:var(--br-sur-fond);box-shadow:0 1px 2px var(--br-ombre)}
.btn-1:hover{background:var(--br-600);transform:translateY(var(--leve));box-shadow:0 8px 20px -8px var(--br-ombre)}
.btn-1:active{transform:translateY(0);box-shadow:0 1px 2px var(--br-ombre)}
.btn-2{background:var(--surface);color:var(--encre);border-color:var(--trait-fort)}
.btn-2:hover{border-color:var(--encre);background:var(--surface-2)}
.btn-3{background:transparent;color:var(--encre-2)}
.btn-3:hover{background:var(--surface-2);color:var(--encre)}
.btn-sm{padding:9px 16px;font-size:13.5px;border-radius:var(--r-sm)}
.btn-clair{background:var(--surface);color:var(--encre)}
.btn-clair:hover{background:var(--n-100);transform:translateY(var(--leve))}
.btn-wa{background:var(--wa);color:#fff}
.btn-wa:hover{background:#188F4C;transform:translateY(var(--leve))}
.rang-btn{display:flex;flex-wrap:wrap;gap:var(--sp-12)}
.rang-btn.separado{margin-top:var(--sp-32)}

/* ---------------------------------------------------------------------
   EN-TETE
   Pas de pilule flottante : une barre, un filet, la meme hauteur que
   sur les autres produits de la famille.
   ------------------------------------------------------------------ */
header{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--fond) 88%,transparent);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--trait);
}
.barre{display:flex;align-items:center;gap:var(--sp-24);height:72px}
.logo{font-family:var(--f-display);font-size:21px;font-weight:var(--w-semi);letter-spacing:-.03em;flex:none}
.logo b{font-weight:var(--w-semi);background:var(--br-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.liens{display:flex;align-items:center;gap:2px;margin-inline:auto}
.liens a{
  font-size:14.5px;font-weight:var(--w-medium);color:var(--doux);
  padding:9px 13px;border-radius:var(--r-sm);
  transition:color var(--d-court) var(--ease-doux),background var(--d-court) var(--ease-doux);
}
.liens a:hover{color:var(--encre);background:var(--surface-2)}
.liens a[aria-current="page"]{color:var(--encre);font-weight:var(--w-semi)}
.outils{display:flex;align-items:center;gap:var(--sp-8);flex:none}

/* Le choix de langue est fait de vrais liens vers de vraies URL, pas de
   boutons JavaScript : c'est comme cela que Google trouve l'autre
   version, et cela marche sans script. */
.langues{display:flex;gap:2px;background:var(--surface-2);border-radius:var(--r-pill);padding:3px}
.langues a{
  display:inline-block;padding:6px 12px;border-radius:var(--r-pill);
  font-size:12.5px;font-weight:var(--w-medium);color:var(--doux);
  transition:background var(--d-court) var(--ease-doux),color var(--d-court) var(--ease-doux);
}
.langues a:hover{color:var(--encre)}
.langues a[aria-current="true"]{background:var(--surface);color:var(--encre);
  font-weight:var(--w-semi);box-shadow:var(--el-1)}

.burger{display:none;width:40px;height:40px;flex:none;flex-direction:column;
  align-items:center;justify-content:center;border:1px solid var(--trait);
  border-radius:var(--r-md);background:var(--surface)}
.burger i{display:block;width:17px;height:1.7px;border-radius:2px;background:var(--encre);
  transition:transform var(--d-normal) var(--ease)}
.burger i+i{margin-top:5px}
.burger[aria-expanded="true"] i:first-child{transform:translateY(3.35px) rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{transform:translateY(-3.35px) rotate(-45deg)}
.tiroir{display:none;border-top:1px solid var(--trait);padding:var(--sp-16) 0 var(--sp-24);background:var(--fond)}
.tiroir.ouvert{display:block}
.tiroir a{display:block;padding:13px 0;font-size:16.5px;font-weight:var(--w-medium);border-bottom:1px solid var(--trait)}
.tiroir a:last-of-type{border-bottom:none}
.tiroir .btn{width:100%;margin-top:var(--sp-16)}

/* 1040 et non 940 : la barre porte cinq liens. Le meme nombre est repete
   dans le script, en (min-width:1041px). */
@media(max-width:1040px){
  .liens{display:none}
  .burger{display:flex}
  .outils{margin-left:auto}
  .barre{height:64px;gap:var(--sp-12)}
}
/* Sur un telephone de 390 px, le logo, la langue, le bouton et la
   hamburguesa ne tiennent pas : le bouton passe dans le tiroir, ou il
   est deja. Rien ne se perd. */
@media(max-width:680px){
  .barre>.outils>.btn{display:none}
  .langues{padding:2px}
  .langues a{padding:6px 9px;font-size:12px}
}

/* Bandeau discret qui propose l'autre langue. Il ne redirige pas : une
   redirection automatique selon la langue du navigateur empeche Google
   d'indexer l'une des deux versions. */
.aviso-idioma{display:none;background:var(--br-wash);border-bottom:1px solid var(--br-100);font-size:var(--t-small)}
.aviso-idioma.visible{display:block}
.aviso-idioma .page{display:flex;align-items:center;gap:var(--sp-12);padding-top:10px;padding-bottom:10px;flex-wrap:wrap}
.aviso-idioma a{font-weight:var(--w-semi);color:var(--br-ink);text-decoration:underline;text-underline-offset:3px}
.aviso-idioma button{margin-left:auto;color:var(--doux);font-size:20px;line-height:1;padding:0 4px}

/* ---------------------------------------------------------------------
   HERO
   Deux colonnes des 1000 px : le texte a gauche, le dessin a droite.
   ------------------------------------------------------------------ */
.hero{
  padding-block:var(--sp-64) var(--sp-80);
  overflow:hidden;
  background:
    radial-gradient(90% 120% at 6% -20%, var(--br-wash) 0%, transparent 60%),
    linear-gradient(180deg,var(--fond-2) 0%,var(--fond) 70%);
  border-bottom:1px solid var(--trait);
}
.hero-grille{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,80px);align-items:center}
@media(max-width:1000px){.hero-grille{grid-template-columns:1fr;gap:var(--sp-48)}}
.hero h1{font-size:var(--t-display);letter-spacing:var(--ls-display);line-height:1.03;max-width:17ch}
.hero .lead{margin-top:var(--sp-24);max-width:50ch}
.hero .rang-btn{margin-top:var(--sp-32)}
.hero-note{margin-top:var(--sp-16);font-size:var(--t-small);color:var(--doux);max-width:52ch}

.marqueur{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-pill);
  padding:7px 16px 7px 8px;font-size:13.5px;color:var(--encre-2);font-weight:var(--w-medium);
  box-shadow:var(--el-1);margin-bottom:var(--sp-24);
}
.marqueur .puce{display:flex;align-items:center;gap:3px;padding:5px 9px;background:var(--br-wash);border-radius:var(--r-pill)}
.marqueur .puce i{display:block;width:3px;height:11px;border-radius:2px;background:var(--br-400)}
.marqueur .puce i:nth-child(2){height:7px;opacity:.55}
.marqueur .puce i:nth-child(3){height:14px}

/* ---------------------------------------------------------------------
   LES PHOTOS
   Posees le 29/08/2026 : le client a demande des photos, le site tenait
   sur des dessins et se lisait triste.

   UNE SEULE REGLE STRUCTURELLE, et tout en depend : chaque <picture> a
   son rapport ecrit en aspect-ratio et son <img> en object-fit:cover.
   Sans ca, une image qui arrive en retard fait sauter la page sous les
   yeux du visiteur, et c'est le defaut le plus visible d'un site charge
   d'images. Les hauteurs sont donc reservees avant que l'octet arrive.
   ------------------------------------------------------------------ */
.foto{display:block;position:relative;overflow:hidden;background:var(--surface-2)}
.foto img{width:100%;height:100%;object-fit:cover}

/* ---------------------------------------------------------------------
   LE HERO
   Deux pieces qui se chevauchent : une 16:9 posee a plat, une 9:16
   devant. Elles disent d'un coup d'oeil ce que le texte met une phrase
   a dire : on ne fait pas que du vertical.
   ------------------------------------------------------------------ */
.scene{position:relative;display:flex;align-items:center;justify-content:center;min-height:420px;padding:8px 0}
.halo{
  position:absolute;inset:-6% -10%;border-radius:50%;
  background:radial-gradient(closest-side,var(--br-wash),transparent 72%);
  z-index:0;
}
.montage{position:relative;z-index:1;width:100%;max-width:520px;padding:0 0 var(--sp-32) var(--sp-24)}
.piece{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.piece .foto{border-radius:inherit}
.piece-16{aspect-ratio:16/9;box-shadow:var(--el-3);border:1px solid var(--trait)}
.piece-16 .foto{aspect-ratio:16/9}
.piece-9{
  position:absolute;left:-6%;bottom:-14%;width:31%;aspect-ratio:9/16;
  border-radius:var(--r-md);border:4px solid #FFFFFF;
  box-shadow:0 18px 40px -14px var(--br-ombre);
}
.piece-9 .foto{aspect-ratio:9/16;border-radius:calc(var(--r-md) - 4px)}

/* Le bouton de lecture et la ligne de sous-titre restent DESSINES par
   dessus la photo : une photo ne dit pas toute seule « video livree ».
   Le bordeaux profond tient ici parce que le disque est une grande
   surface, et c'est le seul endroit du site ou il est seul. */
.lecture{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;background:var(--br-500);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px -6px var(--br-ombre);
}
.lecture svg{width:19px;height:19px;color:#FFFFFF;margin-left:2px}
.sous-titre{position:absolute;left:12%;right:12%;bottom:14%;display:flex;
  flex-direction:column;align-items:center;gap:5px}
.sous-titre i{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.9)}
.sous-titre i:first-child{width:100%}
.sous-titre i:last-child{width:64%;background:rgba(255,255,255,.65)}

.etiqueta-formato{
  position:absolute;left:8px;top:8px;z-index:2;
  padding:4px 9px;border-radius:var(--r-pill);
  background:rgba(25,16,19,.72);color:#FFFFFF;
  font-family:var(--f-display);font-size:11.5px;font-weight:var(--w-semi);
  letter-spacing:.02em;font-variant-numeric:tabular-nums;
}
.piece-9 .etiqueta-formato{left:6px;top:6px;padding:3px 7px;font-size:10.5px}

.pastille{
  position:absolute;z-index:2;
  background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-lg);
  padding:11px 16px;box-shadow:var(--el-3);
  display:flex;align-items:center;gap:11px;
}
.pastille b{display:block;font-size:13.5px;font-weight:var(--w-semi);letter-spacing:-.01em}
.pastille em{display:block;font-style:normal;font-size:12px;color:var(--br-ink);font-weight:var(--w-semi);margin-top:1px}
.pastille-format{right:0;top:9%}
/* A droite et non a gauche depuis le 29/08 : la piece 9:16 debordait par
   le bas a gauche et la pastille lui tombait dessus, cachant la ligne de
   sous-titre. Le coin bas droit, lui, est libre. */
.pastille-plazo{right:1%;bottom:-2%;box-shadow:var(--el-2)}
.jauge{display:flex;align-items:flex-end;gap:2.5px;height:18px;flex:none}
.jauge i{width:4px;border-radius:2px;background:var(--br-400);display:block}
.jauge i:nth-child(1){height:7px}
.jauge i:nth-child(2){height:11px}
.jauge i:nth-child(3){height:18px}
.jauge i:nth-child(4){height:13px}
.rond{width:34px;height:34px;border-radius:50%;background:var(--br-wash);display:flex;
  align-items:center;justify-content:center;flex:none}
.rond svg{width:18px;height:18px;color:var(--br-400)}

@media(max-width:1000px){
  .scene{min-height:0;margin-top:var(--sp-16)}
  .montage{max-width:560px;padding-bottom:var(--sp-40)}
  .pastille-plazo{left:auto;right:2%;bottom:-4%}
}
/* Sur telephone les deux pastilles descendent SOUS le montage et se
   posent cote a cote. Flottantes, elles tombaient sur la piece 9:16 et
   sur la photo : a 390 px il n'y a pas la place de faire flotter quoi
   que ce soit. */
@media(max-width:560px){
  .scene{flex-flow:row wrap;gap:var(--sp-12);align-items:flex-start;justify-content:flex-start}
  .montage{flex:1 0 100%;max-width:none;padding:0 0 var(--sp-40) var(--sp-8)}
  .piece-9{width:29%;left:1%;bottom:-13%}
  .lecture{width:36px;height:36px}
  .lecture svg{width:15px;height:15px}
  .pastille{position:static;padding:9px 13px;box-shadow:var(--el-1)}
}

/* ---------------------------------------------------------------------
   QUE HACEMOS : six cartes, une photo chacune.
   Six et non trois depuis le 29/08 : le site ne parlait que de vertical
   et le client a demande que les autres formats existent a l'ecran, pas
   seulement dans une phrase. Une photo par carte, en 3:2 pour toutes,
   meme la carte verticale : une vignette 9:16 au milieu d'une grille de
   six casse la ligne de base et rend la grille bancale.
   ------------------------------------------------------------------ */
.cartas{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-24);margin-top:var(--sp-48)}
@media(max-width:1100px){.cartas{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cartas{grid-template-columns:1fr}}
.carta{
  background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-card);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform var(--d-normal) var(--ease),box-shadow var(--d-normal) var(--ease),
             border-color var(--d-court) var(--ease-doux);
}
.carta:hover{transform:translateY(var(--leve));box-shadow:var(--el-2);border-color:var(--br-200)}
.foto-carta{aspect-ratio:3/2;border-bottom:1px solid var(--trait)}
.carta-texto{padding:var(--sp-24);display:flex;flex-direction:column;gap:var(--sp-12);flex:1}
.carta h3{font-size:var(--t-h3)}
.carta p{color:var(--doux);font-size:14.5px;line-height:1.55}
.carta .etiq{
  align-self:flex-start;margin-top:auto;padding-top:var(--sp-8);
  font-size:12px;font-weight:var(--w-semi);letter-spacing:.05em;text-transform:uppercase;
  color:var(--br-ink);
}

/* ---------------------------------------------------------------------
   PARA QUIEN : les secteurs, sur fond encre.
   C'est la seule bande sombre en milieu de page, et c'est la regle
   visuelle propre a ce produit : les images se regardent en lumiere
   basse, le reste du site reste clair. Cinq vignettes en 4:5.
   ------------------------------------------------------------------ */
.encre{background:var(--sombre);border-block:1px solid var(--sombre)}
.encre h2,.encre h3{color:#FFFFFF}
.encre .lead{color:var(--sur-sombre)}
.encre .label{color:#E38AA0}
.encre .nota{color:#9E8E94}

.sectores{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-16);margin-top:var(--sp-48)}
@media(max-width:1100px){.sectores{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.sectores{grid-template-columns:repeat(2,1fr);gap:var(--sp-12)}}
.sector{
  position:relative;border-radius:var(--r-card);overflow:hidden;
  background:var(--sombre-2);
  transition:transform var(--d-normal) var(--ease);
}
.sector:hover{transform:translateY(var(--leve))}
.sector .foto{aspect-ratio:4/5}
/* Le voile n'est pas un effet : sans lui le texte blanc tombe sur un
   ciel clair une fois sur deux et devient illisible. */
.sector::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(25,16,19,0) 34%,rgba(25,16,19,.86) 100%);
}
.sector-texto{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:var(--sp-16)}
.sector-texto h3{font-size:16px;color:#FFFFFF;line-height:1.25}
.sector-texto p{margin-top:4px;font-size:13px;line-height:1.45;color:var(--sur-sombre)}

/* ---------------------------------------------------------------------
   LES BANDEAUX ET LES TRIOS DE PHOTOS
   Un bandeau sort de la colonne de texte et va d'un bord a l'autre :
   c'est ce qui fait respirer une page longue. Il n'a pas de legende,
   parce qu'une legende ferait croire a un exemple de travail.
   ------------------------------------------------------------------ */
/* Le bandeau est le DERNIER enfant de sa section et va d'un bord a
   l'autre. La marge negative du bas mange le padding de la section :
   sans elle il reste une bande vide sous la photo, et le bandeau ne
   touche plus la section suivante.
   PAS de max-height ici. Une hauteur maximale posee en meme temps qu'un
   aspect-ratio ne rogne pas la photo : elle retrecit sa LARGEUR, et le
   bandeau s'arrete au milieu de l'ecran. Constate le 29/08. La hauteur
   se regle par le rapport, et le cadrage par object-fit:cover. */
.banda-foto{margin-top:var(--sp-64);margin-bottom:calc(var(--gap-sections) * -1);width:100%}
.banda-foto .foto{aspect-ratio:16/5}
@media(max-width:900px){.banda-foto .foto{aspect-ratio:2/1}}
@media(max-width:560px){.banda-foto .foto{aspect-ratio:3/2}}

/* ---------------------------------------------------------------------
   LA PAIRE AVANT / APRES · 07/09/2026
   Deux photos cote a cote, la meme largeur, la meme hauteur, sans quoi
   la comparaison ne compare rien. Sur telephone elles se posent l'une
   sous l'autre : « avant » d'abord, « apres » ensuite, dans cet ordre,
   parce qu'un lecteur qui fait defiler lit de haut en bas.
   ------------------------------------------------------------------ */
.par-antes{margin-top:var(--sp-48)}
.par-antes h3{font-size:var(--t-h3);margin-bottom:var(--sp-16)}
.par-fotos{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-16)}
@media(max-width:800px){.par-fotos{grid-template-columns:1fr}}
.par-fotos figure{margin:0}
.par-fotos .foto{aspect-ratio:3/2;border-radius:var(--r-card);border:1px solid var(--trait)}
.par-fotos figcaption{margin-top:var(--sp-8);font-size:var(--t-small);color:var(--doux)}
.etiqueta-par{
  display:inline-block;margin-right:6px;padding:2px 8px;border-radius:999px;
  background:#fff;border:1px solid var(--trait);
  font-size:11.5px;font-weight:var(--w-semi);letter-spacing:.06em;color:var(--doux);
}
/* L'ecart entre les deux etiquettes doit se voir A UN METRE. Poses tous
   les deux sur --surface-2, les fonds se ressemblaient a un point de
   gris pres, et la comparaison perdait sa legende. */
.etiqueta-par-ok{background:var(--br-ink);border-color:var(--br-ink);color:#fff}
.par-antes .prosa{margin-top:var(--sp-16)}

.tira-fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-16);margin-top:var(--sp-32)}
@media(max-width:700px){.tira-fotos{grid-template-columns:1fr}}
.tira-fotos .foto{aspect-ratio:4/5;border-radius:var(--r-card);border:1px solid var(--trait)}

/* ---------------------------------------------------------------------
   LES ETAPES, sur fond encre
   ------------------------------------------------------------------ */
.etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-24);margin-top:var(--sp-48)}
.etapes.de-tres{grid-template-columns:repeat(3,1fr)}
@media(max-width:1100px){.etapes,.etapes.de-tres{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.etapes,.etapes.de-tres{grid-template-columns:1fr}}
.etape{
  background:var(--sombre);color:#fff;border-radius:var(--r-xl);
  padding:var(--sp-32);display:flex;flex-direction:column;gap:var(--sp-12);
}
.etape .n{
  width:34px;height:34px;border-radius:var(--r-xs);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:var(--w-semi);font-family:var(--f-display);
  background:rgba(168,50,77,.30);color:#F0B6C4;
}
.etape h3{color:#fff;font-size:var(--t-h3)}
.etape p{color:var(--sur-sombre);font-size:14.5px;line-height:1.55}

/* ---------------------------------------------------------------------
   PRIX
   ------------------------------------------------------------------ */
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-24);margin-top:var(--sp-48);align-items:stretch}
/* Une page qui ne montre que deux offres ne doit pas laisser un tiers de
   colonne vide a droite : la grille suit le nombre de cartes. */
.packs.de-dos{grid-template-columns:repeat(2,1fr)}
@media(max-width:960px){.packs,.packs.de-dos{grid-template-columns:1fr}}
.pack{
  background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-card);
  padding:var(--sp-32);display:flex;flex-direction:column;gap:var(--sp-16);
}
.pack.mis-en-avant{background:var(--sombre);color:#fff;border-color:var(--sombre);box-shadow:var(--el-3)}
.pack.mis-en-avant h3{color:#fff}
.pack.mis-en-avant .coches li{color:var(--sur-sombre)}
.pack.mis-en-avant .coches li::before{background:#E38AA0}
.pack.mis-en-avant .prix{color:#fff}
.pack.mis-en-avant .prix small{color:#9E8E94}
.pack.mis-en-avant .pack-sous{color:var(--sur-sombre)}
.drapeau{
  align-self:flex-start;font-size:11px;font-weight:var(--w-semi);letter-spacing:.08em;
  text-transform:uppercase;padding:5px 12px;border-radius:var(--r-xs);
  background:var(--br-wash);color:var(--br-ink);border:1px solid var(--br-100);
}
.pack.mis-en-avant .drapeau{background:rgba(168,50,77,.32);color:#F0B6C4;border-color:transparent}
.pack h3{font-size:var(--t-h3)}
.pack-sous{font-size:14.5px;color:var(--doux);margin-top:calc(var(--sp-8) * -1)}
.prix{font-family:var(--f-display);font-size:34px;font-weight:var(--w-semi);letter-spacing:-.03em;
  line-height:1;font-variant-numeric:tabular-nums}
.prix small{font-size:13px;font-weight:var(--w-medium);letter-spacing:0;color:var(--doux)}
ul.coches{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
ul.coches li{display:grid;grid-template-columns:14px 1fr;gap:10px;font-size:14.5px;color:var(--doux);line-height:1.5}
ul.coches li::before{content:"";width:7px;height:7px;margin-top:.55em;border-radius:50%;background:var(--br-400)}
.pack .btn{margin-top:auto}

.options{
  margin-top:var(--sp-24);background:var(--surface);border:1px solid var(--trait);
  border-radius:var(--r-card);padding:var(--sp-8) var(--sp-32);
}
.option{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-24);
  padding:16px 0;border-bottom:1px solid var(--trait);font-size:14.5px}
.option:last-child{border-bottom:none}
.option b{font-weight:var(--w-semi);white-space:nowrap;font-variant-numeric:tabular-nums}

/* La fiche de chiffres d'une page interieure. */
.ficha{
  margin:var(--sp-32) 0 0;display:grid;gap:1px;background:var(--trait);
  border:1px solid var(--trait);border-radius:var(--r-card);overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.ficha div{background:var(--surface);padding:var(--sp-16) var(--sp-20)}
.ficha dt{font-size:var(--t-label);font-weight:var(--w-semi);letter-spacing:.06em;
  text-transform:uppercase;color:var(--doux);margin:0}
.ficha dd{margin:4px 0 0;font-family:var(--f-display);font-size:22px;
  font-weight:var(--w-semi);letter-spacing:var(--ls-title);color:var(--encre)}
.ficha dd small{display:block;font-family:var(--f-text);font-size:var(--t-small);
  font-weight:400;letter-spacing:0;color:var(--doux);margin-top:2px}

/* ---------------------------------------------------------------------
   ZONES
   ------------------------------------------------------------------ */
.zones{display:flex;flex-wrap:wrap;gap:var(--sp-8);margin-top:var(--sp-32)}
.zone{
  background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-pill);
  padding:9px 18px;font-size:14px;font-weight:var(--w-medium);color:var(--encre-2);
}

/* ---------------------------------------------------------------------
   QUESTIONS
   ------------------------------------------------------------------ */
.questions{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--sp-48);margin-top:var(--sp-32)}
@media(max-width:900px){.questions{grid-template-columns:1fr}}
details{border-bottom:1px solid var(--trait)}
summary{
  cursor:pointer;list-style:none;padding:20px 0;
  font-size:16.5px;font-weight:var(--w-semi);letter-spacing:-.015em;
  display:flex;justify-content:space-between;align-items:center;gap:var(--sp-24);
  font-family:var(--f-display);
}
summary::-webkit-details-marker{display:none}
summary .plus{position:relative;width:15px;height:15px;flex:none}
summary .plus::before,summary .plus::after{
  content:"";position:absolute;left:0;top:7px;width:15px;height:1.8px;border-radius:2px;
  background:var(--br-400);transition:transform var(--d-normal) var(--ease);
}
summary .plus::after{transform:rotate(90deg)}
details[open] summary .plus::after{transform:rotate(0)}
details .rep{padding:0 0 20px;color:var(--doux);font-size:15px;max-width:56ch}
details .rep a{color:var(--br-ink);font-weight:var(--w-medium);text-decoration:underline;text-underline-offset:2px}

/* ---------------------------------------------------------------------
   CONTACT
   ------------------------------------------------------------------ */
.contacto{
  background:var(--sombre);color:#fff;border-radius:var(--r-xl);
  padding:clamp(32px,5vw,64px);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start;
}
@media(max-width:900px){.contacto{grid-template-columns:1fr}}
.contacto h2{color:#fff;font-size:var(--t-h2)}
.contacto .lead{color:var(--sur-sombre)}
.contacto .rang-btn{margin-top:var(--sp-24)}
.contacto .label{color:#E38AA0}
.datos{margin-top:var(--sp-32);display:flex;flex-direction:column;gap:var(--sp-16)}
.dato{border-top:1px solid rgba(255,255,255,.14);padding-top:var(--sp-16)}
.dato dt{font-size:var(--t-label);font-weight:var(--w-semi);letter-spacing:.06em;
  text-transform:uppercase;color:#9E8E94;margin:0}
.dato dd{margin:6px 0 0;font-size:14.5px;color:#fff;line-height:1.55}

form{display:flex;flex-direction:column;gap:var(--sp-16)}
.champ{display:flex;flex-direction:column;gap:7px}
.champ label{font-size:12.5px;font-weight:var(--w-semi);letter-spacing:.05em;text-transform:uppercase;color:#9E8E94}
.champ input,.champ select,.champ textarea{
  width:100%;padding:13px 16px;border-radius:var(--r-md);
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;
  font:inherit;
  transition:border-color var(--d-court) var(--ease-doux),box-shadow var(--d-court) var(--ease-doux);
}
.champ textarea{resize:vertical;min-height:96px;line-height:1.55}
.champ input::placeholder,.champ textarea::placeholder{color:#7C6C72}
.champ select{appearance:none}
.champ select option{background:var(--sombre);color:#fff}
.champ input:focus-visible,.champ select:focus-visible,.champ textarea:focus-visible{
  outline:none;border-color:#E38AA0;box-shadow:0 0 0 3px rgba(168,50,77,.35)}
form .btn{margin-top:var(--sp-8)}

.accord{display:flex;gap:var(--sp-12);align-items:flex-start;font-size:13px;line-height:1.55;color:var(--sur-sombre)}
.accord input{width:18px;height:18px;flex:none;margin-top:1px;accent-color:var(--br-400)}
.accord label{cursor:pointer}
.accord a{color:#F0B6C4;text-decoration:underline;text-underline-offset:2px}
.accord a:hover{color:#fff}
.leurre{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* L'etat du formulaire. LE BORDEAUX NE SIGNALE JAMAIS UNE ERREUR : sur
   un site bordeaux, un message rouge ne se distingue pas d'un titre.
   Ce qui manque se dit donc en gris clair, avec un filet epais a
   gauche, et c'est le filet qui fait le signal, pas la couleur. */
.etat-form{font-size:13.5px;line-height:1.5;margin-top:var(--sp-8);display:none;padding-left:var(--sp-12)}
.etat-form.visible{display:block}
.etat-form.ok{color:#F0B6C4;border-left:3px solid #A8324D}
.etat-form.ko{color:#DCD4D7;border-left:3px solid var(--n-400)}

/* ---------------------------------------------------------------------
   FIN DE PAGE INTERIEURE
   Sans ce bloc, une page d'offre se termine dans le vide.
   ------------------------------------------------------------------ */
/* Quand le bloc de fin est le seul contenu de sa section, la marge du
   haut s'ajoute au respir de la section et creuse un trou. */
.page>.cierre{margin-top:0}
.cierre{
  margin-top:var(--sp-48);background:var(--br-wash);border:1px solid var(--br-100);
  border-radius:var(--r-xl);padding:clamp(28px,4vw,48px);
}
.cierre h2{font-size:var(--t-h2);max-width:22ch}
.cierre p{margin-top:var(--sp-12);color:var(--encre-2);max-width:60ch}
.cierre .rang-btn{margin-top:var(--sp-24)}

/* Encart teinte, pour une precision qui compte autant que le reste. */
.encart{
  background:var(--br-wash);border:1px solid var(--br-100);border-radius:var(--r-xl);
  padding:clamp(28px,4vw,48px);margin-top:var(--sp-48);
}
.encart h3{font-size:var(--t-h3)}
.encart p{margin-top:var(--sp-12);color:var(--encre-2);max-width:66ch}

/* La precision posee a plat, avec un filet gris a gauche. Gris et non
   bordeaux : voir la regle d'erreur plus haut, c'est la meme. */
.avis{
  margin-top:var(--sp-24);display:flex;gap:var(--sp-16);align-items:flex-start;
  background:var(--surface);border:1px solid var(--trait);border-left:3px solid var(--n-400);
  border-radius:var(--r-md);padding:var(--sp-16) var(--sp-24);max-width:72ch;
}
.avis svg{width:20px;height:20px;color:var(--n-500);flex:none;margin-top:3px}
.avis p{font-size:var(--t-small);line-height:1.6;color:var(--encre-2)}
.avis b{font-weight:var(--w-semi);color:var(--encre)}

/* ---------------------------------------------------------------------
   MIGAS, TEXTE LONG, PIED DE PAGE
   ------------------------------------------------------------------ */
.migas{font-size:var(--t-small);color:var(--doux);padding-top:var(--sp-24)}
.migas ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.migas li{display:flex;align-items:center;gap:6px}
.migas li+li::before{content:"\203A";color:var(--pale)}
.migas a{color:var(--doux);text-decoration:underline;text-underline-offset:3px}
.migas a:hover{color:var(--br-ink)}
.migas [aria-current="page"]{color:var(--encre-2)}
.migas+section{padding-top:var(--sp-32)}

/* Sans cette ligne, le premier h2 du texte long se colle au h1 de
   l'en-tete de section : le titre de page et le premier titre de
   paragraphe se lisent comme un seul bloc. */
.entete-sec+.prosa{margin-top:var(--sp-48)}
.prosa{max-width:72ch}
.prosa h2{font-size:var(--t-h2);margin:var(--sp-48) 0 var(--sp-16)}
.prosa h2:first-child{margin-top:0}
.prosa h3{font-size:var(--t-h3);margin:var(--sp-32) 0 var(--sp-8)}
.prosa p{margin:0 0 var(--sp-16);color:var(--encre-2)}
.prosa ul{margin:0 0 var(--sp-16);padding-left:1.3em;color:var(--encre-2)}
.prosa li{margin-bottom:8px}
.prosa a{color:var(--br-ink);font-weight:var(--w-medium);text-decoration:underline;text-underline-offset:3px}

footer{border-top:1px solid var(--trait);padding-block:var(--sp-48);background:var(--fond)}
.pied{display:flex;justify-content:space-between;gap:var(--sp-32);flex-wrap:wrap;align-items:flex-start}
.pied .logo{display:block;margin-bottom:var(--sp-12)}
.pied .note{max-width:52ch}
.pied nav{display:flex;flex-wrap:wrap;gap:var(--sp-8) var(--sp-16);font-size:var(--t-small)}
.pied nav a{color:var(--encre-2);text-decoration:underline;text-underline-offset:2px}
.pied nav a:hover{color:var(--br-ink)}
.pied-bas{margin-top:var(--sp-32);padding-top:var(--sp-24);border-top:1px solid var(--trait);
  display:flex;justify-content:space-between;gap:var(--sp-16);flex-wrap:wrap;font-size:var(--t-small);color:var(--doux)}
.pied-bas a{color:var(--encre-2);text-decoration:underline;text-underline-offset:2px}
.pied-bas a:hover{color:var(--br-ink)}

/* Le lien d'evitement : invisible tant qu'on ne l'atteint pas au clavier. */
.evitement{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--br-500);color:var(--br-sur-fond);
  padding:12px 20px;border-radius:0 0 var(--r-md) 0;font-weight:var(--w-semi);font-size:14px;
}
.evitement:focus{left:0}

/* Le mot d'explication pour l'installation sur iPhone : Safari ne
   propose jamais l'installation lui-meme, il faut decrire le geste. Un
   bandeau, jamais une alerte de navigateur. */
.toast{
  position:fixed;left:50%;bottom:16px;transform:translate(-50%,150%);
  z-index:200;width:max-content;max-width:min(520px,calc(100vw - 32px));
  display:flex;align-items:flex-start;gap:var(--sp-16);
  background:var(--sombre);color:#fff;border-radius:var(--r-lg);
  padding:14px 16px;box-shadow:var(--el-3);font-size:14px;line-height:1.5;
  transition:transform var(--d-long) var(--ease);
}
.toast.visible{transform:translate(-50%,0)}
.toast button{color:#9E8E94;font-size:19px;line-height:1.2;flex:none;padding:0 2px}
.toast button:hover{color:#fff}

/* Les deux seules classes utilitaires du site. Elles existent pour que
   la page n'ait besoin d'AUCUN attribut style= : c'est ce qui permet a
   la politique de contenu de refuser 'unsafe-inline'. */
.cache{display:none}
.pleine-largeur{width:100%}

/* ---------------------------------------------------------------------
   AJOUTS DU 30/08/2026 : LES PAGES DE SERVICE
   Six pages de service et une page de prix ont besoin de quatre choses
   que le site n'avait pas. Elles sont ecrites dans la meme grammaire
   que le reste : grille de 8, rayons du socle, UN SEUL deplacement de
   2 px au survol, focus a la couleur de la marque.
   ------------------------------------------------------------------ */

/* 1. LES POINTS : « pour qui c'est ». Quatre cartes claires, sans photo
      et sans numero. Les etapes numerotees existent deja et sont
      sombres ; celles-ci sont leur contraire, et c'est voulu : sur une
      page de service les deux sections se suivent, et deux grilles
      identiques a la suite se lisent comme une repetition. */
.puntos{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-24);margin-top:var(--sp-48)}
@media(max-width:1100px){.puntos{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.puntos{grid-template-columns:1fr}}
.punto{
  background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-card);
  padding:var(--sp-24);display:flex;flex-direction:column;gap:var(--sp-8);
}
.punto h3{font-size:var(--t-h3)}
.punto p{color:var(--doux);font-size:14.5px;line-height:1.55}

/* 2. LA CARTE QUI EST UN LIEN : les six services de la portada. La
      carte entiere est cliquable, pas seulement un mot a la fin :
      c'est la cible la plus large possible au doigt. */
a.carta{color:inherit;text-decoration:none}
a.carta:focus-visible{outline:2px solid var(--br-400);outline-offset:3px}
.carta .ir{
  align-self:flex-start;margin-top:auto;padding-top:var(--sp-8);
  font-size:13px;font-weight:var(--w-semi);color:var(--br-500);
  display:inline-flex;align-items:center;gap:6px;
}
.carta .ir::after{content:"\2192"}

/* 3. LES SERVICES VOISINS, en bas de chaque page de service. C'est le
      maillage interne, et il est ecrit comme une phrase utile, pas
      comme une liste de liens : « tu as un restaurant ? la cuisine se
      tourne autrement ». */
.cruces{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-16);margin-top:var(--sp-32)}
@media(max-width:900px){.cruces{grid-template-columns:1fr}}
.cruce{
  display:flex;flex-direction:column;gap:6px;
  background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-card);
  padding:var(--sp-24);color:inherit;text-decoration:none;
  transition:transform var(--d-normal) var(--ease),box-shadow var(--d-normal) var(--ease),
             border-color var(--d-court) var(--ease-doux);
}
.cruce:hover{transform:translateY(var(--leve));box-shadow:var(--el-2);border-color:var(--br-200)}
.cruce:focus-visible{outline:2px solid var(--br-400);outline-offset:3px}
.cruce span{color:var(--doux);font-size:14.5px;line-height:1.55}
.cruce b{
  font-family:var(--f-display);font-weight:var(--w-semi);font-size:16px;color:var(--br-500);
  display:inline-flex;align-items:center;gap:6px;
}
.cruce b::after{content:"\2192"}

/* 4. LE PIED A DEUX COLONNES DE LIENS. Avec six services plus quatre
      pages, une seule rangee de liens devient un mur. */
.pied-liens{display:flex;gap:var(--sp-48);flex-wrap:wrap}
.pied-liens p{
  font-size:12px;font-weight:var(--w-semi);letter-spacing:.06em;text-transform:uppercase;
  color:var(--encre-2);margin-bottom:var(--sp-12);
}
.pied-liens nav{flex-direction:column;gap:var(--sp-8)}