/* ==========================================================================
   Smartacus — feuille de style unique
   Couleurs relevees sur les deux maquettes de reference (Website design/).
   Aucune dependance : ni framework, ni bibliotheque. Seules les polices sont
   chargees depuis Google Fonts, avec une pile de repli complete.
   ========================================================================== */

/* -------------------------------- Jetons -------------------------------- */

:root {
  --prune:        #683755;
  --prune-fonce:  #6E2A4F;
  --prune-clair:  #8B5A78;
  --ardoise:      #5A6A79;
  --encre:        #2B2B2F;
  --encre-douce:  #55555C;
  --gris:         #8B9099;
  --papier:       #FFFFFF;
  --papier-chaud: #FAF8F9;
  --trait:        #E4DEE2;
  --or:           #B8933F;
  --ambre:        #8A6D1F;
  --ambre-fond:   #FBF3D8;

  --degrade: linear-gradient(105deg, var(--ardoise) 0%, #63566B 46%, var(--prune-fonce) 100%);

  --display: "Jost", "Century Gothic", "Trebuchet MS", sans-serif;
  --texte:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif:   "EB Garamond", Cambria, Georgia, serif;

  --ombre-carte: 0 1px 2px rgba(43, 43, 47, .05), 0 8px 28px rgba(43, 43, 47, .07);
  --ombre-haute: 0 4px 10px rgba(43, 43, 47, .08), 0 24px 60px rgba(43, 43, 47, .16);

  --rayon: 10px;
  --colonne: 74rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --prune:        #C88FB0;
    --prune-fonce:  #B87A9E;
    --prune-clair:  #9C6685;
    --encre:        #ECE7EA;
    --encre-douce:  #B9B2B7;
    --gris:         #8D8790;
    --papier:       #15131A;
    --papier-chaud: #1C1922;
    --trait:        #322C39;
    --or:           #D8B463;
    --ambre:        #E0C77A;
    --ambre-fond:   #302816;
    --ombre-carte: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 28px rgba(0, 0, 0, .45);
    --ombre-haute: 0 4px 10px rgba(0, 0, 0, .5), 0 24px 60px rgba(0, 0, 0, .6);
  }
}

/* ------------------------------ Fondations ------------------------------ */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--prune); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--prune-fonce); }

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

.evitement {
  position: absolute; left: -9999px;
  background: var(--papier); color: var(--encre);
  padding: .8rem 1.2rem; z-index: 99;
}
.evitement:focus { left: 1rem; top: 1rem; }

.lecteur-ecran {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ------------------------------- Marque -------------------------------- */

.marque { display: inline-flex; flex-direction: column; align-items: center; gap: .9rem; }
.marque__symbole { color: var(--prune); width: 96px; }

.marque__mot {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--prune);
  margin: 0;
  line-height: 1;
  font-size: clamp(2rem, 6vw, 4.1rem);
}

.marque__filet {
  width: min(26rem, 60vw);
  height: 1px;
  background: var(--trait);
  border: 0;
  margin: .1rem 0 0;
}

.marque__baseline {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .34em;
  text-indent: .34em;
  text-transform: uppercase;
  color: var(--gris);
  font-size: clamp(.66rem, 1.5vw, .95rem);
  margin: 0;
}

/* ------------------------- Porte d'entree (acces) ----------------------- */

.porte {
  min-height: 100dvh;
  background: var(--degrade);
  display: grid;
  place-items: center;
  padding: 3rem 1.25rem;
  position: relative;
  overflow: hidden;
}

/* Le symbole en filigrane, comme sur la maquette de connexion. */
.porte__filigrane {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(60rem, 118vw);
  color: #FFFFFF;
  opacity: .085;
  pointer-events: none;
}

.porte__contenu { position: relative; width: 100%; max-width: 33rem; }

/* L'enseigne est plus discrete ici que sur l'accueil : elle partage la hauteur
   de l'ecran avec la carte, qui doit tenir sans defilement. */
.porte__enseigne { text-align: center; margin-bottom: 1.9rem; color: #FFFFFF; }
.porte__enseigne .marque { gap: .7rem; }
.porte__enseigne .marque__symbole { width: 68px; color: #FFFFFF; }
.porte__enseigne .marque__mot { color: #FFFFFF; font-size: clamp(1.7rem, 5vw, 2.9rem); }
.porte__enseigne .marque__filet { width: min(20rem, 55vw); background: rgba(255, 255, 255, .34); }
.porte__enseigne .marque__baseline { color: rgba(255, 255, 255, .74); font-size: clamp(.6rem, 1.3vw, .78rem); }

/* Ecran bas — portable 13 pouces, fenetre reduite : on rogne encore. */
@media (max-height: 860px) {
  .porte { padding-block: 1.8rem; }
  .porte__enseigne { margin-bottom: 1.3rem; }
  .porte__enseigne .marque__symbole { width: 52px; }
  .porte__enseigne .marque__mot { font-size: clamp(1.5rem, 4vw, 2.2rem); }
  .porte__enseigne .marque__filet { display: none; }
  .carte-acces { padding-block: 1.5rem 1.7rem; }
  .onglets { margin-bottom: 1.2rem; }
}

/* Tres bas — 1366 x 768, ou une fenetre a demi repliee. La carte porte deja
   le mot-symbole dans son en-tete : l'enseigne devient superflue. */
@media (max-height: 700px) {
  .porte { padding-block: 1.1rem; }
  .porte__enseigne .marque__symbole,
  .porte__enseigne .marque__baseline { display: none; }
  .porte__enseigne { margin-bottom: .9rem; }
}

.carte-acces {
  background: var(--papier);
  border-radius: 14px;
  box-shadow: var(--ombre-haute);
  padding: 1.6rem clamp(1.1rem, 3.5vw, 2.1rem) 1.7rem;
}

/* Dans la carte, tout est resserre : c'est le seul endroit du site ou la
   hauteur est comptee. Les boutons du reste du site gardent leur respiration. */
.carte-acces .bouton { padding: .72rem 1.4rem; }

.carte-acces__tete {
  display: flex; align-items: center; gap: .8rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--trait);
  margin-bottom: 1.2rem;
}
.carte-acces__tete .langue { margin-left: auto; }
.carte-acces__jeton {
  background: var(--degrade);
  border-radius: 8px;
  padding: 7px;
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.carte-acces__jeton svg { width: 26px; color: #FFFFFF; }
.carte-acces__tete .marque__mot { font-size: 1.42rem; letter-spacing: .26em; }

/* Onglets « Creer mon acces » / « Se connecter » */
.onglets {
  display: flex; gap: .35rem;
  background: var(--papier-chaud);
  padding: .3rem; border-radius: 9px;
  margin-bottom: 1.6rem;
}
.onglets button {
  flex: 1;
  font: 500 .86rem/1 var(--texte);
  color: var(--encre-douce);
  background: transparent;
  border: 0; border-radius: 7px;
  padding: .6rem .5rem;
  cursor: pointer;
}
.onglets button[aria-selected="true"] {
  background: var(--papier);
  color: var(--prune);
  box-shadow: 0 1px 3px rgba(43, 43, 47, .12);
}

.volet[hidden] { display: none; }

/* ------------------------- Page de decision ---------------------------- */
/* Ecran interne, atteint depuis le courriel : ouvrir ou refuser un acces. */

.decision__titre {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .04em;
  font-size: 1.3rem;
  color: var(--prune);
  margin: 0 0 1rem;
}
.decision__texte {
  font-size: .9rem;
  color: var(--encre-douce);
  margin: 0 0 1rem;
}
.decision__texte--petit { font-size: .8rem; color: var(--gris); margin-top: 1rem; }

.decision__fiche {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: .4rem 1rem;
  margin: 0 0 1.4rem;
  padding: 1rem 1.1rem;
  background: var(--papier-chaud);
  border: 1px solid var(--trait);
  border-radius: 9px;
  font-size: .88rem;
}
.decision__fiche dt {
  font-family: var(--display);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris);
  align-self: center;
}
.decision__fiche dd { margin: 0; color: var(--encre); }

/* ------------------------------ Formulaires ----------------------------- */

.grille-champs { display: grid; gap: .8rem .85rem; grid-template-columns: 1fr 1fr; }
.grille-champs > .pleine { grid-column: 1 / -1; }
@media (max-width: 30rem) { .grille-champs { grid-template-columns: 1fr; } }

.champ { display: flex; flex-direction: column; gap: .26rem; }

.champ label,
.groupe-radio__titre {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--encre-douce);
}
.champ label .requis { color: var(--prune); }

/* La contrainte du champ, posee dans le libelle plutot qu'en dessous : elle
   n'y coute aucune ligne supplementaire. */
.champ label small {
  font-weight: 400;
  font-size: .92em;
  color: var(--gris);
  letter-spacing: 0;
}

.champ input,
.champ select {
  font: 400 .92rem/1.35 var(--texte);
  color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: 8px;
  padding: .52rem .7rem;
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.champ input::placeholder { color: var(--gris); opacity: .8; }
.champ input:focus,
.champ select:focus {
  outline: 0;
  border-color: var(--prune);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--prune) 16%, transparent);
}
.champ input[aria-invalid="true"] { border-color: #B3261E; }

.groupe-radio { grid-column: 1 / -1; }
.groupe-radio__options { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .42rem; }
.groupe-radio input { position: absolute; opacity: 0; pointer-events: none; }
.groupe-radio label {
  font: 400 .84rem/1 var(--texte);
  color: var(--encre-douce);
  border: 1px solid var(--trait);
  border-radius: 20px;
  padding: .42rem .8rem;
  cursor: pointer;
  transition: .15s;
}
.groupe-radio input:checked + label {
  border-color: var(--prune);
  background: color-mix(in srgb, var(--prune) 8%, transparent);
  color: var(--prune);
  font-weight: 500;
}
.groupe-radio input:focus-visible + label { outline: 2px solid var(--prune); outline-offset: 2px; }

.engagement {
  grid-column: 1 / -1;
  display: flex; gap: .6rem; align-items: flex-start;
  font-size: .74rem; line-height: 1.45;
  color: var(--encre-douce);
  background: var(--papier-chaud);
  border: 1px solid var(--trait);
  border-radius: 9px;
  padding: .6rem .75rem;
}
.engagement input {
  margin-top: .22rem; flex: 0 0 auto;
  accent-color: var(--prune);
  width: 16px; height: 16px;
}

/* ------------------ Le questionnaire, en trois etapes ------------------- */
/* Onze champs d'un seul tenant faisaient un mur, et la carte debordait de
   l'ecran. Chaque etape tient desormais sans defilement. Sans JavaScript, les
   trois s'affichent a la suite et le formulaire s'envoie d'un coup. */

.etape {
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0;  /* sinon un fieldset refuse de retrecir en grille */
  min-height: 10.5rem; /* evite que la carte saute d'une etape a l'autre */
}
@media (max-height: 700px) { .etape { min-height: 9.5rem; } }
.etape[hidden] { display: none; }

.etape__titre {
  font-family: var(--display);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--prune);
  padding: 0;
  margin-bottom: 1rem;
}

.progression { margin: -.4rem 0 1.5rem; }
.progression__piste {
  height: 3px;
  border-radius: 2px;
  background: var(--trait);
  overflow: hidden;
}
.progression__piste span {
  display: block;
  height: 100%;
  width: 33%;
  background: var(--prune);
  border-radius: 2px;
  transition: width .28s cubic-bezier(.2, .7, .3, 1);
}
.progression__texte {
  margin: .5rem 0 0;
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--gris);
}

