/* Ecloria · page d'accueil publique (proposition du 12.10.2026)
   Composition calquée sur la maquette de la DA (photo-1-boule-violette.png, 1536 × 1024) :
   1 px de la maquette = var(--u) / 15.36, la première vue garde les proportions 3:2. */

:root {
  --violet: #703aa2;          /* bouton et icônes, couleur rendue dans la maquette (cible écrite : #76549b) */
  --violet-fonce: #5a2d86;
  --lavande: #f1ebfa;         /* pastilles */
  --lavis: #f3eff9;           /* lavis du fond, rendu ≈ #f1edf8, cible #f5f1f8 */
  --encre: #0b0a14;           /* titre et logo, rendu ≈ #030611 */
  --gris: #625e70;            /* textes secondaires */
  --gris-fort: #4a4658;       /* sous-titre de la première vue, plus marqué (9,1:1 sur blanc) */
  --filet: #e4e1ea;
  --lilas: #9a6fcf;           /* teinte du feutre qui surligne les mots clés */
  --feutre: rgba(154, 111, 207, .4);         /* trait de feutre des titres de section : le lilas à 40 % */
  --feutre-doux: rgba(154, 111, 207, .18);   /* le même, discret, sous les mots clés des textes */
  --u: min(1vw, 1.5vh);
  --marge-picto: clamp(14px, calc(1.05 * var(--u)), 16px);   /* entre une pastille et son libellé : rangée des domaines et cases */
  --entete-h: clamp(3.75rem, calc(5 * var(--u)), 4.75rem);   /* hauteur de l'en-tête compact, qui reste à l'écran */
  --police-titre: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --police: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding-top : une ancre ou un élément qui reçoit le focus ne passe jamais sous l'en-tête resté à l'écran */
html { scroll-behavior: smooth; scroll-padding-top: var(--entete-h); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--police);
  color: var(--encre);
  background: #fff;
  font-size: 1.0625rem;
  line-height: 1.55;
}
a { color: inherit; }
h1, h2, h3 { font-family: var(--police-titre); }
ul, ol { list-style: none; margin: 0; padding: 0; }

:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 6px; }
.evitement {
  position: absolute; left: 12px; top: -60px; z-index: 10;
  background: var(--encre); color: #fff; padding: 10px 16px; border-radius: 8px; text-decoration: none;
}
.evitement:focus { top: 12px; }
.visuellement-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- première vue ---------- */
/* min(…, 100%) : 1vw compte la barre de défilement, sans cette borne la page déborderait d'environ 15 px à certaines largeurs */
.scene-largeur { width: min(calc(100 * var(--u)), 100%); margin: 0 auto; position: relative; }

/* En-tête toujours visible : fixe en haut de la fenêtre, compact sur fond clair. Tout en haut de la page (classe
   « en-haut » posée par app.js), il reprend la maquette : ample et sans fond. Sans JavaScript, il reste compact. */
.entete {
  position: fixed; inset: 0 0 auto 0; z-index: 8;
  background-color: rgba(255, 255, 255, .96); box-shadow: 0 1px 0 var(--filet);
  transition: background-color .25s ease, box-shadow .25s ease;
}
.entete-int { height: var(--entete-h); display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(5.9 * var(--u)) 0 calc(5.85 * var(--u)); transition: height .25s ease; }
.marque { display: inline-flex; align-items: center; gap: calc(1.05 * var(--u)); text-decoration: none; color: var(--encre); flex: none; }
/* signe : la vue du SVG (2.5 2.5 19 19) laisse une marge autour de l'anneau, dont le trait n'est plus rogné au bord ;
   flex: none : ni le signe ni le mot ne se compriment, la première lettre reste entière */
