/* ==========================================================================
   Siamnity — feuille de style principale
   Palette logo : rouge #E53532 · bleu #073672 · crème #FAF6F1
   Typographie  : Noto Sans
   ========================================================================== */

:root{
  /* Couleurs de marque */
  --rouge:        #E53532;
  --rouge-fonce:  #C21F1D;
  --bleu:         #073672;
  --bleu-nuit:    #041F45;
  --bleu-clair:   #E8EDF6;
  --creme:        #FAF6F1;
  --creme-fonce:  #F2EAE1;
  --blanc:        #FFFFFF;

  /* Texte */
  --encre:        #11233F;
  --encre-doux:   #4A5B72;
  --filet:        rgba(7,54,114,.14);

  /* Mesures */
  --large:        1240px;
  --etroit:       780px;
  --rayon:        4px;
  --rayon-carte:  10px;

  /* Rythme vertical */
  --section-y:    clamp(4.5rem, 8vw, 8rem);

  /* Typo fluide */
  --t-hero:   clamp(2.4rem, 5.2vw, 4.1rem);
  --t-h2:     clamp(1.85rem, 3.4vw, 2.7rem);
  --t-h3:     clamp(1.1rem, 1.6vw, 1.32rem);
  --t-lead:   clamp(1.05rem, 1.35vw, 1.22rem);
  --t-base:   1.0rem;
  --t-petit:  .875rem;

  --ombre-carte: 0 1px 2px rgba(17,35,63,.05), 0 12px 32px -18px rgba(17,35,63,.28);
  --ombre-flottante: 0 24px 60px -28px rgba(4,31,69,.55);
}

/* --------------------------------------------------------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:86px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:var(--t-base);
  line-height:1.7;
  color:var(--encre);
  background:var(--blanc);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--bleu); text-decoration:none; }
a:hover{ color:var(--rouge); }

h1,h2,h3,h4{ font-weight:700; line-height:1.18; letter-spacing:-.018em; margin:0 0 .6em; }
h1{ font-size:var(--t-hero); }
h2{ font-size:var(--t-h2); }
h3{ font-size:var(--t-h3); letter-spacing:-.008em; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

:focus-visible{ outline:2px solid var(--rouge); outline-offset:3px; border-radius:2px; }

.saut-contenu{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--bleu); color:#fff; padding:.7rem 1.2rem;
}
.saut-contenu:focus{ left:1rem; top:1rem; color:#fff; }

/* ----------------------------------------------------- Utilitaires ------- */
.conteneur{ width:min(100% - 2.5rem, var(--large)); margin-inline:auto; }
.conteneur-etroit{ width:min(100% - 2.5rem, var(--etroit)); margin-inline:auto; }