.navigation {
  display: flex;
  gap: .7rem;
  margin-top: 1.2rem;
}
.navigation [data-suivant],
.navigation [data-envoyer] { flex: 1; }
.navigation [hidden] { display: none; }

/* Piege a robots : invisible pour l'humain, tentant pour le script. */
.leurre { position: absolute; left: -9999px; opacity: 0; height: 0; }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: 500 .95rem/1 var(--texte);
  letter-spacing: .04em;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: .85rem 1.6rem;
  cursor: pointer;
  text-decoration: none;
  transition: .16s;
}
.bouton--plein { background: var(--prune); color: #FFFFFF; }
.bouton--plein:hover { background: var(--prune-fonce); color: #FFFFFF; }
.bouton--plein:disabled { opacity: .55; cursor: progress; }
.bouton--large { width: 100%; margin-top: 1.6rem; }
.bouton--contour { border-color: var(--trait); color: var(--encre); background: var(--papier); }
.bouton--contour:hover { border-color: var(--prune); color: var(--prune); }

/* Acces annonce mais pas encore ouvert. Il reste lisible — il dit ce qui
   existera — mais ne se comporte plus comme un bouton. L'infobulle porte
   la mention. */
.bouton--inactif,
.bouton--inactif:hover {
  cursor: not-allowed;
  opacity: .42;
  background: var(--papier);
  border-color: var(--trait);
  color: var(--encre-douce);
}
.bouton--inactif.bouton--plein,
.bouton--inactif.bouton--plein:hover {
  background: var(--prune);
  border-color: transparent;
  color: #FFFFFF;
}

.message { border-radius: 8px; padding: .8rem 1rem; font-size: .88rem; margin-top: 1.2rem; }
.message--erreur { background: #FDECEA; color: #8C1D18; border: 1px solid #F4C7C3; }
.message--succes { background: #E8F3EC; color: #1B5E3A; border: 1px solid #BFE0CC; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .message--erreur { background: #3A1614; color: #F2B8B5; border-color: #5B211E; }
  :root:not([data-theme="light"]) .message--succes { background: #12301F; color: #A8D9BC; border-color: #1E4A31; }
}

.porte__pied {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem 1.4rem;
  text-align: center;
  margin-top: 1.6rem;
  font-size: .78rem;
  color: rgba(255, 255, 255, .72);
}
.porte__pied a { color: rgba(255, 255, 255, .92); }

/* ------------------------------- Le seuil -------------------------------
   La page d'accueil du domaine : la marque, et le choix de la langue. Elle
   n'a pas de carte a loger, donc rien a rogner — on rend a l'enseigne ce que
   la page de connexion lui retire sur les ecrans bas. */

/* L'enseigne est ici la page entiere : elle porte donc la moitie en plus de
   ce qu'elle mesure sur la page de connexion, ou une carte lui dispute la
   hauteur. Les bornes basses des clamp restent en deca de ce rapport : a
   320 px de large, SMARTACUS deborderait sinon de son ecran. */
.porte--seuil .porte__enseigne { margin-bottom: 3.4rem; }
.porte--seuil .marque { gap: 1.05rem; }
.porte--seuil .marque__symbole,
.porte--seuil .marque__baseline { display: block; }
.porte--seuil .marque__symbole { width: clamp(100px, 16.5vw, 156px); }
.porte--seuil .marque__mot { font-size: clamp(1.7rem, 8vw, 4.35rem); }
.porte--seuil .marque__filet { display: block; width: min(30rem, 78vw); }
.porte--seuil .marque__baseline {
  letter-spacing: .22em;
  font-size: clamp(.72rem, 1.95vw, 1.17rem);
}
/* Le cadre de la page de connexion fait 33 rem — la largeur d'une carte de
   formulaire. Sur le seuil, le mot SMARTACUS a sa taille pleine en mesure 36 :
   la marque debordait donc de 48 px vers la droite, et se retrouvait decalee
   de 24 px du centre, tandis que les drapeaux, eux, restaient centres. Le
   cadre s'elargit ici pour contenir la marque. */
.porte--seuil .porte__contenu { max-width: min(48rem, 100%); }

.seuil {
  display: flex;
  justify-content: center;
  gap: .8rem;
  flex-wrap: wrap;
}

/* Les deux liens sont de meme taille : le site ne pousse ni l'une ni l'autre
   des deux langues. Le drapeau porte le choix, le mot le confirme. */
.seuil__langue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  padding: .575rem .85rem;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 7px;
  background: rgba(255, 255, 255, .08);
  color: #FFFFFF;
  text-decoration: none;
  font-family: var(--display);
  font-size: .95rem;
  letter-spacing: .04em;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.seuil__langue .drapeau {
  width: 47px; height: auto;
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
}
.seuil__langue:hover,
.seuil__langue:focus-visible {
  background: rgba(255, 255, 255, .17);
  border-color: rgba(255, 255, 255, .55);
  transform: translateY(-2px);
}

@media (max-width: 26rem) {
  .seuil__langue { padding: .475rem .65rem; }
  .seuil__langue .drapeau { width: 39px; }
}

@media (prefers-reduced-motion: reduce) {
  .seuil__langue { transition: none; }
  .seuil__langue:hover, .seuil__langue:focus-visible { transform: none; }
}

/* -------------------------- Pages protegees ----------------------------- */

/* Le cadre en degrade de la maquette d'accueil. */
.cadre {
  min-height: 100dvh;
  background: var(--degrade);
  padding: 7px;
}
.cadre__interieur {
  background: var(--papier);
  min-height: calc(100dvh - 14px);
  display: flex; flex-direction: column;
}

/* La barre suit le defilement : sur le pitch ou la valorisation, qui font
   plusieurs ecrans, le retour a l'ecosysteme et la deconnexion doivent rester
   sous la main sans avoir a remonter.
   Le fond est opaque, sinon le texte de la page defilerait au travers. */
.barre {
  position: sticky; top: 0; z-index: 40;
  background: var(--papier);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 1.1rem clamp(1rem, 3.5vw, 2.6rem);
  /* Un filet qui n'apparait qu'une fois la barre decollee du haut de page. */
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.barre.est-collee {
  border-bottom-color: var(--trait);
  box-shadow: 0 4px 14px rgba(43, 43, 47, .05);
}

/* Une ancre au-dessus de la barre reste lisible : sans cela, un lien du
   sommaire amenerait le titre vise juste dessous, a moitie couvert. */
.doc [id] { scroll-margin-top: 5.5rem; }
/* Dans la barre, le bouton se met a la taille du selecteur de langue : les
   deux se regardent, et un bouton deux fois plus haut que son voisin tirait
   l'oeil vers un retour en arriere plutot que vers la page.

   26 px de haut, exactement comme la bascule depuis que ses drapeaux ont
   maigri. Les deux commandes de la barre sont sur la meme ligne d'horizon. */
.barre .bouton {
  font-size: .82rem;
  padding: .32rem .85rem;
  border-radius: 20px;
}

.barre__droite { display: flex; align-items: center; gap: 1rem; margin-left: auto; font-size: .82rem; }

/* Il ne reste que deux blocs — les drapeaux et la deconnexion — et ils
   tiennent cote a cote. Seul « Se deconnecter » demande a ne pas etre coupe
   en deux lignes. */
/* A 375 px, le bouton, les drapeaux et la deconnexion ne tiennent sur une
   ligne qu'a condition de resserrer les ecarts : sans cela la barre se plie en
   deux et double de hauteur pour trois elements courts. */
@media (max-width: 34rem) {
  .barre { gap: .5rem; padding-inline: .8rem; }
  .barre .bouton { padding: .32rem .65rem; }
  .barre__droite { gap: .55rem; }
  /* :only-child — donc la vitrine, la seule page sans bouton a gauche. La
     langue y prend la place laissee libre et la deconnexion reste a droite.
     Ailleurs le bouton occupe deja la gauche : le bloc garde sa largeur
     naturelle et les trois tiennent sur une ligne. Etire partout, il poussait
     la deconnexion sur une seconde ligne des qu'un bouton etait la. */
  .barre__droite:only-child { width: 100%; }
  .barre__droite:only-child > .langue { margin-right: auto; }
  .barre__droite .lien-discret { white-space: nowrap; }
}

/* Bascule de langue en drapeaux. La langue courante est nette et cernee ;
   l'autre est en retrait. Pas d'aplat de couleur derriere un drapeau : il en
   fausserait la lecture. */
.langue {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .18rem;
  border: 1px solid var(--trait);
  border-radius: 20px;
}
/* Le drapeau est dessine a 26 px de large dans le balisage ; ici il descend a
   21, pour que la bascule cesse de depasser le bouton voisin. La page d'entree
   garde les siens en grand : c'est la qu'on choisit sa langue. */
.langue .drapeau { width: 21px; height: auto; }
.langue > a,
.langue > span {
  display: inline-flex;
  padding: .24rem .34rem;
  border-radius: 11px;
  line-height: 0;
  text-decoration: none;
  transition: opacity .15s, box-shadow .15s;
}
.langue > a { opacity: .45; }
.langue > a:hover { opacity: 1; }
.langue > [aria-current="true"] {
  opacity: 1;
  box-shadow: inset 0 0 0 1.5px var(--prune);
}
.drapeau {
  display: block;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(43, 43, 47, .18);
}

.lien-discret { color: var(--gris); text-decoration: none; }
.lien-discret:hover { color: var(--prune); text-decoration: underline; }

.contenu { flex: 1; }
.colonne { max-width: var(--colonne); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }

.pied {
  border-top: 1px solid var(--trait);
  padding: 1.6rem clamp(1rem, 4vw, 2.6rem);
  font-size: .78rem;
  color: var(--gris);
  /* Centre, et centre aussi quand la ligne se replie sur telephone :
     justify-content place les blocs, text-align rattrape le dernier. */
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  align-items: center; justify-content: center; text-align: center;
}
/* La barre qui separe les mentions. En pseudo-element : elle n'existe pas dans
   le texte, un lecteur d'ecran ne l'annonce donc pas, et elle ne se met pas
   devant la premiere mention. */
.pied > * + *::before {
  content: "|";
  color: var(--trait);
  margin-left: -.7rem;    /* la barre se pose au milieu de l'intervalle */
  margin-right: .7rem;
}

/* Conservee pour la page non referencee du prompt, qui a son propre pied. */
.pied__confidentiel {
  font-family: var(--display);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .68rem;
  color: var(--prune);
}

/* ------------------------------- Accueil -------------------------------- */

.enseigne { text-align: center; padding: clamp(1rem, 4vw, 2.6rem) 0 0; }

/* La signature sous la marque et la mission entre les deux cadres partagent
   la meme voix : c'est la seule de la page qui parle a la premiere personne. */
.enseigne__phrase,
.mission {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.08rem, 2.4vw, 1.5rem);
  line-height: 1.5;
  color: var(--encre-douce);
}
.enseigne__phrase { max-width: 44rem; margin: 2.6rem auto 0; }
/* Plus longue que la signature : un peu plus de largeur, sinon elle se dresse
   en colonne entre deux cadres qui, eux, s'etendent. */
.mission-bloc {
  margin: clamp(2.6rem, 5vw, 3.6rem) auto;
  text-align: center;
  /* Cible de l'ancre #mission, ou l'on arrive apres s'etre identifie : sans
     cette marge, la barre collante recouvrirait le titre. */
  scroll-margin-top: 5.5rem;
}
.mission { max-width: 52rem; margin: 0 auto; text-wrap: pretty; }

/* La signature, sous la phrase : le nom porte, la fonction explique. Le filet
   court les separe du texte sans faire de trait de niveau — il ne s'agit pas
   d'un nouveau rang, seulement de savoir qui parle. */
.mission__signature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  margin: 1.6rem 0 0;
}
.mission__signature::before {
  content: "";
  width: 2.2rem; height: 1px;
  background: var(--trait);
  margin-bottom: 1rem;
}
.mission__nom {
  font-family: var(--display);
  font-size: .95rem;
  letter-spacing: .06em;
  color: var(--prune);
  /* Un lien qui ne se souligne qu'au survol : la signature reste une
     signature, mais elle mene quelque part pour qui veut savoir qui signe. */
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .16s;
}
.mission__nom:hover,
.mission__nom:focus-visible { border-bottom-color: var(--prune); }
.mission__role {
  font-family: var(--display);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gris);
}

/* L'invitation a lire le pitch ferme le bloc : on la propose apres avoir
   montre ce qu'il y a a lire. */
/* Quatre boutons cote a cote : le pitch en premier, plein ; les trois autres
   en contour. Sur telephone ils passent les uns sous les autres. */
.ecosysteme__action {
  display: flex; justify-content: center; margin: 1.7rem auto 0;
  gap: .8rem; flex-wrap: wrap;
  max-width: 52rem;   /* cinq boutons : Pitch, Historique, Actif, Galerie, Actualites */
}
/* Ils partagent la largeur a parts egales : aucun ne prend le pas sur les
   autres du seul fait que son libelle est plus long. */
.ecosysteme__action .bouton { flex: 1 1 8rem; }

.etiquette {
  font-family: var(--display);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--prune);
  margin: 0 0 .6rem;
}

/* Les titres de rang : centres, en capitales, prune. Pas de filet — il tirait
   l'oeil vers la droite au lieu du centre. Le retrait compense l'espacement de
   la derniere lettre, sans quoi le titre paraitrait decale d'un demi-caractere
   vers la gauche. */
.titre-rang {
  display: flex; align-items: center; justify-content: center;
  margin: clamp(2.6rem, 5vw, 3.6rem) 0 1rem;
}
/* Dans un bloc, la marge haute revient au bloc lui-meme. */
.ecosysteme .titre-rang,
.opportunite .titre-rang,
.mission-bloc .titre-rang { margin-top: 0; margin-bottom: 1.3rem; }

.titre-rang h2 {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: .16em;
  text-indent: .16em;
  text-transform: uppercase;
  font-size: 1.3rem;
  color: var(--prune);
  margin: 0;
  /* Le flex centre le bloc, pas ses lignes : sans cela, un titre qui passe a
     la ligne sur un telephone se retrouve cale a gauche. */
  text-align: center;
}


/* ====================== L'ecosysteme : cinq tuiles ======================= */
/* Les cinq briques au meme niveau, WWH compris. Chaque tuile porte en tete la
   NATURE de la brique, sous forme d'onglet — le logo dit deja qui. Un clic
   ouvre la fiche en dessous ; la rangee ne bouge pas.
   Sans JavaScript, les cinq fiches s'affichent a la suite. */

/* Le bloc est pose sur un fond : sans lui, blanc sur blanc, il flottait au
   milieu de la page sans rien accrocher. */
.ecosysteme {
  margin-top: clamp(2.6rem, 5vw, 3.6rem);
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--prune) 7%, var(--papier)) 0%,
              color-mix(in srgb, var(--prune) 3%, var(--papier)) 100%);
  border: 1px solid color-mix(in srgb, var(--prune) 16%, var(--papier));
  border-radius: 16px;
  /* La marge laterale vaut la moitie de la verticale : les cinq vignettes
     gagnent cette largeur, et le mot-symbole du CRM cesse de frôler son bord. */
  padding: clamp(1.4rem, 3.5vw, 2.4rem) clamp(.7rem, 1.75vw, 1.2rem);
}