.marque-signe { width: min(calc(3.85 * var(--u)), 2.375rem); height: min(calc(3.85 * var(--u)), 2.375rem); color: var(--encre); flex: none; overflow: visible; transition: width .25s ease, height .25s ease; }
.marque-disque { fill: var(--violet); }
.marque-mot { font-family: var(--police-titre); font-weight: 700; font-size: clamp(1.25rem, calc(3.05 * var(--u)), 1.75rem); letter-spacing: -0.025em; line-height: 1.1; flex: none; transition: font-size .25s ease; }
.en-haut .entete { background-color: rgba(255, 255, 255, 0); box-shadow: none; }
.en-haut .entete-int { height: calc(13 * var(--u)); }
.en-haut .marque-signe { width: calc(3.85 * var(--u)); height: calc(3.85 * var(--u)); }
.en-haut .marque-mot { font-size: max(1.25rem, calc(3.05 * var(--u))); }
@media (prefers-reduced-motion: reduce) { .entete, .entete-int, .marque-signe, .marque-mot { transition: none; } }

.accueil {
  position: relative; overflow: hidden;
  background:
    radial-gradient(60% 75% at 82% 18%, var(--lavis) 0%, rgba(243, 239, 249, 0) 70%),
    linear-gradient(180deg, #fbfafd 0%, #fff 70%);
}
/* Hauteur minimale, jamais fixe : si le texte grossit (zoom, taille de police, espacement), la première vue s'allonge
   et les domaines descendent, rien ne se chevauche. À taille normale, les proportions 3:2 de la maquette sont inchangées. */
.accueil-int { min-height: calc(66.667 * var(--u)); }

.accueil-texte {
  position: relative; z-index: 2; margin-left: calc(6.05 * var(--u)); width: calc(52 * var(--u));
  padding-top: calc(13.4 * var(--u)); padding-bottom: calc(2 * var(--u)); min-height: calc(52.73 * var(--u));
}
.js-attente .accueil-texte { visibility: hidden; }
main:focus { outline: none; }
.titre {
  margin: 0; font-weight: 700; color: var(--encre);
  font-size: calc(var(--titre-echelle, 1) * max(2.4rem, 6.05 * var(--u)));
  line-height: 0.96; letter-spacing: -0.04em;
  max-width: calc(50 * var(--u)); overflow-wrap: break-word;
}
/* Titre long : échelle fixe choisie d'après le nombre de signes (app.js pose la classe), jamais d'après une mesure.
   Quatre lignes, deux par phrase, à toutes les tailles. */
.titre.long { --titre-echelle: .875; }
/* coupe écrite dans le HTML : une phrase par bloc, une ligne par bloc (.ligne) ; la même à toutes les largeurs et dans
   tous les navigateurs, sans dépendre de la largeur d'une fonte. Une ligne trop longue se replie d'elle-même. */
.titre .phrase, .titre .ligne { display: block; }
.sous-titre {
  margin: calc(2.3 * var(--u)) 0 0; color: var(--gris-fort); font-weight: 450;
  font-size: calc(var(--sous-echelle, 1) * max(1.2rem, 2.47 * var(--u))); line-height: 1.36; letter-spacing: -0.012em;
  max-width: calc(38.5 * var(--u)); text-wrap: balance;
}
.sous-titre.large { max-width: calc(48 * var(--u)); }
.bouton {
  display: inline-flex; align-items: center; gap: calc(2.05 * var(--u));
  margin-top: calc(2.7 * var(--u)); min-height: max(3rem, calc(4.5 * var(--u)));
  padding: .4em calc(2.45 * var(--u)) .4em calc(2.35 * var(--u));
  border-radius: 999px; background: var(--violet); color: #fff; text-decoration: none;
  font-size: max(1rem, calc(1.56 * var(--u))); font-weight: 500; letter-spacing: -0.005em;
  box-shadow: 0 calc(0.6 * var(--u)) calc(1.8 * var(--u)) rgba(112, 58, 162, 0.22);
  transition: background-color .2s ease;
}
.bouton:hover { background: var(--violet-fonce); }
.bouton-fleche { width: calc(1.75 * var(--u)); height: calc(1.75 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Le même bouton, à la taille de l'en-tête, à la place du menu ; celui de la première vue ferait doublon à l'écran :
   il ne reste que sur téléphone, où l'en-tête ne porte que le logo (voir plus bas). */
.bouton-entete {
  flex: none; margin-top: 0; gap: .7em; white-space: nowrap;
  min-height: clamp(2.75rem, calc(3.1 * var(--u)), 2.875rem); padding: .3em 1.3em .3em 1.4em;
  font-size: clamp(.9375rem, calc(1.3 * var(--u)), 1.0625rem);
  box-shadow: 0 4px 14px rgba(112, 58, 162, .2);
  transition: background-color .2s ease, min-height .25s ease, font-size .25s ease;
}
.bouton-entete .bouton-fleche { width: 1.15em; height: 1.15em; }
.en-haut .bouton-entete { min-height: max(2.75rem, calc(3.7 * var(--u))); font-size: max(1rem, calc(1.4 * var(--u))); }
@media (prefers-reduced-motion: reduce) { .bouton-entete { transition: none; } }
.bouton-accueil { display: none; }

.objet {
  position: absolute; z-index: 1; margin: 0;
  left: calc(54.6875 * var(--u)); top: calc(9.1146 * var(--u));
  width: calc(45.3125 * var(--u)); height: calc(42.3177 * var(--u));
}
.objet-svg {
  display: block; width: 100%; height: 100%; overflow: visible;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 86%, transparent 100%);
  mask-composite: intersect;
}
/* ---------- anneau de la sphère ---------- */
/* Géométrie pilotée par UNE variable, --angle (degrés, modulo 360), posée par app.js sur .objet-svg (style.setProperty,
   permis par la CSP) : défilement, repos et survol additionnés. Tout le reste est du CSS et du SVG.
   Repère local des groupes .an : origine = centre de l'anneau, x = axe de rotation U, y = V (matrix(…) du HTML).
   L'anneau est un cercle de rayon 245.303 tourné autour de x : à l'écran, ellipse de demi-axes R et R·|cos(angle)|.
   La moitié AVANT passe devant la sphère, la moitié ARRIÈRE derrière ; elles s'échangent à chaque demi-tour.
   - .an-tube   : <ellipse pathLength="2"/> dont seul ry change ; trait d'épaisseur constante. Le corps de la moitié
                  arrière déborde de 1 % sous la moitié avant : aucun interstice à leur jonction, même adoucie
                  par le flou, et aucune nuance posée deux fois.
   - .an-reflet : nuance qui glisse le long de l'anneau (un tour d'anneau = un tour de nuance), longueur --long (0 à 1).
                  Elle figure dans les DEUX moitiés : c'est la paire qui est continue quand les moitiés s'échangent.
   Sans fonctions trigonométriques CSS (avant Chrome 111, Safari 15.4, Firefox 108), rien du bloc @supports ne
   s'applique : l'anneau reste à la pose de départ donnée par les attributs du HTML, et app.js fige l'image.
   Aucune animation ni transition CSS : l'anneau ne bouge que si --angle change. */
@property --angle { syntax: "<angle>"; inherits: true; initial-value: 32.456deg; }

.an ellipse { fill: none; stroke-linecap: butt; }
.an-tube { stroke-dasharray: 1px 1px; }
.an-avant .an-tube { stroke-dashoffset: 0; }
.an-arriere .an-tube { stroke-dashoffset: 1px; }
.an-arriere .an-corps { stroke-dasharray: 1.02px .98px; stroke-dashoffset: 1.01px; }
.an .an-reflet { stroke-linecap: round; stroke-dasharray: calc(1px * var(--long, .14)) 4px; }
.an-reflet { stroke-dashoffset: calc(1px * (var(--long, .14) / 2 - .7531)); }
.an-arriere .an-reflet { stroke-dashoffset: calc(1px * (var(--long, .14) / 2 - 1.7531)); }

/* Matière « améthyste satinée », pleine : un jonc violet continu de 12,4 unités, sans blanc, sans liseré. Toutes les
   teintes restent entre le violet profond (#5a2d86), le violet de la marque (#703aa2) et un lilas soutenu (#9a6fcf).
   Empilement de chaque moitié : corps (dégradé #anneau-matiere le long de l'axe, attribut stroke du HTML), nuance
   claire côté lumière, nuance profonde à l'opposé, nuance qui glisse ; à l'arrière seulement, un voile profond
   (dégradé #anneau-voile, attribut stroke du HTML) dont l'opacité suit la profondeur : nul aux deux extrémités de
   l'axe, où les moitiés se rejoignent, et nul quand l'anneau est de face, où elles s'échangent sans à-coup.
   Flou léger et rayonnement : filtres SVG #anneau-halo-avant et #anneau-halo-arriere (attribut filter du HTML). */
.an-corps { stroke-width: 12.4; }
.an-jour { stroke: #9a6fcf; stroke-width: 4.6; stroke-opacity: .3; }
.an-nuit { stroke: #5a2d86; stroke-width: 4.6; stroke-opacity: .38; }
.an-eclat { --long: .3; stroke: #9a6fcf; stroke-width: 5; stroke-opacity: .5; }
.an-voile { stroke-width: 12.4; stroke-opacity: .33; }
/* ombre de l'anneau sur la sphère, puis sur le sol : ancrée près du point de contact, large de face, resserrée de chant */
.an-ombre { stroke: #2c1c4f; stroke-width: 15; stroke-opacity: .13; }
.an-sol { transform-box: fill-box; transform-origin: 30% 50%; transform: scaleX(.9219); fill-opacity: .93; }
/* zone de survol : la sphère seule, par-dessus l'anneau (souris ; ni toucher ni clavier, voir app.js) */
.zone-survol { fill: none; stroke: none; pointer-events: fill; }

/* ---------- pause de la rotation automatique ---------- */
/* Contrôle discret (WCAG 2.2.2 : un mouvement automatique de plus de cinq secondes doit pouvoir être arrêté).
   Caché sans JavaScript, en mouvement réduit et sur une image figée : app.js retire l'attribut hidden. */
.pause {
  position: absolute; right: calc(3.2 * var(--u)); bottom: calc(1.4 * var(--u)); z-index: 2;
  width: 44px; height: 44px; padding: 0; border: 1px solid #ddd3ec; border-radius: 50%;
  background: rgba(255, 255, 255, .92); box-shadow: 0 2px 8px rgba(112, 58, 162, .14);
  color: var(--violet); cursor: pointer; display: grid; place-items: center;
  transition: background-color .2s ease, border-color .2s ease;
}
.pause[hidden] { display: none; }
.pause:hover { background: var(--lavande); border-color: #c9b6e3; }
.pause svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pause-lecture, .pause[aria-pressed="true"] .pause-barres { display: none; }
.pause[aria-pressed="true"] .pause-lecture { display: inline; fill: currentColor; }

@supports (top: calc(1px * cos(10deg))) {
  .objet-svg {
    --angle: 32.456deg;
    --c: cos(var(--angle));
    /* signes sans sign() ni mod() : +2 évite le zéro exact à 0°, 90°, 180°… (angle écrit à 2 décimales) */
    --sens: clamp(-1, calc(1000000 * sin(var(--angle)) + 2), 1);   /* +1 sur [0°, 180°], −1 sur ]180°, 360°[ */
    --avant: calc(var(--c) * var(--sens));                         /* cos(angle mod 180°) : de 1 à −1 par demi-tour */
    --face: max(var(--avant), calc(-1 * var(--avant)));            /* 1 = anneau vu de face, 0 = vu de chant */
    --cote: clamp(-1, calc(1000000 * var(--avant) + 2), 1);        /* +1 : la moitié avant est du côté +y */
    --prof: calc(var(--sens) * sin(var(--angle)));                 /* |sin(angle)| : 0 de face, 1 de chant */
  }
  .an ellipse { ry: calc(var(--r, 245.303) * 1px * max(var(--face), .004)); }
  .an-avant .an-tube { stroke-dashoffset: calc(1px * (.5 - .5 * var(--cote))); }
  .an-arriere .an-tube { stroke-dashoffset: calc(1px * (.5 + .5 * var(--cote))); }
  .an-arriere .an-corps { stroke-dashoffset: calc(1px * (.51 + .5 * var(--cote))); }
  /* position p de la nuance le long de l'ellipse (0 à 2), continue quand les moitiés s'échangent */
  .an-avant .an-reflet { stroke-dashoffset: calc(1px * (var(--long, .14) / 2 - 1 + var(--cote) * (.5 - .3 * var(--avant)))); }
  .an-arriere .an-reflet { stroke-dashoffset: calc(1px * (var(--long, .14) / 2 - 1 - var(--cote) * (.5 + .3 * var(--avant)))); }
  .an-voile { stroke-opacity: calc(.62 * var(--prof)); }
  .an-sol { transform: scaleX(calc(.5 + .5 * var(--face))); fill-opacity: calc(.55 + .45 * var(--face)); }
}

.domaines {
  position: relative; z-index: 2; margin: 0 calc(6.05 * var(--u));
  display: grid; grid-template-columns: 1fr 1fr 1fr; border-top: 1px solid var(--filet);
  padding-top: calc(2.7 * var(--u));
}
.domaines li { display: flex; align-items: center; }
.domaines li + li { border-left: 1px solid var(--filet); }
.domaines li:nth-child(2) { justify-content: center; }
.domaines li:nth-child(3) { justify-content: flex-end; }
.domaines a {
  display: inline-flex; align-items: center; gap: var(--marge-picto); text-decoration: none; color: var(--encre);
  font-size: max(1rem, calc(1.69 * var(--u))); font-weight: 500; letter-spacing: -0.01em;
  min-height: calc(4.6 * var(--u)); padding: 0 calc(0.3 * var(--u)); max-width: 100%; overflow-wrap: anywhere;
}
.domaines li:nth-child(3) a { margin-right: calc(2.3 * var(--u)); }
.domaines a:hover { color: var(--violet); }
.pastille {
  width: calc(4.45 * var(--u)); height: calc(4.45 * var(--u)); border-radius: 50%;
  background: var(--lavande); display: grid; place-items: center; flex: none;
}
.pastille svg { width: 52%; height: 52%; fill: none; stroke: var(--violet); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pastille .plein { fill: var(--violet); }

/* ---------- mots clés ---------- */
/* Violet de la marque sur fond clair (7,4:1 sur blanc). Dans un titre, la graisse du titre ; dans un texte courant,
   un cran au-dessus. Jamais une phrase entière. */
.cle { color: var(--violet); }
p .cle { font-weight: 500; }
/* Titre de section : le mot clé reste à l'encre, surligné d'un trait de feutre lilas (deux tiers bas de la ligne,
   jambages compris, bouts arrondis et inégaux, très légèrement penché, bords adoucis). Le trait est un pseudo-élément
   placé derrière le texte : aucune image, aucun script. Un seul mot par titre : un groupe de mots qui passerait à la
   ligne recevrait un seul pavé. */
.bandeau .cle { position: relative; z-index: 0; display: inline-block; color: var(--encre); }
.bandeau .cle::before {
  content: ""; position: absolute; z-index: -1; inset: 36% -.18em -.07em -.14em;
  background: linear-gradient(93deg, var(--feutre-doux) 0, var(--feutre) 9%, var(--feutre) 86%, var(--feutre-doux) 100%);
  border-radius: .34em .16em .44em .2em / .5em .3em .62em .36em;
  transform: rotate(-.8deg); filter: blur(.5px);
}
/* Textes des sections : le mot clé garde son violet, sur un trait de feutre discret (moitié basse de la ligne, bouts
   fondus), repris à chaque ligne si le mot clé passe à la ligne. La première vue garde la couleur seule. */
.section p .cle {
  padding: 0 .14em; margin: 0 -.14em;
  background: linear-gradient(93deg, transparent 0, var(--feutre-doux) .22em, var(--feutre-doux) calc(100% - .26em), transparent 100%) no-repeat 0 82% / 100% 44%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------- sections ---------- */
/* Chaque section s'ouvre par son titre (.bandeau), sur le fond clair de la page : plus de bandeau noir. Les sections
   restent distinctes par un filet fin pleine largeur et un grand blanc au-dessus du titre. */
.section { padding: 0 0 112px; scroll-margin-top: 0; border-top: 1px solid var(--filet); }
.bandeau { padding: 92px 0 0; margin-bottom: 44px; }
.section .scene-largeur { width: min(1200px, calc(100% - 2 * 6.05vw)); }
.section-teinte { background: linear-gradient(180deg, #fff 0%, var(--lavis) 100%); }
.section h2 { overflow-wrap: anywhere; margin: 0 0 40px; font-size: clamp(2.125rem, 3.4vw, 3.25rem); line-height: 1.05; letter-spacing: -0.03em; font-weight: 700; }
.section h3 { overflow-wrap: anywhere; margin: 0 0 8px; font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.015em; font-weight: 600; }
.section p { margin: 0; color: #3f3b4b; overflow-wrap: anywhere; }
.bandeau h2 { margin: 0; }
.cartes > *, .etapes > *, .coordonnees > * { min-width: 0; }
.chapeau { font-size: 1.3125rem; max-width: 760px; margin-bottom: 40px !important; color: var(--gris) !important; }
.cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
/* Cases des services : relief violet léger. La case (.carte) ne bouge jamais : c'est elle qui reçoit la souris ; seule
   sa face (.carte-face) se soulève et s'incline, la souris ne peut donc pas sortir de la case parce qu'elle a bougé.
   Au repos : arête claire en haut, tranche dessous, ombre portée douce et décalée. À la souris : la face se soulève
   de 4 px et s'incline de 3,5° au plus vers le pointeur (--rx et --ry posés par app.js), puis revient en douceur.
   Rien au toucher (hover: hover, et app.js n'écoute que la souris) ni en mouvement réduit. */
.carte { perspective: 900px; scroll-margin-top: 24px; display: flex; }
.carte-face {
  flex: 1; min-width: 0; padding: 28px 28px 32px; border: 1px solid #e2d9ef; border-top-color: #f5f0fb; border-radius: 22px;
  background: linear-gradient(180deg, #fff 0%, #fbf8ff 100%);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 rgba(112, 58, 162, .16), 6px 18px 30px -14px rgba(112, 58, 162, .4), 0 2px 6px rgba(112, 58, 162, .06);
  transform: translateY(var(--leve, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s ease;
}
/* pictogramme du service dans sa pastille, puis le titre sur la même ligne, centré sur elle */
.carte-tete { display: flex; align-items: center; gap: var(--marge-picto); margin-bottom: 16px; }
.carte .pastille { width: 48px; height: 48px; }
.carte h3 {
  margin: 0; min-width: 0;
  text-decoration: underline; text-decoration-color: var(--violet); text-decoration-thickness: 2px; text-underline-offset: .3em;
}
/* souris seulement : après un toucher, la case ne reste pas soulevée */
@media (hover: hover) {
  .carte:hover .carte-face {
    --leve: -4px;
    box-shadow: inset 0 1px 0 #fff, 0 4px 0 rgba(112, 58, 162, .18), 8px 26px 38px -14px rgba(112, 58, 162, .44), 0 3px 8px rgba(112, 58, 162, .08);
  }
  /* la face suit le pointeur de près ; le retour, à la sortie, garde la transition lente du repos */
  .carte.suit .carte-face { transition-duration: .14s, .3s; transition-timing-function: ease-out, ease; }
}
@media (prefers-reduced-motion: reduce) {
  .carte-face, .carte:hover .carte-face { transition: none; transform: none; }
  .pause { transition: none; }
}
/* étapes de l'approche : ni numéro ni trait au-dessus du titre, un filet vertical entre les colonnes */
.etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.etapes li + li { border-left: 1px solid #d9d3e6; padding-left: 28px; }
.coordonnees { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 0; }
.coordonnees div { padding-top: 18px; border-top: 1px solid var(--filet); }
.coordonnees dt { font-size: .9375rem; color: var(--gris); margin-bottom: 6px; }
.coordonnees dd { margin: 0; font-size: 1.1875rem; overflow-wrap: anywhere; }
.a-fournir {
  display: inline-block; padding: 2px 10px; border: 1px dashed #b49ad1; border-radius: 8px;
  color: #5a2d86; background: #faf7fd; font-size: .86em;
}
.pied { border-top: 1px solid var(--filet); padding: 28px 0 36px; font-size: .9375rem; color: var(--gris); }
.pied .scene-largeur { width: min(1200px, calc(100% - 2 * 6.05vw)); }
.pied-int { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pied p { margin: 0; }

/* ---------- téléphone et tablette étroite ---------- */
@media (max-width: 760px) {
  body { font-size: 1.0625rem; }
  :root { --entete-h: 3.5rem; --marge-picto: 16px; }
  .scene-largeur { width: auto; }
  /* en-tête collant, dans le flux : il ne recouvre pas la première vue et garde la même hauteur en défilant */
  .entete { position: sticky; top: 0; }
  /* une seule ligne : le logo. Le bouton n'y tiendrait pas à côté de lui sur un petit téléphone : il reste dans la
     première vue, sous le sous-titre */
  .entete-int, .en-haut .entete-int { height: var(--entete-h); padding: 0 20px; }
  .marque { gap: 10px; }
  .marque-signe, .en-haut .marque-signe { width: 2rem; height: 2rem; }
  .marque-mot, .en-haut .marque-mot { font-size: 1.5625rem; }
  .bouton-entete { display: none; }
  .bouton-accueil { display: inline-flex; }
  .accueil-int { min-height: 0; padding: 22px 20px 24px; display: flex; flex-direction: column; }
  .accueil-texte, .objet, .domaines { position: static; width: auto; height: auto; min-height: 0; margin: 0; padding: 0; }
  .titre { font-size: calc(var(--titre-echelle, 1) * max(1.9rem, min(11vw, 2.875rem))); max-width: none; line-height: .98; }
  .sous-titre, .sous-titre.large { font-size: calc(var(--sous-echelle, 1) * 1.3rem); max-width: 26em; margin-top: 18px; }
  .bouton { min-height: 3.375rem; font-size: 1.0625rem; gap: 14px; padding: .4em 22px .4em 24px; margin-top: 24px; box-shadow: 0 6px 18px rgba(112, 58, 162, .22); }
  .bouton-fleche { width: 20px; height: 20px; }
  .objet { position: relative; inset: auto; aspect-ratio: 696 / 650; margin: 10px -20px 0; }
  .pause { right: 12px; bottom: 0; }
  .domaines { grid-template-columns: minmax(0, 1fr); padding-top: 6px; margin-top: 4px; z-index: auto; }
  .domaines li, .domaines li:nth-child(2), .domaines li:nth-child(3) { justify-content: flex-start; }
  .domaines li + li { border-left: 0; border-top: 1px solid var(--filet); }
  .domaines a, .domaines li:nth-child(3) a { font-size: 1.125rem; min-height: 4.5rem; margin: 0; }
  .pastille { width: 48px; height: 48px; }
  .section { padding: 0 0 64px; }
  .bandeau { padding: 56px 0 0; margin-bottom: 28px; }
  .etapes li + li { border-left: 0; padding-left: 0; border-top: 1px solid #d9d3e6; padding-top: 20px; }
  .section .scene-largeur, .pied .scene-largeur { width: auto; padding: 0 20px; }
  .cartes, .etapes, .coordonnees { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .chapeau { font-size: 1.125rem; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .cartes, .etapes, .coordonnees { gap: 20px; }
  .etapes li + li { padding-left: 20px; }
}
/* Trois cases de front laissent trop peu de place au titre à côté de son pictogramme (« Automatisation » serait coupé
   en plein mot jusqu'à 975 px environ) : une colonne jusqu'à 1040 px. */
@media (min-width: 761px) and (max-width: 1040px) {
  .cartes { grid-template-columns: minmax(0, 1fr); }
}