.section{ padding-block:var(--section-y); }
.section--creme{ background:var(--creme); }
.section--bleu{ background:var(--bleu-nuit); color:#EAF0F9; }
.section--bleu h2,.section--bleu h3{ color:#fff; }

.surtitre{
  display:block;
  font-size:.735rem; font-weight:700;
  letter-spacing:.19em; text-transform:uppercase;
  color:var(--rouge);
  margin-bottom:1rem;
}
.section--bleu .surtitre{ color:#F5837F; }

.chapeau{
  font-size:var(--t-lead);
  line-height:1.62;
  color:var(--encre-doux);
  max-width:62ch;
}
.section--bleu .chapeau{ color:#C3D2E8; }

.entete-section{ max-width:760px; margin-bottom:clamp(2.5rem,4vw,3.75rem); }
.entete-section--centre{ margin-inline:auto; text-align:center; }
.entete-section--centre .chapeau{ margin-inline:auto; }

.filet-titre{
  width:56px; height:2px; background:var(--rouge);
  border:0; margin:0 0 1.6rem;
}
.entete-section--centre .filet-titre{ margin-inline:auto; }

/* --------------------------------------------------------- Boutons ------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-size:.94rem; font-weight:600; letter-spacing:.005em;
  padding:.92rem 1.7rem;
  border:1px solid transparent; border-radius:var(--rayon);
  cursor:pointer;
  transition:background-color .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn .fleche{ transition:transform .22s ease; }
.btn:hover .fleche{ transform:translateX(3px); }

.btn--primaire{ background:var(--rouge); color:#fff; }
.btn--primaire:hover{ background:var(--rouge-fonce); color:#fff; }

.btn--secondaire{ background:transparent; color:var(--bleu); border-color:var(--filet); }
.btn--secondaire:hover{ background:var(--bleu); border-color:var(--bleu); color:#fff; }

.btn--clair{ background:#fff; color:var(--bleu-nuit); }
.btn--clair:hover{ background:var(--creme); color:var(--bleu-nuit); }

.btn--fantome{ background:transparent; color:#fff; border-color:rgba(255,255,255,.42); }
.btn--fantome:hover{ background:rgba(255,255,255,.12); color:#fff; }

.lien-fleche{
  display:inline-flex; align-items:center; gap:.45rem;
  font-weight:600; font-size:.94rem;
  color:var(--bleu);
  border-bottom:1px solid var(--filet);
  padding-bottom:2px;
}
.lien-fleche:hover{ color:var(--rouge); border-color:currentColor; }
.lien-fleche .fleche{ transition:transform .22s ease; }
.lien-fleche:hover .fleche{ transform:translateX(3px); }

/* ------------------------------------------------------- En-tête --------- */
.entete{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.entete.est-defile{
  border-bottom-color:var(--filet);
  box-shadow:0 6px 24px -20px rgba(17,35,63,.6);
}
.entete__interieur{
  /* Le logo et les actions prennent leur largeur propre ; les onglets occupent
     tout l'espace restant et s'y centrent. Ils sont ainsi a egale distance du
     logo et du bouton, alors qu'un centrage sur la barre entiere les faisait
     paraitre pousses vers la droite. */
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:1.5rem; min-height:80px;
}
.entete__logo{ display:flex; align-items:center; flex:0 0 auto; }
.entete__logo img{ height:46px; width:auto; }

.nav{ justify-self:stretch; }
.nav__liste{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(1.9rem, 3vw, 3.1rem);
  list-style:none; margin:0; padding:0;
  white-space:nowrap;
}
.nav__lien{
  font-size:.9rem; font-weight:500; color:var(--encre);
  padding-block:.4rem; position:relative;
}
.nav__lien::after{
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:1.5px; background:var(--rouge);
  transform:scaleX(0); transform-origin:left; transition:transform .24s ease;
}
.nav__lien:hover{ color:var(--bleu); }
.nav__lien:hover::after{ transform:scaleX(1); }

.entete__actions{ display:flex; align-items:center; gap:1.1rem; justify-self:end; }

.langues{ display:flex; align-items:center; gap:.35rem; font-size:.8rem; font-weight:600; }
.langues a{ color:var(--encre-doux); padding:.15rem .1rem; }
.langues a[aria-current="true"]{ color:var(--bleu); }
.langues span{ color:var(--filet); }
/* EN reste affiche mais inactif tant que la version anglaise n'existe pas :
   un lien vers une page absente vaut une 404 pour le visiteur et pour Google. */
.langues__bientot{ color:var(--encre-doux); opacity:.42; cursor:default;
                   padding:.15rem .1rem; }

.entete__actions .btn{ padding:.66rem 1.25rem; font-size:.86rem; }

.burger{
  display:none;
  width:44px; height:44px; padding:0;
  background:transparent; border:1px solid var(--filet); border-radius:var(--rayon);
  cursor:pointer;
}
.burger span{
  display:block; width:18px; height:1.5px; margin:4px auto;
  background:var(--encre); transition:transform .25s ease, opacity .25s ease;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

/* ---------------------------------------------------------- Héros -------- */
.heros{
  position:relative;
  background:var(--creme);
  overflow:hidden;
  padding-block:clamp(3rem,6vw,5.5rem) clamp(3.5rem,7vw,6.5rem);
}
.heros::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(60% 70% at 88% 12%, rgba(229,53,50,.09), transparent 62%),
    radial-gradient(55% 60% at 4% 92%, rgba(7,54,114,.09), transparent 60%);
  pointer-events:none;
}
/* Le titre occupe toute la largeur ; les deux colonnes viennent en dessous. */
.heros__entete{ position:relative; margin-bottom:clamp(1.8rem,3vw,2.6rem); }
.heros__entete .heros__titre{ max-width:none; }

.heros__grille{
  position:relative;
  display:grid; grid-template-columns:1fr minmax(260px, 340px);
  gap:70px; align-items:center;
}
.heros__titre{ margin-bottom:1.15rem; }
.heros__titre .accent{ color:var(--rouge); }
.heros__chapeau{ font-size:var(--t-lead); color:var(--encre-doux); }

.badge-dispo{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.76rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--bleu);
  background:#fff; border:1px solid var(--filet);
  border-radius:100px; padding:.45rem 1rem .45rem .78rem;
  margin-bottom:1.6rem;
}
.pastille{
  width:7px; height:7px; border-radius:50%; background:var(--rouge);
  box-shadow:0 0 0 4px rgba(229,53,50,.16);
}

.heros__note{
  /* Placee sous les boutons : on l'ecarte davantage du bloc d'actions. */
  margin-top:1.6rem;
  /* Meme taille et meme interligne que le chapeau : la note se lit comme la
     suite du texte, seule sa position sous les boutons la distingue. */
  font-size:var(--t-lead); line-height:1.62; color:var(--encre-doux);
}

.heros__actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2rem; }

.heros__mentions{
  display:flex; flex-wrap:wrap; gap:.5rem 1.6rem;
  margin-top:2.1rem; padding-top:1.5rem;
  border-top:1px solid var(--filet);
  /* Meme taille que le chapeau et la note : la barre se lit comme la
     suite du texte, pas comme une note de bas de page. */
  font-size:var(--t-lead); line-height:1.62; color:var(--encre-doux);
}
.heros__mentions strong{ color:var(--encre); font-weight:600; }

/* Visuel du héros : photo patrimoine + mockup application */
.heros__visuel{ position:relative; display:flex; justify-content:center; }
.heros__photo{
  position:relative;
  border-radius:var(--rayon-carte);
  overflow:hidden;
  box-shadow:var(--ombre-flottante);
  aspect-ratio:4/5;
}
.heros__photo img{ width:100%; height:100%; object-fit:cover; }
.heros__photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(4,31,69,0) 45%, rgba(4,31,69,.42) 100%);
}
.heros__mockup{
  position:absolute; right:-6%; bottom:-7%;
  width:66%; max-width:420px;
  filter:drop-shadow(0 26px 44px rgba(4,31,69,.34));
}


/* ------------------------------------------------------ Bandeau clés ----- */
.bandeau-cles{
  background:var(--bleu-nuit); color:#fff;
  padding-block:clamp(2rem,3.4vw,2.9rem);
}
.bandeau-cles__grille{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1.5rem 2rem;
}
.cle{ text-align:center; }
.cle__valeur{
  display:block;
  font-size:clamp(1.7rem,2.7vw,2.35rem); font-weight:700; line-height:1.1;
  letter-spacing:-.02em;
}
.cle__valeur .unite{ color:#F5837F; }
.cle__libelle{
  display:block; margin-top:.35rem;
  font-size:.78rem; letter-spacing:.11em; text-transform:uppercase;
  color:#9FB4D2;
}

/* ------------------------------------------------- Cadres d'appareils ----- */
/* Le cadre PNG est evide en son centre : la photo se place derriere lui, et
   les angles arrondis du cadre masquent d'eux-memes ceux de l'image. */
.appareil{ position:relative; display:block; margin:0; line-height:0; }
/* Taille de reference d'un telephone sur le site. Elle vaut pour tous les
   emplacements ; une section qui voudrait s'en ecarter devra le declarer
   explicitement, et l'ecart se verra dans la feuille de style. */
.appareil--telephone{ width:min(100%, 300px); margin-inline:auto; }
.appareil__cadre{ position:relative; z-index:2; width:100%; height:auto; pointer-events:none; }
.appareil__photo,
.carrousel__scene{ position:absolute; z-index:1; overflow:hidden; }
.appareil__photo{ width:100%; height:100%; object-fit:cover; }

/* Telephone — cadre 819x1651, ecran 777x1624 decale de 21 px. */
.appareil--telephone .appareil__photo,
.appareil--telephone .carrousel__scene{
  top:.85%; left:2.56%; width:94.87%; height:98.36%; border-radius:8.5% / 4.2%;
}

/* ------------------------------------------------------------ Carrousel --- */
/* Le compteur se pose sous le cadre. En position absolue, car l'appareil
   place ses elements en pourcentage de sa propre boite : lui ajouter de la
   hauteur deformerait l'ecran. La place est donc reservee par la marge. */
.carrousel{ margin-bottom:1.9rem; }
.carrousel__points{
  position:absolute; top:100%; left:0; right:0; margin-top:.8rem;
  display:flex; justify-content:center; align-items:center; gap:.45rem;
  line-height:0;
}
.carrousel__point{
  width:8px; height:8px; padding:0; border:0; border-radius:50%;
  background:var(--bleu-nuit); opacity:.2; cursor:pointer;
  transition:opacity .2s ease, transform .2s ease, background-color .2s ease;
}
.carrousel__point:hover{ opacity:.45; }
.carrousel__point.est-actif{ background:var(--rouge); opacity:1; transform:scale(1.3); }
.carrousel__point:focus-visible{ outline:2px solid var(--rouge); outline-offset:3px; }

/* Carrousel d'images : pas de cadre d'appareil, une simple fenetre 3:4 aux
   coins arrondis. Le cadre telephone dit « voici l'application » ; ici on
   montre des photos, il n'aurait rien a raconter. */
.carrousel--image{
  position:relative; width:min(100%, 380px); margin-inline:auto;
  /* Le rapport est ecrit dans la page par le gestionnaire : le cadre peut
     ainsi epouser les photos plutot que leur imposer une forme. */
  aspect-ratio:var(--rapport, 2 / 3);
}
.carrousel--image .carrousel__scene{
  inset:0; border-radius:var(--rayon-carte);
  box-shadow:var(--ombre-carte);
}

.carrousel__diapo{
  position:absolute; inset:0; margin:0;
  opacity:0; transition:opacity 1s ease;
}
.carrousel__diapo.est-active{ opacity:1; }
.carrousel__diapo img{ width:100%; height:100%; object-fit:cover; display:block; }
.carrousel__logo{
  position:absolute; z-index:3; top:2.5%; left:50%; transform:translateX(-50%);
  width:11%; max-width:32px; height:auto;
  pointer-events:none;
  /* Pastille creme : le motif se pose sur les photos les plus chargees sans
     rien perdre. Aucune marge ici : le fichier est bati autour du plus petit
     cercle qui contient le motif, il tient donc dans le disque par
     construction. Une marge uniforme, elle, ne suffisait pas — l'infini
     s'etale sur toute la largeur la ou le cercle est deja retreci. */
  background:var(--creme); border-radius:50%;
}

@media (prefers-reduced-motion:reduce){
  .carrousel__diapo{ transition:none; }
  .carrousel__point{ transition:none; }
}

/* ---------------------------------------------------- Bande de photos ---- */
/* Meme traitement que la section « Pret a partir ? » : bleu nuit et voile
   rouge en degrade radial. */
.bande-photos{
  position:relative; overflow:hidden;
  background:var(--bleu-nuit);
  padding-block:clamp(2.5rem,4.5vw,4rem);
}
.bande-photos::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(58% 90% at 50% 0%, rgba(229,53,50,.24), transparent 68%);
}
.bande-photos > *{ position:relative; }
.bande-photos__grille{
  --gouttiere:clamp(1rem,1.8vw,1.6rem);
  /* La bande deborde la colonne de texte pour que les cinq photos gardent la
     largeur qu'elles avaient a quatre : 294 px. La section occupe deja toute
     la largeur de l'ecran, rien ne s'y oppose. */
  width:min(100% - 2.5rem, 1560px);
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:var(--gouttiere);
}
.bande-photos figure{ margin:0; border-radius:var(--rayon-carte); overflow:hidden; aspect-ratio:2/3; }
.bande-photos img{ width:100%; height:100%; object-fit:cover; }

/* --------------------------------------------- Blocs « Vous êtes … » ------ */
.bloc-audience{ text-align:center; }
/* Meme structure que le heros : colonne de droite de 340 px au plus, appareil
   de 300 px centre dedans. Les cadres des deux sections commencent donc a la
   meme abscisse. L'ecart est porte a 11,8rem pour retrouver les 209 px qui
   separent le texte du telephone dans le heros. */
.bloc-audience--illustre{
  display:grid; grid-template-columns:1fr minmax(260px, 340px);
  gap:70px; align-items:center; text-align:left;
}
.bloc-audience--illustre .bloc-audience__accroche,
.bloc-audience--illustre .bloc-audience__texte{ margin-inline:0; }
/* Texte cale a droite : il vient au contact du visuel place a sa droite. */
.bloc-audience--illustre .bloc-audience__texte-colonne{ text-align:right; }
.bloc-audience--illustre .bloc-audience__accroche,
.bloc-audience--illustre .bloc-audience__texte{ margin-left:auto; margin-right:0; }

/* Variante inversee : le visuel a gauche, le texte a droite et aligne a gauche,
   pour rester au contact du visuel de la meme maniere. */
.bloc-audience--inverse{ grid-template-columns:minmax(260px, 340px) 1fr; }
.bloc-audience--inverse .bloc-audience__texte-colonne{ text-align:left; }
.bloc-audience--inverse .bloc-audience__accroche,
.bloc-audience--inverse .bloc-audience__texte{ margin-left:0; margin-right:auto; }
.bloc-audience h2{ margin-bottom:.9rem; }
.bloc-audience__accroche{
  font-size:clamp(1.25rem,2.2vw,1.7rem);
  line-height:1.35; font-weight:400; letter-spacing:-.012em;
  color:var(--encre);
  max-width:100%; margin:0 auto 1.8rem;
}
.bloc-audience__texte{
  /* Meme taille que le chapeau du heros et que les paragraphes de section :
     tous les textes d'introduction du site partagent desormais --t-lead. */
  font-size:var(--t-lead); line-height:1.62; color:var(--encre-doux);
  max-width:70ch; margin:0 auto 2.2rem;
}
.marque{ color:var(--rouge); font-weight:600; }

/* --------------------------------------------------------- Étapes -------- */
.etapes{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.4rem; counter-reset:etape; }
/* Colonnes de meme hauteur : la photo est poussee vers le bas, les trois
   s'alignent donc quelle que soit la longueur du texte au-dessus. */
.etape{ position:relative; padding-top:2.6rem; display:flex; flex-direction:column; }
.etape::before{
  counter-increment:etape; content:'0' counter(etape);
  position:absolute; top:0; left:0;
  font-size:.9rem; font-weight:700; letter-spacing:.12em;
  color:var(--rouge);
}
.etape::after{
  content:''; position:absolute; top:.72rem; left:2.4rem; right:0;
  height:1px; background:var(--filet);
}
.etape:last-child::after{ display:none; }
.etape h3{ margin-bottom:.5rem; }
.etape__visuel{
  margin:1.4rem 0 0; margin-top:auto; padding-top:1.4rem; border-radius:var(--rayon-carte); overflow:hidden;
  aspect-ratio:4/3;
}
.etape__visuel img{ width:100%; height:100%; object-fit:cover; display:block; }
.etape p{ color:var(--encre-doux); font-size:.96rem; }

/* ------------------------------------------------------ Application ------ */
.appli{
  display:grid; grid-template-columns:1fr minmax(260px, 340px);
  gap:70px; align-items:center;
  /* L'entete introduit toute la section : il traverse les deux colonnes.
     L'ecart vertical qui le separe du corps est plus serre que l'ecart
     horizontal entre le texte et le telephone. */
  row-gap:1.4rem;
}
.appli__entete{ grid-column:1 / -1; }
/* L'entete traverse la grille, mais le chapeau s'aligne sur la colonne de
   texte, comme les points listes en dessous : il s'arrete la ou elle
   s'arrete. La colonne de droite fait 340px, l'ecart 70px. */
.appli__entete .chapeau{ max-width:calc(100% - 410px); }

/* La colonne de texte etait centree contre le telephone, plus haut qu'elle :
   la liste se retrouvait tres loin du chapeau. On la cale en haut, et on
   regle son ecart pour qu'il egale celui du titre au chapeau. */
.appli__texte{ align-self:start; }
.appli__texte .liste-atouts{ margin-top:2rem; }

.appli__ecrans{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(.7rem,1.4vw,1.15rem);
}
.ecran{
  border-radius:12px; overflow:hidden;
  border:1px solid var(--filet);
  background:#fff;
  box-shadow:var(--ombre-carte);
}
.ecran img{ width:100%; }
.ecran:nth-child(2){ transform:translateY(-1.4rem); }

.liste-atouts{ list-style:none; margin:1.9rem 0 0; padding:0; display:grid; gap:1.05rem; }
.liste-atouts li{
  display:grid; grid-template-columns:22px 1fr; gap:.85rem; align-items:start;
  /* Meme taille et meme interligne que le chapeau juste au-dessus. */
  font-size:var(--t-lead); line-height:1.62; color:var(--encre-doux);
}
.liste-atouts strong{ color:var(--encre); font-weight:600; }
.puce{ margin-top:.5rem; color:var(--rouge); flex:0 0 auto; }

/* --------------------------------------------------------- Piliers ------- */
:root{ --ecart-piliers:clamp(1.2rem,2.2vw,1.9rem); }
.piliers{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--ecart-piliers); }
/* L'entete se cale sur trois cartes plutot que sur les 760px habituels :
   trois colonnes et les deux ecarts qui les separent. Le titre garde sa
   mesure d'origine, seul le chapeau profite de la largeur gagnee. */