/* minmax(0, 1fr) et non 1fr — le meme piege que sur la page Pitch.

   Une colonne 1fr refuse par defaut de devenir plus etroite que son contenu.
   Le mot-symbole du CRM, insecable, poussait sa colonne a 183 px et le logo de
   Rock Around Siam la sienne a 168, quand les trois autres tenaient dans 147 :
   cinq cartouches de trois largeurs differentes sur une rangee qui doit se
   lire d'un trait. Avec minmax(0, ...) les cinq colonnes se partagent la
   largeur a egalite. */
.tuiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8rem; }
@media (max-width: 62rem) { .tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


.tuile {
  display: flex; flex-direction: column; align-items: center;
  padding: 0 0 1rem;
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  cursor: pointer; text-align: center;
  font: inherit; color: inherit;
  overflow: hidden;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.tuile:hover:not([aria-selected="true"]) { border-color: var(--prune); transform: translateY(-2px); }

/* Le bandeau d'onglet, qui se colore pour la tuile selectionnee. */
.tuile__onglet {
  width: 100%; min-height: 2.5rem;
  display: grid; place-items: center;
  padding: .5rem .6rem;
  background: var(--papier);
  border-bottom: 1px solid var(--trait);
  font-size: .72rem; font-weight: 600; line-height: 1.28;
  color: var(--encre-douce);
  transition: background .16s, color .16s;
}

/* Le corps s'etire dans la vignette, et le cartouche s'etire dans le corps.

   Sans ces deux consignes, rien n'etait etire : chaque cartouche prenait la
   largeur de son contenu, et l'on avait cinq cartouches de trois largeurs
   differentes — 147 px pour Siamnity et WWH, 168 pour Rock Around Siam, 183
   pour le CRM et son mot-symbole insecable. Le width: 100% du cartouche ne
   pouvait rien y faire : dans une colonne qui n'etire pas, il se resout contre
   une largeur elle-meme deduite du contenu. */
.tuile__corps {
  display: flex; flex-direction: column; align-items: stretch; gap: 1.4rem;
  align-self: stretch;
  padding: 1rem .7rem 0;
}

/* Le cartouche gagne en hauteur et le logo s'y etend jusqu'aux bords.

   Il etait bride a 68 px dans une boite de 78 : un logo trapu comme celui de
   Rock Around Siam (600 x 407) n'occupait alors que 60 % de la largeur, et
   Siamnity (400 x 386) moins de la moitie — tandis que Travel Designer
   (435 x 111), tres allonge, butait sur la largeur et paraissait plein. Les
   trois se ressemblaient mal. */
.tuile__plaque { height: 96px; width: 100%; display: grid; place-items: center; }
/* La borne est en PIXELS, pas en pourcentage : imbriquee dans une grille
   elle-meme posee dans une colonne flexible, une hauteur en pourcentage ne se
   resout pas, et l'image debordait de son cartouche — Siamnity a 160 % de la
   hauteur de sa boite. 86 px, c'est le cartouche moins ses marges. */
.tuile__plaque img { max-width: 100%; max-height: 86px; width: auto; height: auto; }
/* Rock Around Siam et Siamnity sont trapus : bornes en hauteur, ils remplissaient
   leur cartouche mais pesaient lourd a cote des deux logos allonges. Ils sont
   descendus de 86 px a 69, puis a 62 — un cinquieme, puis un dixieme de plus.
   Travel Designer n'est pas concerne : il bute sur la largeur, pas sur la
   hauteur. */
.tuile__plaque:not(.tuile__plaque--sombre):not(.tuile__plaque--marque) img {
  max-height: 62px;
}
/* Les briques que l'on ne regarde pas s'effacent d'un cran. */
.tuile:not([aria-selected="true"]) .tuile__plaque { opacity: .72; transition: opacity .16s; }
.tuile:hover .tuile__plaque { opacity: 1; }
/* Exactement le noir du bandeau Travel Designer, releve dans l'image. */
/* Deux logos vivent dans une plaque coloree — le noir de Travel Designer, le
   degrade du CRM. Les trois autres flottaient sur le blanc de la vignette :
   la rangee melangeait des logos encadres et des logos nus. Un filet gris les
   met tous dans le meme ecrin. */
/* Le retrait interieur est le meme pour les cinq : ils avaient chacun le sien
   — .3/.4 pour les cartouches nus, .4/.6 pour Travel Designer, .5/.7 pour le
   CRM — et le logo n'etait pas cale de la meme facon d'une brique a l'autre. */
.tuile__plaque { padding: .4rem .55rem; border-radius: 6px; }
.tuile__plaque:not(.tuile__plaque--sombre):not(.tuile__plaque--marque) {
  border: 1px solid var(--trait);
}
/* Les trois cartouches sans fond etaient des rectangles blancs dans un bloc
   deja teinte : ils faisaient trou. Chacun prend une teinte tres diluee de la
   palette de sa marque — l'or de Rock Around Siam, le rouge de Siamnity, le
   prune du monogramme WWH. Assez pour combler le blanc, assez peu pour que le
   logo garde ses couleurs. */
/* L'or de la marque, #A8893F, est un or olive : dilue a 10 % il ne laisse que
   trois points d'ecart entre le rouge et le vert, et le fond tire au jaune-vert.
   Un ambre plus chaud en donne le double, et le cartouche prend la lumiere
   doree qu'on attend. Le logo, lui, garde son or d'origine. */
.tuile__plaque--ras { background: color-mix(in srgb, #C08A2E 14%, var(--papier)); }
.tuile__plaque--sia { background: color-mix(in srgb, #E53532  7%, var(--papier)); }
.tuile__plaque--wwh { background: color-mix(in srgb, var(--prune) 8%, var(--papier)); }

.tuile__plaque--sombre { background: #0B0B0B; }
.tuile__plaque--marque { background: var(--degrade); }

/* Une seule ligne : au-dela, la rangee se desaligne. */
.tuile__etat {
  font-family: var(--display); font-size: .58rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--gris);
  white-space: nowrap;
}

/* A deux colonnes, la tuile fait 135 px et la mention d'etat 168 px : tenue sur
   une seule ligne elle deborde et se fait couper des deux cotes. Elle passe
   donc a la ligne, et resserre son interlettrage pour tenir en deux. Cette
   regle doit rester APRES celle du dessus, sinon le nowrap la reprend. */
@media (max-width: 34rem) {
  .tuile__etat { white-space: normal; letter-spacing: .03em; line-height: 1.3; }
}

.tuile[aria-selected="true"] {
  border-color: var(--prune);
  box-shadow: 0 10px 26px rgba(104, 55, 85, .22);
  transform: translateY(-3px);
}
/* Prune plein : une teinte discrete ne se voyait pas a distance de lecture. */
.tuile[aria-selected="true"] .tuile__onglet {
  background: var(--prune);
  border-bottom-color: var(--prune);
  color: #FFFFFF;
}
.tuile[aria-selected="true"] .tuile__etat { color: var(--prune); }

/* La marque provisoire de WWH, en attendant la definitive. */
.logo-wwh { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.logo-wwh b {
  font-family: var(--display); font-weight: 300; letter-spacing: .16em;
  font-size: 2.1rem; color: var(--prune); line-height: 1;
}
.logo-wwh i {
  font-family: var(--display); font-style: normal; font-size: .54rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gris);
}

.plaque-crm { display: flex; align-items: center; gap: .5rem; color: #FFFFFF; }
/* Le symbole ne doit jamais se laisser comprimer par le mot : sans cette
   consigne, le texte insecable l ecrasait a zero. */
.plaque-crm svg { width: 26px; flex: 0 0 auto; }
/* Le logo officiel, sans son filet ni sa baseline : le symbole, le mot, puis
   CRM accole en gras. */
.plaque-crm span {
  font-family: var(--display); font-weight: 300;
  letter-spacing: .16em; font-size: .85rem;
  white-space: nowrap;
}
.plaque-crm b { font-weight: 600; }

/* Sur un telephone la tuile fait 135 px ; le mot-symbole du CRM en fait 161 et
   elargissait toute la tuile, ce qui coupait aussi la mention d'etat en
   dessous. Il se resserre donc, plutot que de dicter sa largeur au reste. */
@media (max-width: 34rem) {
  .plaque-crm { gap: .3rem; }
  .plaque-crm svg { width: 18px; }
  .plaque-crm span { font-size: .56rem; letter-spacing: .07em; }
  .tuile__plaque--marque { padding: .4rem .45rem; }
}

/* Sur un telephone, deux colonnes donnent des tuiles de 135 px : chaque titre
   passe sur deux lignes, la mention d'etat aussi, et la cinquieme brique reste
   seule sur sa rangee. Une seule colonne, mais couchee — la plaque a gauche, le
   texte a droite — rend a chacune toute la largeur et supprime l'orpheline.
   La tuile devient une ligne de liste, ce qu'elle est deja par nature. */
@media (max-width: 30rem) {
  .tuiles { grid-template-columns: 1fr; gap: .55rem; }

  /* La tuile se couche : la plaque tient la colonne de gauche sur toute la
     hauteur, le titre et la mention d'etat s'empilent a droite. */
  .tuile {
    display: grid;
    /* 7,75 rem et non 6 : le mot-symbole du CRM fait 108 px et se faisait
       couper. La colonne vaut pour les cinq vignettes, sinon leurs titres ne
       s'aligneraient plus les uns sous les autres. */
    /* La colonne du logo ne compte plus que le cartouche : le texte prend sa
       propre marge a gauche, plus bas, pour respirer apres l'ecrin. */
    grid-template-columns: 7.75rem 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    /* Les deux rangees se groupent au milieu au lieu de s'ecarter. La hauteur
       de la vignette etant fixe, le jeu qui reste allait se loger ENTRE le
       titre et son sous-titre : 23 px entre les deux textes, presque tous en
       espace vide. Une marge negative n'y pouvait pas grand-chose — c'est la
       grille qui distribuait l'espace. */
    align-content: center;
    padding: 0; text-align: left;
    /* Hauteur FIXE, et non minimale : deux titres passent sur deux lignes
       — « Voyage culturel sur mesure », « Plateforme d'audioguides » — et
       leurs vignettes depassaient les trois autres de cinq pixels. Une liste
       dont les lignes n'ont pas la meme hauteur se lit mal.

       On ne peut pas s'en remettre a grid-auto-rows sur la rangee : la fiche
       ouverte y est une rangee comme les autres, et prendrait alors la meme
       hauteur que les vignettes. */
    height: 5.9rem;
  }
  .tuile__onglet { overflow: hidden; }
  /* Le corps cesse d'etre une boite pour que ses deux enfants deviennent
     eux-memes des cases de la grille : sans cela, la mention d'etat resterait
     prisonniere sous le logo, dans une colonne trop etroite pour elle. */
  .tuile__corps { display: contents; }

  /* Couche, le cartouche touchait les bords de la vignette : la teinte partait
     du trait et le logo paraissait colle. Une marge tout autour lui rend son
     ecrin. Sur tablette et sur grand ecran, le corps de la vignette ménage
     deja cette marge. */
  .tuile__plaque {
    grid-column: 1; grid-row: 1 / 3;
    align-self: stretch;
    height: auto; min-height: 4.3rem;
    margin: .55rem;
    padding: .4rem .35rem;
  }
  /* Le plafond des deux logos trapus, sur telephone : 62 px les remplissait
     trop, ils descendent d'un cinquieme.

     LE SELECTEUR REPREND LES DEUX :not() DE LA REGLE DU BUREAU. Ecrite plus
     simplement — .tuile__plaque img — la regle etait moins specifique que
     celle du bureau et n'a jamais rien fait : le plafond reellement applique
     restait 62 px. Une requete media ne l'emporte pas sur la specificite. */
  .tuile__plaque:not(.tuile__plaque--sombre):not(.tuile__plaque--marque) img {
    max-height: 50px;
  }

  .tuile__onglet {
    grid-column: 2; grid-row: 1;
    width: auto; min-height: 0;
    place-items: end start;
    border-bottom: 0;
    padding: .74rem .8rem 0 1.15rem;
    font-size: .82rem;
  }
  /* A pleine largeur elle tient sur une ligne : on lui rend son interlettrage. */
  .tuile__etat {
    grid-column: 2; grid-row: 2;
    padding: 0 .8rem 0 1.15rem;
    white-space: nowrap; letter-spacing: .05em; line-height: 1.2;
    /* Ni marge haute sur le titre ni marge basse sur le sous-titre : elles
       empechaient la grille de centrer le couple, qui se retrouvait sept
       pixels trop haut. C'est align-content qui s'en charge.

       Cale en haut de sa rangee : sans cela il flottait au milieu, et l'ecart
       avec le titre changeait selon que celui-ci tenait sur une ou deux
       lignes — dix pixels ici, dix-neuf la. */
    align-self: start;
    justify-self: start;
  }

  /* Couchee, la tuile ne se souleve plus : le relief se lisait sur une carte,
     il ne veut plus rien dire sur une ligne de liste. C'est le filet de gauche
     qui marque desormais la brique ouverte. En accordeon la vignette n'est plus
     un onglet mais un bouton : son etat s'ecrit aria-expanded.

     Et la fiche vient se coller dessous, en occupant toute la rangee. Ses deux
     coins hauts s'ouvrent sur la vignette, pour qu'on lise un seul bloc et non
     deux objets empiles. */
  /* L onglet ne porte plus son fond : c est la vignette entiere qui se teinte,
     sinon le blanc de l onglet recouvrirait la teinte. */
  .tuile__onglet { background: transparent; }

  /* Aucune epaisseur sur la vignette ouverte : ni cadre prune, ni ombre, ni
     filet de gauche. Les cinq gardent exactement le meme trait, et c'est la
     teinte seule qui designe celle qui est ouverte. Toute epaisseur la
     faisait sortir du rang alors qu'elles doivent se lire comme une liste. */
  .tuile[aria-selected="true"],
  .tuile[aria-expanded="true"] {
    transform: none;
    border-color: var(--trait);
    box-shadow: none;
    /* Un fond prune tres dilue : assez pour distinguer la vignette ouverte des
       quatre autres d un coup d oeil, assez peu pour que le logo garde ses
       couleurs et que le titre reste lisible. */
    background: color-mix(in srgb, var(--prune) 15%, var(--papier));
  }
  .tuile[aria-selected="true"] .tuile__onglet,
  .tuile[aria-expanded="true"] .tuile__onglet { color: var(--prune); }
  /* Ouverte, elle se prolonge dans sa fiche : les deux coins du bas s effacent. */
  .tuile[aria-expanded="true"] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

  .tuiles > .fiche {
    grid-column: 1 / -1;
    margin-top: -.55rem;      /* le gap de la grille, repris : les deux se touchent */
    border-top-left-radius: 0; border-top-right-radius: 0;
  }

  /* WWH n'est pas une image mais un mot compose : a 2,1 rem il debordait de sa
     colonne et venait toucher le titre voisin. Il se met a l echelle des
     autres plaques. */
  .tuile__plaque { overflow: hidden; }
  .logo-wwh { gap: .15rem; }
  .logo-wwh b { font-size: 1.15rem; letter-spacing: .1em; }
  .logo-wwh i { font-size: .38rem; letter-spacing: .06em; }
}

/* ------------------------------- La fiche ------------------------------- */

.fiche {
  margin-top: 1.4rem;
  padding: clamp(1.2rem, 3vw, 1.9rem);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--papier);
  min-height: 15rem;
}
.fiche[hidden] { display: none; }
.fiche__etat {
  font-family: var(--display); font-size: .64rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--prune); margin: 0 0 .5rem;
}
.fiche h3 {
  font-family: var(--display); font-weight: 400; letter-spacing: .05em;
  font-size: 1.5rem; margin: 0 0 .3rem; color: var(--encre);
}
.fiche__texte { margin: 0 0 1rem; color: var(--encre-douce); font-size: .95rem; max-width: 58rem; }
/* Une brique peut porter plusieurs adresses — Siamnity en a deux. */
.fiche__liens { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 0; }
.fiche__lien { font-size: .84rem; font-weight: 500; text-decoration: none; }
.fiche__lien::after { content: " \2197"; }
.fiche__muet { font-size: .84rem; color: var(--gris); font-style: italic; }

/* Bloc video */
.bloc-video {
  margin: clamp(2.6rem, 5vw, 3.6rem) 0;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: clamp(1.4rem, 3.5vw, 2rem);
  display: flex; flex-wrap: wrap; gap: 1.4rem;
  align-items: center; justify-content: space-between;
}
.bloc-video p { margin: .35rem 0 0; font-size: .9rem; color: var(--encre-douce); max-width: 40rem; }
.bloc-video__titre {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .06em;
  font-size: 1.3rem;
  color: var(--encre);
  margin: 0;
}

/* Trois chiffres de marche */
.chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1px;
  background: var(--trait);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  overflow: hidden;
  margin-bottom: clamp(2.6rem, 5vw, 3.6rem);
}
.chiffre { background: var(--papier); padding: 1.4rem 1.3rem; }
.chiffre__valeur {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  color: var(--prune);
  line-height: 1.1;
}
.chiffre__libelle { font-size: .82rem; color: var(--encre-douce); margin-top: .35rem; }
.chiffre__source { font-size: .7rem; color: var(--gris); margin-top: .5rem; }

/* -------------------------------- Pitch --------------------------------- */

.pitch {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: 1rem 4rem;
}

/* 5,5rem : la hauteur de la barre collante, plus un peu d'air. */
.retour-sommaire { display: none; }
.sommaire { position: sticky; top: 5.5rem; align-self: start; font-size: .84rem; }

/* Sous 62 rem le sommaire passe au-dessus du document, dans le flux.

   CETTE REQUETE DOIT RESTER APRES LA REGLE CI-DESSUS. Placee avant, elle
   etait ecrasee par le position:sticky qui suivait : sur un telephone le
   sommaire restait colle en haut et le texte defilait dessous, illisible.
   Meme piege que pour les vignettes de l'accueil. */
@media (max-width: 62rem) {
  /* minmax(0, 1fr) et non 1fr, et c'est TOUTE la difference.

     Une case de grille refuse par defaut de devenir plus etroite que son
     contenu le plus large. Un tableau de six colonnes reclamant 635 px, la
     case entiere prenait 635 px, la grille aussi, et la page avec elle : les
     titres, les paragraphes et les cadres se retrouvaient tous decales vers la
     droite alors qu'aucun d'eux n'etait trop large. La disposition du bureau,
     juste au-dessus, ecrit deja minmax(0, 1fr) pour cette raison ; la version
     telephone l'avait perdu en chemin. */
  .pitch { grid-template-columns: minmax(0, 1fr); }
  /* Le sommaire etant passe au-dessus du document, un lecteur arrive au bas
     d'une section n'a plus aucun moyen d'y revenir sans remonter toute la
     page au doigt. Chaque titre porte donc son retour. Sur grand ecran le
     sommaire reste a cote du texte : le lien n'y a pas lieu d'etre, et il
     n'apparait pas. */
  .retour-sommaire {
    display: block;
    margin: -.6rem 0 1.2rem;
    text-align: left;
    font-family: var(--display);
    font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--prune); text-decoration: none;
  }
  .retour-sommaire:hover { color: var(--prune-fonce); }

  /* Le sommaire cesse d'etre une colonne a cote du texte : il devient un bloc
     en pleine largeur, pose au-dessus de l'article. Sur le blanc de la page on
     ne voyait plus ou il finissait ni ou l'article commencait. Le meme fond
     prune tres dilue que le bloc Ecosysteme de l'accueil le detache.

     Sur grand ecran il reste la colonne fine sans fond : la place qu'il occupe
     y suffit a le distinguer. */
  .sommaire {
    position: static;
    background: color-mix(in srgb, var(--prune) 7%, var(--papier));
    border: 1px solid color-mix(in srgb, var(--prune) 16%, var(--papier));
    border-radius: var(--rayon);
    padding: 1rem .95rem;
  }
}
.sommaire__titre {
  font-family: var(--display);
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gris); margin: 0 0 .8rem;
}
.sommaire ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--trait); }
.sommaire li a {
  display: block;
  padding: .34rem 0 .34rem .9rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--encre-douce);
  text-decoration: none;
}
.sommaire li a:hover { color: var(--prune); }
.sommaire li a.actif-lien { border-left-color: var(--prune); color: var(--prune); font-weight: 600; }
.sommaire__impression { margin-top: 1.4rem; }

.doc { max-width: 44rem; }
/* Les pages sans sommaire portent elles-memes leur marge verticale. */
.doc--large { max-width: 56rem; padding-block: 1rem 4rem; }
.doc--seul  { padding-block: 1rem 4rem; }
.doc__intro { margin: 0; }
.doc__actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.doc__chapeau { border-bottom: 1px solid var(--trait); padding-bottom: 1.8rem; margin-bottom: 2.2rem; }
.doc h1 {
  font-family: var(--display); font-weight: 300;
  letter-spacing: .1em; font-size: clamp(1.7rem, 4vw, 2.4rem);
  margin: .3rem 0 .6rem; color: var(--encre);
}
.doc__meta { font-size: .78rem; color: var(--gris); display: flex; flex-wrap: wrap; gap: .4rem 1rem; }

.doc h2 {
  font-family: var(--display); font-weight: 500;
  font-size: 1.3rem; letter-spacing: .02em;
  color: var(--prune);
  margin: 3rem 0 .9rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--trait);
  scroll-margin-top: 1.5rem;
}
.doc h3 { font-size: 1rem; font-weight: 600; color: var(--encre); margin: 1.9rem 0 .5rem; }
/* Quatrieme niveau — deux fois dans tout le dossier, sous le compte de
   resultat de Rock Around Siam. Sans regle il heritait du gras a la taille
   du corps, soit la livree exacte d'un h3 : on ne pouvait plus lire la
   hierarchie. Il prend celle des en-tetes de tableau, qui dit « plus bas
   qu'un sous-titre » sans ambiguite. */