#pourquoi .entete-section{ max-width:calc(75% - .25 * var(--ecart-piliers)); }
#pourquoi .entete-section h2{ max-width:760px; margin-inline:auto; }
#pourquoi .entete-section .chapeau{ max-width:none; }

/* La rangee ne compte que trois cartes : elles occupent toute la largeur du
   conteneur. L'entete s'y cale, ce qui donne au titre de quoi tenir sur une
   ligne (871px) et au chapeau la largeur des trois images. */
#parcours .entete-section{ max-width:none; }
#parcours .entete-section .chapeau{ max-width:none; }

/* Les deux sections empilaient chacune leur retrait vertical, soit le
   double de l'ecart voulu a leur jointure. Chacune en cede la moitie. */
#parcours{ padding-bottom:calc(var(--section-y) / 2); }
#horizon{ padding-top:calc(var(--section-y) / 2); }
/* La bande photo va d'un bord a l'autre et termine la section : le retrait
   bas ne ferait qu'une lisiere blanche entre elle et la section suivante. */
#horizon{ padding-bottom:0; }

/* Meme traitement que la section precedente : le titre tient sur une
   ligne et le chapeau prend la largeur du conteneur. */
#horizon .entete-section{ max-width:none; }
#horizon .entete-section .chapeau{ max-width:none; }
.pilier{
  background:#fff;
  border:1px solid var(--filet);
  border-radius:var(--rayon-carte);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease;
}
.pilier:hover{ transform:translateY(-4px); box-shadow:var(--ombre-carte); }
.pilier__image{ aspect-ratio:4/3; overflow:hidden; }
.pilier__image img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.pilier:hover .pilier__image img{ transform:scale(1.045); }
.pilier__corps{ padding:1.5rem 1.4rem 1.7rem; }
.pilier h3{ margin-bottom:.45rem; }
.pilier p{ font-size:.92rem; color:var(--encre-doux); margin:0; }