.doc h4 {
  font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gris); font-weight: 600; margin: 1.7rem 0 .5rem;
}
/* <small> se calcule en em : dans un paragraphe deja reduit sur telephone,
   il tombait a 10,5 px. Une taille absolue lui donne un plancher. */
.doc small { font-size: .78rem; color: var(--gris); }
.doc p { margin: 0 0 1rem; color: var(--encre-douce); }
.doc p.accroche { font-family: var(--serif); font-style: italic; font-size: 1.14rem; color: var(--encre); }
.doc ul { padding-left: 1.15rem; color: var(--encre-douce); }
.doc li { margin-bottom: .55rem; }
.doc strong { color: var(--encre); font-weight: 600; }
.doc .url { font-size: .82rem; color: var(--gris); display: block; margin: -.5rem 0 1.4rem; }

.doc table { width: 100%; border-collapse: collapse; font-size: .88rem; margin: 1rem 0 1.6rem; }
.doc th, .doc td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--trait); vertical-align: top; }
.doc th { font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--gris); font-weight: 600; }

/* Sur un telephone, sept des trente et un tableaux du dossier ne peuvent pas
   se comprimer assez : celui des methodes de valorisation, a six colonnes,
   reclame 635 px la ou l'ecran en offre 343. Un tableau de chiffres ne se
   replie pas — on ne peut ni couper « 1 077 474 » ni empiler des colonnes qui
   se comparent.

   Il defile donc lui-meme, au doigt, au lieu de pousser toute la page vers la
   droite. Le corps du tableau se resserre aussi d'un cran, ce qui suffit a en
   faire tenir plusieurs sans defilement du tout. */
@media (max-width: 62rem) {
  .doc table {
    display: block;
    width: 100%;
    overflow-x: auto;
    font-size: .76rem;
  }
  .doc th, .doc td { padding: .5rem .55rem; }
}

/* Trou dans le dossier : une donnee qui manque ou une verification qui n'a pas
   ete faite. Chaque marqueur doit finir par disparaitre, remplace par le
   chiffre reel.

   A reserver aux vrais trous. Une projection est une hypothese par nature :
   on le dit une fois en tete de chapitre, on ne surligne pas chacune de ses
   valeurs — une page entierement ambre ne se lit plus comme honnete, elle se
   lit comme inachevee. */
.tbd {
  background: var(--ambre-fond);
  color: var(--ambre);
  border-radius: 4px;
  padding: 0 .32em;
  /* Pas de font-size ici : un surlignage marque une donnee, il ne change
     pas sa taille. Le .93em qui s'y trouvait rendait chaque valeur en
     ambre plus petite que la phrase qui la porte. */
  font-weight: 500;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.avis {
  border: 1px solid var(--trait);
  border-left: 3px solid var(--or);
  background: var(--papier-chaud);
  border-radius: var(--rayon);
  padding: 1rem 1.2rem;
  font-size: .86rem;
  color: var(--encre-douce);
  margin-bottom: 2rem;
}
.avis strong { color: var(--encre); }

/* -------------------------------- Video --------------------------------- */

.scene {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--rayon);
  overflow: hidden;
  border: 1px solid var(--trait);
  background: #0E0E10;
  margin-bottom: 1rem;
}
.scene iframe, .scene video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.etapes { counter-reset: etape; list-style: none; padding: 0; margin: 0; }
.etapes > li { counter-increment: etape; position: relative; padding-left: 3rem; margin-bottom: 1.6rem; }
.etapes > li::before {
  content: counter(etape);
  position: absolute; left: 0; top: -.1rem;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border: 1px solid var(--trait);
  border-radius: 50%;
  font-family: var(--display);
  font-size: .85rem;
  color: var(--prune);
}
.etapes h3 { margin: .1rem 0 .35rem; }

.plan { width: 100%; border-collapse: collapse; font-size: .86rem; }
.plan th, .plan td { padding: .6rem .7rem; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: top; }
.plan th { font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; color: var(--gris); }
.plan td:first-child { font-family: var(--display); color: var(--prune); white-space: nowrap; }

/* ------------------------------ Impression ------------------------------ */

@media print {
  .cadre { background: none; padding: 0; }
  .barre, .pied, .sommaire, .actions-tete, .avis { display: none; }
  .doc { max-width: none; }
  .doc h2 { break-after: avoid; }
  body { font-size: 11pt; color: #000; }
  a { color: #000; text-decoration: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms; transition-duration: .01ms; }
  html { scroll-behavior: auto; }
}

/* Le prompt de valorisation, servi tel quel sur une page non referencee.
   Il doit pouvoir etre selectionne et recopie sans perte de mise en forme. */
.prompt-brut {
  font: 400 .82rem/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: 4px;
  padding: 1.4rem 1.5rem;
  color: var(--encre-douce);
  overflow-x: auto;
}

/* ------------------------------- Galerie -------------------------------- */

.gal__titre { margin: 0; }
.gal__intro { color: var(--encre-douce); max-width: 44rem; margin: .7rem 0 0; }

/* Le formulaire de depot, visible du seul titulaire. */
.gal-depot {
  background: var(--papier-chaud);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 1.2rem 1.3rem;
  margin: 1.8rem 0 2.2rem;
}
.gal-depot__champs {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 1.4fr) auto;
  gap: .9rem;
  align-items: end;
}
/* Ici .champ est lui-meme le label : le libelle est un span. */
.gal-depot .champ__libelle {
  font-size: .76rem; font-weight: 600; letter-spacing: .04em;
  color: var(--encre-douce);
}
.gal-depot input[type="file"] {
  font: 400 .84rem/1.35 var(--texte);
  color: var(--encre-douce);
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: 8px;
  padding: .42rem .5rem;
  width: 100%;
}
.gal-depot__note {
  font-size: .78rem; color: var(--gris);
  margin: .9rem 0 0; max-width: 44rem;
}

@media (max-width: 720px) {
  .gal-depot__champs { grid-template-columns: 1fr; }
}

/* Le recadrage, une planche par photo choisie.
   La fenetre garde ses proportions du format retenu et se pose en pourcentages
   de la scene : l'affichage peut changer de largeur — un telephone tourne, une
   fenetre redimensionnee — sans que le cadrage bouge d'un pixel. */
.recadres {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  align-items: start;          /* une carte ne s'etire pas a la hauteur
                                  de sa voisine : elle epouse sa photo */
  gap: 1.1rem;
  margin: 1.3rem 0 0;
}
.recadres[hidden] { display: none; }
.recadres__aide {
  grid-column: 1 / -1;
  font-size: .78rem; color: var(--gris); margin: 0;
}
.recadre {
  margin: 0;
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  overflow: hidden;
}
/* La scene epouse l'image : sans cela, la fenetre se repererait par rapport a
   une boite plus large que la photo, et le cadrage serait faux sur les bords. */
.recadre__scene {
  position: relative;
  display: block;
  line-height: 0;
  background: #14101a;
  overflow: hidden;            /* sans quoi l'ombre de la fenetre, large
                                  de 100vmax, assombrit toute la page */
}
.recadre__image {
  display: block; width: 100%; height: auto;
  -webkit-user-select: none; user-select: none; -webkit-user-drag: none;
}
/* L'ombre portee assombrit tout ce qui sera coupe, sans un element de plus. */
.recadre__fenetre {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 0 0 100vmax rgba(20, 16, 26, .58);
  cursor: grab;
  touch-action: none;          /* le glissement ne fait pas defiler la page */
}
.recadre__fenetre.est-saisie { cursor: grabbing; }
.recadre__fenetre[hidden] { display: none; }
/* Deux traits en croix : le tiers, reflexe du cadrage photo. */
.recadre__fenetre::before,
.recadre__fenetre::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-repeat: no-repeat;
}
.recadre__fenetre::before {
  background-image: linear-gradient(to right, rgba(255,255,255,.34) 1px, transparent 1px);
  background-size: 33.333% 100%;
  background-position: 33.333% 0;
}
.recadre__fenetre::after {
  background-image: linear-gradient(to bottom, rgba(255,255,255,.34) 1px, transparent 1px);
  background-size: 100% 33.333%;
  background-position: 0 33.333%;
}
.recadre__pied { padding: .6rem .7rem .7rem; }
.recadre__nom {
  margin: 0 0 .45rem;
  font-size: .74rem; color: var(--gris);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.recadre__formats { display: flex; flex-wrap: wrap; gap: .3rem; }
.recadre__formats button {
  font: 600 .72rem/1 var(--texte);
  letter-spacing: .02em;
  color: var(--encre-douce);
  background: var(--papier-chaud);
  border: 1px solid var(--trait);
  border-radius: 6px;
  padding: .38rem .52rem;
  cursor: pointer;
}
.recadre__formats button:hover { border-color: var(--prune); }
.recadre__formats button.est-actif {
  color: var(--papier); background: var(--prune); border-color: var(--prune);
}

/* La mosaique. Des colonnes CSS plutot qu'une grille : chaque photo garde ses
   proportions, et rien n'a besoin d'etre calcule au chargement. */
.mosaique {
  columns: 4 16rem;
  column-gap: 1rem;
  /* La derniere photo ne doit pas venir toucher le filet du pied de page :
     les tuiles portent deja 1rem sous elles, on complete jusqu'a 3,5rem. */
  margin: 1.4rem 0 2.5rem;
}
.mosaique__element {
  break-inside: avoid;          /* une photo ne se coupe pas entre deux colonnes */
  margin: 0 0 1rem;
  background: var(--papier);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--ombre-carte);
}
.mosaique__element img {
  display: block; width: 100%; height: auto;
  transition: opacity .2s;
}
.mosaique__element a:hover img { opacity: .88; }
.mosaique__element figcaption {
  font-size: .8rem; color: var(--encre-douce);
  padding: .6rem .75rem .7rem;
}