/* -------------------------------------------------------- Parcours ------- */
.parcours{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.3rem,2.4vw,2rem); }
.parcours-carte{
  position:relative;
  background:#fff;
  border:1px solid var(--filet);
  border-radius:var(--rayon-carte);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.parcours-carte:hover{ transform:translateY(-4px); box-shadow:var(--ombre-carte); border-color:rgba(7,54,114,.24); }
/* Pas de rapport impose : la carte prend la hauteur de son image, et rien
   n'est rogne quelle que soit la forme de la capture. */
.parcours-carte__image{ position:relative; overflow:hidden; }
.parcours-carte__lien{ display:block; }
.parcours-carte__image img{ width:100%; height:auto; display:block; transition:transform .5s ease; }
/* Au survol la photo retrouve sa taille au lieu de la depasser : le cadre du
   telephone reste entier, la ou un agrandissement le faisait sortir. */
.parcours-carte__image img{ transform:scale(.955); transform-origin:center; }
.parcours-carte:hover .parcours-carte__image img{ transform:scale(1); }

/* ---------------------------------------------------- Bandeau B2B -------- */
.b2b{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(2.5rem,5vw,4.5rem); align-items:center;
}
.b2b__visuel{
  border-radius:var(--rayon-carte); overflow:hidden;
  box-shadow:var(--ombre-flottante);
  max-width:420px; margin-inline:auto;
}
.b2b__jours{ list-style:none; margin:1.8rem 0 2.2rem; padding:0; display:grid; gap:1rem; }
.b2b__jours li{
  display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:baseline;
  padding-bottom:1rem; border-bottom:1px solid rgba(255,255,255,.14);
}
.b2b__jours li:last-child{ border-bottom:0; padding-bottom:0; }
.b2b__jour{
  font-size:.72rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:#F5837F; white-space:nowrap;
}
.b2b__jours strong{ color:#fff; font-weight:600; display:block; }
.b2b__jours span.detail{ color:#B9CAE4; font-size:.92rem; }

/* -------------------------------------------------------- Horizon -------- */
/* Le lieu precede le titre, dans la couleur de marque. */
.titre-lieu{ color:var(--rouge); }

/* Parcours en developpement : texte et blocs a gauche, photo a droite. */
/* La section tient sur une colonne : entete puis bande photo, sur toute la
   largeur du conteneur. */
.horizon__grille{ display:grid; grid-template-columns:1fr; }

/* Une photo seule, d'un bord a l'autre de l'ecran. La figure est posee sous
   le conteneur, directement dans la section, qui fait deja toute la largeur :
   inutile de la faire deborder a coups de 100vw, qui compte la barre de
   defilement et provoque un debordement horizontal.

   La hauteur est dictee par l'image, pas par la feuille : un rapport inscrit
   ici rognerait la prochaine photo si elle n'a pas le meme format. Les
   attributs width et height de la balise suffisent au navigateur pour
   reserver la place avant le chargement, la page ne sursaute donc pas. */
.bande-photo{
  margin:2.6rem 0 0;
  width:100%;
}
.bande-photo img{ width:100%; height:auto; display:block; }

/* Les trois blocs se suivent verticalement. */
.horizon{ display:grid; grid-template-columns:1fr; gap:1.1rem; }
.horizon__item{
  border:1px solid var(--filet); border-radius:var(--rayon-carte);
  padding:1.4rem 1.35rem; background:#fff;
}
.horizon__item h3{ font-size:1.02rem; margin-bottom:.3rem; }
.horizon__item p{ font-size:.88rem; color:var(--encre-doux); margin:0; }
.horizon__statut{
  display:inline-block; margin-bottom:.75rem;
  font-size:.68rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  padding:.22rem .6rem; border-radius:3px;
}
.statut--dispo{ background:rgba(229,53,50,.1); color:var(--rouge-fonce); }
.statut--bientot{ background:rgba(7,54,114,.09); color:var(--bleu); }

/* ------------------------------------------------- Rock Around Siam ------ */
/* Les deux paragraphes d'introduction occupent la largeur du conteneur :
   l'en-tete de section standard les bridait a 760 px. */
#rock-around-siam .entete-section{ max-width:none; }
/* Seuls les paragraphes s'etendent : le titre garde la largeur des autres
   sections, sans quoi il s'etirerait sur une seule ligne trop longue. */
#rock-around-siam .entete-section h2{ max-width:760px; margin-inline:auto; }
#rock-around-siam .chapeau{ max-width:none; text-align:left; }

.ras{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.2rem,2.2vw,1.9rem);
  margin-bottom:clamp(2.5rem,4vw,3.5rem);
}
.ras__carte{
  background:#fff; border:1px solid var(--filet); border-radius:var(--rayon-carte);
  padding:1.6rem 1.5rem 1.7rem;
}
/* Colonnes de meme hauteur : la photo est poussee en bas de chaque carte,
   les trois s'alignent quelle que soit la longueur du texte. */
.ras__carte{ display:flex; flex-direction:column; }
.ras__carte h3{ margin-bottom:.55rem; }
.ras__carte p{ font-size:.95rem; color:var(--encre-doux); margin:0; }
.ras__visuel{
  margin:1.4rem 0 0; margin-top:auto; padding-top:1.4rem;
  border-radius:var(--rayon);
}
/* Aucun rapport impose : la photo garde sa forme, quelle qu'elle soit. */
.ras__visuel img{ width:100%; height:auto; display:block;
                  border-radius:var(--rayon); }

.ras__lien{ text-align:center; margin:0; }

/* -------------------------------------------------------- Fondateur ------ */
.fondateur{ display:grid; grid-template-columns:.38fr .62fr; gap:clamp(2.2rem,4.5vw,4rem); align-items:center; }
.fondateur__portrait{
  border-radius:var(--rayon-carte); overflow:hidden;
  box-shadow:var(--ombre-carte);
  max-width:340px;
}
.citation{
  font-size:clamp(1.15rem,1.9vw,1.42rem); line-height:1.55;
  font-weight:500; color:var(--encre);
  border-left:2px solid var(--rouge);
  padding-left:1.4rem; margin:0 0 1.6rem;
}
.signature{ font-size:.86rem; color:var(--encre-doux); }
.signature strong{ color:var(--encre); display:block; font-weight:600; }

/* ------------------------------------------------------------ FAQ -------- */
.faq{ display:grid; gap:0; border-top:1px solid var(--filet); }
.faq details{ border-bottom:1px solid var(--filet); }
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:1.25rem;
  padding:1.35rem 0;
  font-size:1.03rem; font-weight:600; color:var(--encre);
  cursor:pointer; list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:''; flex:0 0 auto;
  width:9px; height:9px; margin-right:5px;
  border-right:1.6px solid var(--rouge); border-bottom:1.6px solid var(--rouge);
  transform:rotate(45deg) translateY(-3px);
  transition:transform .25s ease;
}
.faq details[open] summary::after{ transform:rotate(225deg) translateY(-3px); }
.faq details[open] summary{ color:var(--bleu); }
.faq__reponse{ padding-bottom:1.5rem; color:var(--encre-doux); font-size:.97rem; max-width:78ch; }

/* ------------------------------------------------- Pages de texte -------- */
.page-texte h1{ font-size:clamp(2rem,3.6vw,2.9rem); margin-bottom:.5rem; }
.page-texte h2{
  font-size:clamp(1.25rem,1.9vw,1.5rem);
  margin:clamp(2.2rem,3.5vw,3rem) 0 .8rem;
}
.page-texte h3{ font-size:1.05rem; margin:1.8rem 0 .5rem; }
.page-texte p{ color:var(--encre-doux); max-width:74ch; }
.page-texte .chapeau{ margin-bottom:1rem; }

.liste-simple{
  list-style:none; margin:0 0 1.1em; padding:0;
  display:grid; gap:.5rem;
  color:var(--encre-doux); max-width:74ch;
}
.liste-simple li{ padding-left:1.1rem; position:relative; }
.liste-simple li::before{
  content:'—'; position:absolute; left:0; color:var(--rouge);
}
.liste-simple strong{ color:var(--encre); }

.maj{
  margin-top:clamp(2.5rem,4vw,3.5rem);
  padding-top:1.2rem; border-top:1px solid var(--filet);
  font-size:.85rem; color:var(--encre-doux);
}

/* -------------------------------------------------------- Contact -------- */
.contact{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(2.5rem,5vw,4.5rem); }
/* min-width:0 — sans quoi le <select> et les <input> imposent leur min-content
   à la grille et débordent l'écran sur mobile. */
.contact > *,.formulaire,.champ,.champ--double,.champ--double > *{ min-width:0; }
.contact__coords{ list-style:none; margin:2rem 0 0; padding:0; display:grid; gap:1.15rem; font-size:.95rem; }
.contact__coords li{ display:grid; grid-template-columns:auto 1fr; gap:.85rem; align-items:start; }
.contact__coords .etiq{
  display:block; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--encre-doux);
  margin-bottom:.1rem;
}