.gal__vide { color: var(--gris); font-style: italic; margin-top: 2rem; }
.gal__compte { font-size: .78rem; color: var(--gris); margin-top: .6rem; }

/* ----------------------------- Actualites ------------------------------- */

.actu-depot__champs { display: grid; gap: .9rem; }
.actu-depot__champs textarea {
  font: 400 .92rem/1.5 var(--texte);
  color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: 8px;
  padding: .6rem .7rem;
  width: 100%;
  resize: vertical;
}
.actu-depot__champs textarea:focus { border-color: var(--prune); outline: none; }
.actu-depot__champs .bouton { justify-self: start; }

/* Le fil. Un filet a gauche relie les messages entre eux : on voit d'un coup
   qu'il s'agit d'une suite, et non d'articles independants. */
.fil { border-left: 1px solid var(--trait); margin: 2rem 0 0; padding-left: 1.6rem; }
.fil__post { position: relative; padding-bottom: 2rem; }
.fil__post + .fil__post { border-top: 1px solid var(--trait); padding-top: 1.6rem; }

/* La pastille se pose EXACTEMENT sur le filet, et un halo blanc l'interrompt.

   Elle etait a -1,98 rem quand le filet passe a -1,6 rem moins un demi-pixel :
   deux pixels a cote, assez pour qu'on voie un trait et un point poses l'un
   pres de l'autre au lieu d'une chronologie. Le calcul est desormais ecrit,
   pas devine — si la marge du fil change, la pastille suit. */
.fil__post::before {
  content: ""; position: absolute;
  left: calc(-1.6rem - 5px); top: .4rem;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--prune);
  box-shadow: 0 0 0 3px var(--papier);
}
.fil__post + .fil__post::before { top: 2rem; }

.fil__date {
  font-family: var(--display);
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gris); margin: 0 0 .25rem;
}
.fil__titre {
  font-size: 1.18rem; font-weight: 600; color: var(--encre);
  margin: 0 0 .6rem; line-height: 1.3;
}
.fil__post p { color: var(--encre-douce); margin: 0 0 .8rem; max-width: 44rem; }

/* Le corps replie a cinq lignes. La coupe se fait sur la ligne, pas sur une
   hauteur en pixels : la breve garde le meme nombre de lignes quelle que soit
   la taille du texte ou celle de l'ecran. Le degrade du bas dit qu'il en reste,
   sans avoir a l'ecrire. */
.fil__corps.est-replie {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative;
}
.fil__corps.est-replie::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 2.2em;
  background: linear-gradient(to bottom, transparent, var(--papier));
  pointer-events: none;
}
.fil__plus {
  font: 600 .7rem/1 var(--display);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--prune); background: none;
  border: 0; padding: .2rem 0; margin: .2rem 0 .8rem;
  cursor: pointer;
}
.fil__plus::before { content: "+ "; }
.fil__plus[aria-expanded="true"]::before { content: "− "; }
.fil__plus:hover { color: var(--prune-fonce); }

/* Mention affichee sur le site anglais quand la traduction n'a pas abouti :
   le lecteur voit le francais, et sait pourquoi. */
.fil__non-traduit {
  font-size: .78rem; color: var(--ambre);
  background: var(--ambre-fond);
  border-radius: 4px; padding: .35rem .6rem;
  display: inline-block; margin: 0 0 .8rem;
}

/* Progression du depot, ajoutee par galerie.js. Sans JavaScript elle n'existe
   pas — la page n'annonce donc rien qu'elle ne puisse tenir. */
.gal-depot__etat {
  font-size: .84rem; color: var(--encre-douce);
  margin: .9rem 0 0; font-variant-numeric: tabular-nums;
}

/* --------------------------- La visionneuse ----------------------------- */
/* Construite par galerie.js. Sans JavaScript elle n'existe pas, et le lien
   de la mosaique affiche simplement l'image. */

.visionneuse {
  position: fixed; inset: 0; z-index: 2000;
  display: none; align-items: center; justify-content: center;
  background: rgba(10, 8, 14, .94);
  padding: clamp(1rem, 4vw, 3rem);
}
.visionneuse.est-ouverte { display: flex; }

.visionneuse__image {
  max-width: min(100%, 1200px);
  max-height: 88vh;
  width: auto; height: auto;
  border-radius: 4px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}

.visionneuse__fermer,
.visionneuse__fleche {
  position: fixed;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .08);
  color: #FFFFFF;
  cursor: pointer;
  display: grid; place-items: center;
  line-height: 1;
  transition: background .2s, border-color .2s;
}
.visionneuse__fermer:hover,
.visionneuse__fleche:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .55); }

.visionneuse__fermer {
  top: 1.1rem; right: 1.2rem;
  width: 42px; height: 42px; border-radius: 50%;
  font-size: 1.5rem;
}
.visionneuse__fleche {
  top: 50%; transform: translateY(-50%);
  width: 48px; height: 64px; border-radius: 6px;
  font-size: 2rem;
}
.visionneuse__fleche--gauche { left: clamp(.5rem, 2vw, 1.6rem); }
.visionneuse__fleche--droite { right: clamp(.5rem, 2vw, 1.6rem); }

/* La legende, sous l'image et au-dessus du compteur. Le titre est calcule a
   partir de l'identifiant de la photo : voir galerie_titres(). */
.visionneuse__legende {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 2.6rem;
  margin: 0; max-width: min(48rem, 88vw);
  text-align: center;
  font-size: .84rem; color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

.visionneuse__compteur {
  position: fixed; bottom: 1.1rem; left: 50%; transform: translateX(-50%);
  margin: 0;
  font-family: var(--display);
  font-size: .78rem; letter-spacing: .1em;
  color: rgba(255, 255, 255, .72);
  font-variant-numeric: tabular-nums;
}

/* Sur telephone, les fleches passent en bas : au milieu, elles couvriraient
   la photo. */
@media (max-width: 620px) {
  .visionneuse__fleche { top: auto; bottom: 1rem; transform: none; width: 56px; height: 44px; }
  .visionneuse__fleche--gauche { left: 22%; }
  .visionneuse__fleche--droite { right: 22%; }
  .visionneuse__compteur { bottom: 4.4rem; }
}

/* Le retrait d'une photo : discret, et seulement au survol de la tuile. */
.mosaique__element { position: relative; }
.mosaique__retrait { position: absolute; top: .5rem; right: .5rem; margin: 0; }
.mosaique__retrait button {
  width: 30px; height: 30px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: rgba(20, 16, 24, .62); color: #FFFFFF;
  font-size: 1.1rem; line-height: 1;
  display: grid; place-items: center;
  opacity: 0; transition: opacity .2s, background .2s;
}
.mosaique__element:hover .mosaique__retrait button,
.mosaique__retrait button:focus-visible { opacity: 1; }
.mosaique__retrait button:hover { background: #B3261E; }

/* Sur ecran tactile, il n'y a pas de survol : le bouton reste visible. */
@media (hover: none) {
  .mosaique__retrait button { opacity: .85; }

  /* Un doigt ne survole pas : apres l'appui, l'etat de survol RESTE, et la
     vignette gardait un liseré prune et un decalage d'un pixel jusqu'a ce
     qu'on touche ailleurs. On les annule tous les deux. */
  .tuile:hover:not([aria-selected="true"]) { border-color: var(--trait); transform: none; }
}

/* Les photos ne se glissent pas vers le bureau, et ne se selectionnent pas.
   Cela arrete le geste distrait ; cela n'empeche personne de determine de
   garder une image affichee a son ecran — rien ne le peut. */
.mosaique img,
.visionneuse__image {
  -webkit-user-drag: none;
  user-select: none; -webkit-user-select: none;
  pointer-events: auto;
}

/* L'essai de la cle de traduction : un lien, pas un bouton — c'est une
   verification, pas une action qui engage. */
.actu-essai { margin: -1.4rem 0 2rem; }
.actu-essai button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: 400 .82rem/1.4 var(--texte);
  color: var(--gris); text-decoration: underline;
  text-underline-offset: .18em;
}
.actu-essai button:hover { color: var(--prune); }

/* -------------------- L'opportunite d'investissement --------------------
   Son propre rang, apres l'ecosysteme. Le cadre reprend celui de l'ecosysteme
   mais un ton plus soutenu : c'est le seul endroit de la vitrine ou l'on
   demande quelque chose au visiteur. */
.opportunite {
  margin-top: clamp(2.6rem, 5vw, 3.6rem);
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--prune) 12%, var(--papier)) 0%,
              color-mix(in srgb, var(--prune) 5%, var(--papier)) 100%);
  border: 1px solid color-mix(in srgb, var(--prune) 24%, var(--papier));
  border-radius: 16px;
  padding: clamp(1.5rem, 3.5vw, 2.4rem);
  text-align: center;
}
.opportunite__amorce {
  /* Pleine largeur du cadre, comme la rangee de tuiles au dessus. */
  margin: 0;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--encre-douce);
  text-wrap: pretty;   /* evite la ligne orpheline d'un ou deux mots */
}
.opportunite__action { display: flex; justify-content: center; margin: 1.6rem 0 0; }
.opportunite__action .bouton { min-width: min(18rem, 100%); }
/* Une fois le visiteur identifie, l'appel unique laisse place aux cinq pages
   du dossier. Elles partagent la largeur a parts egales : aucune ne prend le
   pas sur les autres du seul fait que son libelle est plus long. */
.opportunite__action--menu {
  flex-wrap: wrap;
  gap: .8rem;
  /* Sept pages depuis l'ajout de Marketing. La largeur suit, sinon la
     derniere passe seule a la ligne. */
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
}
.opportunite__action--menu .bouton { flex: 1 1 8rem; min-width: 0; }

/* Sur telephone et tablette, les sept boutons du dossier prennent la taille
   des titres de vignettes — .82rem au lieu de .95. Empiles a deux par rangee,
   ils formaient sept pavés de texte plus gros que tout ce qui les entoure. */
@media (max-width: 48rem) {
  .opportunite__action--menu .bouton { font-size: .82rem; }
}

/* ------------------------- Le telephone, en propre ---------------------- */
/* Trois cadres emboites prenaient chacun sa marge : 7 px pour le liseré, 16 px
   pour la colonne, 22 px pour le bloc Ecosysteme. Sur un ecran de 375 px cela
   faisait 92 px de blanc, un quart de la largeur, et le texte tombait a 35
   caracteres par ligne — la moitie de ce qui se lit confortablement. Chacun
   des trois se resserre. */
@media (max-width: 40rem) {
  .cadre { padding: 4px; }
  /* Les deux phrases en serif — la signature sous la marque et la mission —
     touchaient les deux bords du cadre. Elles ne sont pas du corps de texte :
     on les lit lentement, et elles ont besoin de marge autour d'elles. */
  .enseigne__phrase, .mission { padding-inline: 1.2rem; }

  /* Une seule taille pour le corps du texte, mais SUR TELEPHONE SEULEMENT.
     Il se lisait ici a trois tailles selon l'endroit — .95 dans les fiches,
     .95 sous Opportunite, 1 dans le dossier — et les plus grandes prenaient
     toute la largeur pour quatre mots par ligne. Sur un grand ecran la place
     ne manque pas : ces tailles y restent celles d'origine.

     Les classes sont nommees en plus de p : une regle de classe l'emporte sur
     une regle d'element, requete media ou pas.

     Les deux phrases en serif italique gardent la leur partout : elles ne sont
     pas du corps de texte mais la voix de la page. */
  /* LA TAILLE DE REFERENCE DU CORPS DE TEXTE.

     Tout ce qui est du texte courant la prend — y compris les listes, qui
     restaient a 1rem et s'affichaient donc plus gros que le paragraphe
     qui les introduit. Une liste est du corps de texte, pas un titre. */
  p, .doc li, .fiche__texte, .opportunite__amorce { font-size: .82rem; }
  .doc small { font-size: .72rem; }

  /* Titres et sous-titres suivent le corps. Ils gardaient leur taille de
     grand ecran pendant que le texte retrecissait de 18 % : le rapport
     passait de 1,30 a 1,59 pour un titre, de 1,00 a 1,22 pour un
     sous-titre. On retablit les rapports d'origine — un seul h2, un seul
     h3 dans tout le dossier, quelle que soit la page. */
  .doc h2 { font-size: 1.07rem; margin-top: 2.4rem; }
  .doc h3 { font-size: .82rem; margin-top: 1.5rem; }
  .doc h4 { font-size: .68rem; }
  /* La citation suit le corps, dans le meme rapport qu'au grand ecran
     (1,14 pour 1). Sans cela elle gardait sa taille de bureau pendant que
     le texte retrecissait, et passait de 14 % a 39 % au-dessus de lui. */
  .doc p.accroche { font-size: .94rem; }

  /* Sur un telephone, la galerie et les actualites francaises se presentent
     comme les anglaises : en lecture seule. Le depot de photos, la
     publication d'une breve et le retrait d'une photo sont des gestes de
     bureau — on recadre une image sur un grand ecran, ou l'on voit ce que
     l'on coupe. Les montrer ici encombrerait la page et exposerait un envoi
     declenche par megarde en faisant defiler.

     Ce n'est qu'un masque : ce qui protege reellement ces points d'entree,
     c'est la session, le titulaire et le jeton, verifies par le serveur. */
  .gal-depot, .actu-essai, .mosaique__retrait { display: none; }

  .cadre__interieur { min-height: calc(100dvh - 8px); }
  .colonne { padding-inline: .75rem; }
  .ecosysteme { padding: 1rem .8rem 1.2rem; }
  .fiche { padding: 1rem .85rem; }
}

/* La signature se cassait en deux lignes en laissant un point median orphelin
   en bout de premiere ligne. L'interlettrage passe de .34em a .18em : la ligne
   tient d'un seul tenant, et l'espacement reste lisible comme une enseigne. */
@media (max-width: 30rem) {
  .marque__baseline { letter-spacing: .18em; text-indent: .18em; }
}

/* --------------------------- Consentement ------------------------------- */
/* Le bandeau ne masque pas le contenu : il se pose en bas, laisse lire, et
   les deux boutons ont le meme poids visuel. Un refus plus difficile qu'un
   accord ne serait pas un consentement. */
.consentement {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: clamp(.8rem, 2vw, 1.4rem);
  z-index: 40;
  width: min(46rem, calc(100vw - 1.6rem));
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem;
  justify-content: space-between;
  padding: .95rem 1.15rem;
  background: var(--papier); border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: 0 10px 30px rgba(20, 16, 24, .16);
}
/* Sans cette ligne le bandeau ne part jamais : la regle ci-dessus impose un
   display, et elle l'emporte sur le display:none que le navigateur applique
   a [hidden]. Le clic enregistrait bien le choix, mais rien ne bougeait a
   l'ecran — les deux boutons paraissaient morts. */
.consentement[hidden] { display: none; }
.consentement p { margin: 0; font-size: .84rem; color: var(--encre-douce); flex: 1 1 20rem; }
.consentement__actions { display: flex; gap: .55rem; flex: 0 0 auto; }
.consentement .bouton { font-size: .82rem; padding: .48rem .95rem; }
@media (max-width: 30rem) {
  .consentement { flex-direction: column; align-items: stretch; }
  .consentement__actions { justify-content: flex-end; }
  /* En colonne, le flex-basis de 20rem ci-dessus ne designe plus une largeur
     mais une HAUTEUR : le paragraphe reclamait 320 px et le bandeau occupait
     la moitie de l'ecran. Il reprend ici la hauteur de son texte. */
  .consentement p { flex-basis: auto; }
}

/* ---------------------------- Prendre contact ----------------------------

   Le formulaire du pied d'accueil. Il reprend la carte du site — papier chaud,
   filet, rayon — pour ne pas faire piece rapportee au bas d'une page qui n'en
   comporte aucune autre.

   La grille passe de deux colonnes a une seule sous 34rem, largeur en dessous
   de laquelle deux selecteurs de pays cote a cote deviennent illisibles. */
/* Le cadre prend la largeur des sections voisines. A 52rem il paraissait
   rapporte au bas d'une page dont tous les blocs vont d'un bord a l'autre. */
.contact {
  margin: 0 0 clamp(2.6rem, 5vw, 3.6rem);
  padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.1rem, 3vw, 2.2rem);
  background: var(--papier-chaud);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}

.contact__grille {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.2rem;
}
.champ--large { grid-column: 1 / -1; }

/* Le piege a robots. display:none suffirait a le cacher, mais certains
   automates lisent la feuille de style et sautent ce qui n'est pas affiche :
   on le sort de l'ecran plutot que de l'eteindre. */
.piege {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

/* MARGE et non PADDING, et la nuance n'est pas d'ecole : dans un fieldset, la
   legende se pose au bord SUPERIEUR de la boite, au-dessus du padding. Un
   padding-top ecarte donc la legende de sa premiere case au lieu d'ecarter le
   groupe du champ qui le precede — exactement l'inverse de ce qu'on veut. */
.contact__interets { border: 0; padding: 0; margin: 2.4rem 0 0; }
.contact__interets legend {
  /* La legende est aussi loin de sa premiere case que deux cases le sont entre
     elles : un titre plus eloigne de sa liste que la liste d'elle-meme se lit
     comme un titre flottant. */
  padding: 0; margin-bottom: .3rem;
  font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gris); font-weight: 600;
}
.contact__interets .case {
  display: flex; align-items: flex-start; gap: .55rem;
  padding: .3rem 0; color: var(--encre-douce); cursor: pointer;
}
/* La case se centre sur la PREMIERE LIGNE de son intitule.

   L'interligne vaut 1,65 em et la case 13 px : la marge qui centre l'une
   sur l'autre vaut donc (1,65em - 13px) / 2. Ecrite ainsi elle suit la
   taille du texte — 6,7 px a 16 px, 4,3 px au corps reduit du telephone —
   sans qu'on ait a la redire dans une media query.

   La taille de la case est fixee pour que ce calcul reste vrai : livree au
   navigateur, elle varie, et la marge cesserait de centrer quoi que ce
   soit. */
.contact__interets .case input {
  /* font-size: inherit AVANT tout le reste : un controle de formulaire porte
     sa propre police — 13,33 px sous Chrome — et le em du calcul se serait
     mesure dessus, pas sur l'intitule. La marge tombait a 4,5 px au lieu de
     6,7, et la case restait deux pixels trop haut. */
  font-size: inherit;
  width: 13px; height: 13px; flex: 0 0 auto;
  margin-top: calc(.825em - 6.5px);
  accent-color: var(--prune);
}

.contact__envoi {
  display: flex; align-items: center; flex-wrap: wrap; gap: .8rem 1.4rem;
  margin-top: 1.6rem;
}
.contact__mention { margin: 0; font-size: .8rem; color: var(--gris); }

@media (max-width: 34rem) {
  .contact__grille { grid-template-columns: minmax(0, 1fr); }
}

/* Le formulaire n'a rien a faire sur une feuille de papier. */
@media print {
  .contact { display: none; }
}

/* Le message libre occupe toute la largeur, sous la grille : il n'a pas a
   partager sa ligne avec un selecteur de pays. */
.champ--message { margin-top: 1.4rem; }
.champ--message textarea {
  width: 100%; resize: vertical; min-height: 4.5rem;
  font: inherit; color: var(--encre);
}
.champ__aide { margin: .35rem 0 0; font-size: .8rem; color: var(--gris); }