.formulaire{ display:grid; gap:1.1rem; }
.champ{ display:grid; gap:.42rem; }
.champ--double{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.champ label{ font-size:.82rem; font-weight:600; letter-spacing:.02em; }
.champ .obligatoire{ color:var(--rouge); }
.champ input,.champ textarea,.champ select{
  font-family:inherit; font-size:.95rem; color:var(--encre);
  width:100%; min-width:0;
  padding:.78rem .9rem;
  background:#fff;
  border:1px solid var(--filet); border-radius:var(--rayon);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.champ input:focus,.champ textarea:focus,.champ select:focus{
  outline:none; border-color:var(--bleu);
  box-shadow:0 0 0 3px rgba(7,54,114,.1);
}
.champ textarea{ resize:vertical; min-height:130px; }
.mention-legale{ font-size:.78rem; color:var(--encre-doux); }
.message-formulaire{ padding:.9rem 1.1rem; border-radius:var(--rayon); font-size:.9rem; display:none; }
.message-formulaire.ok{ display:block; background:rgba(7,54,114,.07); color:var(--bleu); border:1px solid rgba(7,54,114,.2); }
.message-formulaire.erreur{ display:block; background:rgba(229,53,50,.07); color:var(--rouge-fonce); border:1px solid rgba(229,53,50,.25); }

/* ----------------------------------------------------- Appel final ------- */
.appel-final{
  position:relative; overflow:hidden;
  background:var(--bleu-nuit); color:#fff;
  text-align:center;
  padding-block:clamp(4rem,7vw,6.5rem);
}
.appel-final::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(58% 90% at 50% 0%, rgba(229,53,50,.24), transparent 68%);
}
.appel-final > *{ position:relative; }
.appel-final h2{ color:#fff; max-width:20ch; margin-inline:auto; }
.appel-final .chapeau{ color:#C3D2E8; margin-inline:auto; }
.appel-final__actions{ display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center; margin-top:2.2rem; }

/* ---------------------------------------------------------- Pied --------- */
.pied{ background:var(--creme); border-top:1px solid var(--filet); padding-block:clamp(3rem,5vw,4rem) 2rem; }
.pied__grille{ display:grid; grid-template-columns:1.6fr 1fr 1.2fr; gap:2.5rem; align-items:start; }
.pied__logo img{ height:74px; width:auto; margin-bottom:1.1rem; }
.pied__resume{ font-size:.9rem; color:var(--encre-doux); max-width:34ch; }
/* Les titres de colonnes s'alignent sur le mot « Siamnity » du logo, qui occupe
   le bas de l'image : d'ou le decalage vertical applique aux colonnes. */
.pied__grille > *:not(:first-child){ padding-top:3.7rem; }
.pied h3{
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--encre); margin-bottom:1.15rem;
}
/* Aucun ecart ajoute : les items se suivent a l'interligne naturel du texte
   (0,9rem x 1,7), exactement comme le paragraphe place sous le logo. */
.pied ul{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
/* Le li doit porter la meme taille que le lien : sinon sa hauteur de ligne
   est calculee sur 1rem et l'interligne depasse celui du paragraphe. */
.pied li{ font-size:.9rem; }
.pied__sep{ color:var(--filet); padding-inline:.15rem; }
.pied a{ font-size:.9rem; color:var(--encre-doux); }
.pied a:hover{ color:var(--rouge); }
/* Une seule ligne centree : mention de droits et liens legaux separes par un filet. */
/* Le numero est joignable sur WhatsApp : autant que le lien y mene. */
.pied__whatsapp{ margin-left:.4rem; white-space:nowrap; }

.pied__bas{
  display:flex; flex-wrap:wrap; gap:.4rem .9rem; justify-content:center; align-items:center;
  margin-top:2.8rem; padding-top:1.5rem;
  border-top:1px solid var(--filet);
  font-size:.9rem; color:var(--encre-doux);
  text-align:center;
}

/* ----------------------------------------------------- Responsive -------- */
@media (max-width:1080px){
  .nav__liste{ gap:1.6rem; }
  .piliers{ grid-template-columns:repeat(2,1fr); }
  .parcours{ grid-template-columns:repeat(2,1fr); }
  .pied__grille{ grid-template-columns:1fr 1fr; gap:2.2rem; }
}

@media (max-width:900px){
  /* Le menu deroulant sort du flux sur mobile : sans repartition, le
     selecteur de langue et le bouton se collent au logo au lieu de tenir le
     bord droit. */
  .entete__interieur{
    display:flex; align-items:center; gap:1.5rem;
    justify-content:space-between;
  }
  /* La bande de cinq photos ne s'affiche qu'en grand format. En dessous,
     elle ne tient plus sur une rangee : empilee ou repliee, elle ajoute des
     ecrans de defilement avant le premier contenu utile. La masquer evite en
     prime de telecharger les images — elles sont en chargement differe et ne
     croisent alors jamais l'ecran. */
  .bande-photos{ display:none; }
  .bloc-audience--illustre,
  .bloc-audience--inverse{ grid-template-columns:1fr; text-align:center; justify-items:center; }
  .bloc-audience--inverse .bloc-audience__texte-colonne{ order:-1; }
  .bloc-audience--illustre .bloc-audience__texte-colonne,
  .bloc-audience--inverse .bloc-audience__texte-colonne{ text-align:center; }
  .bloc-audience--illustre .bloc-audience__accroche,
  .bloc-audience--illustre .bloc-audience__texte,
  .bloc-audience--inverse .bloc-audience__accroche,
  .bloc-audience--inverse .bloc-audience__texte{ margin-inline:auto; }
  .pied__grille > *:not(:first-child){ padding-top:0; }
  .heros__grille{ grid-template-columns:1fr; gap:3rem; }
  .heros__visuel{ max-width:520px; margin-inline:auto; width:100%; }
  .heros__mockup{ right:-4%; width:58%; }
  .appli{ grid-template-columns:1fr; }
  /* Une seule colonne : le telephone passe dessous, le chapeau reprend
     toute la largeur. */
  .appli__entete .chapeau{ max-width:none; }
  .b2b{ grid-template-columns:1fr; }
  .contact{ grid-template-columns:1fr; }
  .fondateur{ grid-template-columns:1fr; }
  .fondateur__portrait{ max-width:260px; }
  .bandeau-cles__grille{ grid-template-columns:repeat(2,1fr); }
  .etapes{ grid-template-columns:1fr; gap:2rem; }
  .etape::after{ display:none; }
  .ras{ grid-template-columns:1fr; }

  /* Navigation mobile */
  .burger{ display:block; order:3; }
  .nav{
    position:fixed; inset:76px 0 auto 0;
    background:#fff; border-bottom:1px solid var(--filet);
    box-shadow:0 18px 40px -26px rgba(17,35,63,.6);
    padding:1rem 1.25rem 1.6rem;
    transform:translateY(-8px); opacity:0; visibility:hidden;
    transition:opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .nav.est-ouverte{ transform:translateY(0); opacity:1; visibility:visible; }
  .nav__liste{ flex-direction:column; align-items:stretch; gap:0; }
  .nav__liste li{ border-bottom:1px solid var(--filet); }
  .nav__liste li:last-child{ border-bottom:0; }
  .nav__lien{ display:block; padding:.95rem 0; font-size:1rem; }
  .nav__lien::after{ display:none; }
  .entete__actions .btn{ display:none; }
}

@media (max-width:640px){
  :root{ --section-y:3.5rem; }
  /* La barre du heros se replie sur deux lignes : la mention des langues
     s'y retrouve seule sur la seconde, ou elle a l'air d'un reste. Le
     selecteur de l'entete dit deja que le site existe dans les deux. */
  .heros__mentions span:last-child{ display:none; }
  /* Le panoramique en 16:7 ne fait plus que 160 px de haut a cette
     largeur : on n'y distingue plus la scene. */
  .bande-photo{ display:none; }
  .conteneur,.conteneur-etroit{ width:min(100% - 1.75rem, var(--large)); }
  .piliers{ grid-template-columns:1fr; }
  .parcours{ grid-template-columns:1fr; }
  .pied__grille{ grid-template-columns:1fr; }
  .champ--double{ grid-template-columns:1fr; }
  .heros__mockup{ position:static; width:78%; margin:-2.5rem auto 0; }
  .heros__photo{ aspect-ratio:3/4; }
  .btn{ width:100%; }
  .heros__actions .btn,.appel-final__actions .btn{ width:100%; }
  .appli__ecrans{ grid-template-columns:repeat(2,1fr); }
  .ecran:nth-child(2){ transform:none; }
  .ecran:nth-child(3){ display:none; }
}

/* --------------------------------------------------- Apparition ---------- */
.apparait{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.apparait.est-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .apparait{ opacity:1; transform:none; transition:none; }
}

@media print{
  .entete,.appel-final,.burger{ display:none; }
  body{ color:#000; background:#fff; }
}