/* ==========================================================================
   Archipel Horizon — essai des trois ouvertures animées (copie d'essai)
   Source : Commercial/entetes/entete-accueil.html, entete-automatisation.html,
   entete-restaurant.html. Toutes les classes des maquettes sont préfixées
   « ouv- » pour qu'aucune règle ne touche le reste de la page. Les couleurs
   et les espacements passent par les variables de site.css quand elles
   existent ; les valeurs propres aux animations (lueurs, transparences,
   faux écrans) sont déclarées ici, sur .ouv-hero.
   Chargée après site.css, uniquement sur l'accueil, la page automatisation
   et la page restaurant.
   ========================================================================== */

.ouv-hero {
  /* valeurs propres aux animations */
  --ouv-voile:          rgba(255, 255, 255, 0.06);
  --ouv-voile-fort:     rgba(255, 255, 255, 0.08);
  --ouv-trait:          rgba(255, 255, 255, 0.14);
  --ouv-trait-rose:     rgba(235, 194, 187, 0.45);
  --ouv-lueur:          rgba(140, 47, 43, 0.35);
  --ouv-alerte:         #D9483B;
  --ouv-alerte-clair:   #F2A69E;
  --ouv-bazar:          #1C2328;
  --ouv-notif:          #2A3339;
  --ouv-notif-texte:    #E3E8ED;
  --ouv-notif-2:        #98A6AE;
  --ouv-postit:         #F3E3A5;
  --ouv-postit-texte:   #3B3520;
  --ouv-coque:          #0B1418;
  --ouv-coque-bord:     #2D3E46;
  --ouv-ecran:          #EEF2F4;
  --ouv-accent-clair:   #F4E6E4;
  --ouv-coches:         #4A90C2;
  --ouv-telegram:       #2AABEE;
  --ouv-sonde:          rgba(255, 255, 255, 0.14);   /* lignes de sonde : même blanc peu opaque que la section contact */
  /* bas de l'ouverture : courbe de jonction (44 px), lignes de sonde, puis un peu d'air.
     Aucun contenu ne descend dans cette zone : les lignes ne passent derrière rien. */
  --ouv-sondes-h:       64px;
  --ouv-bas:            calc(44px + var(--ouv-sondes-h) + 20px);
  /* Règle commune aux trois pages (2026-09-17) : même titre, même zone d'animation,
     mêmes marges, donc même hauteur d'ouverture au-dessus de 1100 px. */
  --ouv-t-titre:        48px;                       /* titre d'ouverture, identique sur les trois pages */
  --ouv-t-titre-tel:    36px;                       /* téléphone : taille d'origine (38 px sur l'accueil) */
  --ouv-zone-h:         520px;                      /* hauteur fixe de la zone d'animation */
  --ouv-rangee:         540px;                      /* rangée commune (590 px jusqu'au 2026-09-18) : la plus haute colonne de texte y tient */
  --ouv-haut:           22px;                       /* marge haute de l'ouverture sur ordinateur (32 px jusqu'au 2026-09-18, réduite de 30 %) */
  --ouv-t-texte:        clamp(17px, 1.35vw, 19px);

  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--fond-sombre);
  color: var(--texte-sur-sombre);
}
.ouv-hero a:focus-visible { outline-color: var(--accent-sur-sombre); }

/* Animations suspendues quand l'ouverture sort de l'écran ou que l'onglet est masqué */
.ouv-pause *, .ouv-pause *::before, .ouv-pause *::after { animation-play-state: paused !important; }

/* ---------- Textes de l'ouverture ---------- */
.ouv-titre { position: relative; z-index: 2; }
.ouv-titre h1 { margin: 0; font-size: var(--ouv-t-titre); line-height: 1.02; letter-spacing: var(--serrage-titre-1); color: var(--texte-sur-sombre); }
.ouv-surtitre { display: block; margin: 0 0 12px; color: var(--accent-sur-sombre); font-weight: var(--graisse-demi); font-size: var(--t-petit); line-height: 1.4; }
.ouv-texte { margin: 18px 0 0; font-size: var(--ouv-t-texte); line-height: var(--interligne-serre); color: var(--texte-2-sur-sombre); }
.ouv-texte + .ouv-texte { margin-top: 14px; }
.ouv-actions { display: flex; align-items: center; gap: 12px var(--e-4); margin-top: 28px; flex-wrap: wrap; }   /* 12 px entre boutons empilés (16 px jusqu'au 2026-09-18) ; sans effet quand ils sont côte à côte */
.ouv-hero .ouv-lien { color: var(--texte-sur-sombre); text-underline-offset: 5px; }
.ouv-hero .ouv-lien:hover { color: var(--accent-sur-sombre); }
.ouv-legende { margin: 0; font-size: 13px; line-height: 1.4; color: var(--texte-2-sur-sombre); text-align: center; }

/* ---------- Structure commune des trois ouvertures ----------
   Grille à 12 colonnes du site : colonne de texte à gauche, zone d'animation à
   droite (hauteur fixe), centrées l'une sur l'autre ; légende sous la zone, hors
   du calcul de centrage. Mêmes marges haute et basse partout. Sous 1100 px : une
   colonne, textes centrés au-dessus, animation dessous. */
.ouv-hero { padding-block: var(--ouv-haut) calc(var(--ouv-bas) + 19px); }   /* 19 px : la légende sous la zone ; avec les 20 px de --ouv-bas, 39 px au-dessus des lignes de sonde (56 px jusqu'au 2026-09-18, réduits de 30 %) */
.ouv-grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gouttiere); align-items: center; min-height: var(--ouv-rangee); }
.ouv-grille > * { min-width: 0; }
.ouv-grille > .ouv-titre { grid-column: span var(--ouv-col-texte, 5); }
.ouv-grille > .ouv-zone { grid-column: span var(--ouv-col-zone, 7); }
.ouv-zone { position: relative; height: var(--ouv-zone-h); }
.ouv-zone > .ouv-legende { position: absolute; top: calc(100% + 10px); left: 0; right: 0; }
.ouv-hero .ouv-texte { font-size: var(--t-corps-s); }   /* textes du site, plus longs que ceux des maquettes */
@media (max-width: 1100px) {
  .ouv-hero { padding-block: var(--e-6) var(--ouv-bas); }
  .ouv-grille { grid-template-columns: minmax(0, 1fr); min-height: 0; row-gap: 36px; }
  .ouv-grille > .ouv-titre, .ouv-grille > .ouv-zone { grid-column: auto; }
  .ouv-titre { text-align: center; }
  .ouv-titre h1 { max-width: 980px; margin-inline: auto; }
  .ouv-hero .ouv-texte { max-width: 62ch; margin-left: auto; margin-right: auto; }
  .ouv-actions, .ouv-langues { justify-content: center; }
  .ouv-zone { height: auto; }
  .ouv-zone > .ouv-legende { position: static; margin-top: 14px; }
}
@media (max-width: 760px) {
  .ouv-hero { padding-block: var(--e-5) var(--ouv-bas); }
  .ouv-titre h1 { font-size: var(--ouv-t-titre-tel); }
  .ouv-grille { row-gap: 32px; }
}

/* ---------- Grille de points en fond des trois ouvertures ----------
   Points clairs de 1 px (blanc à 10 %), espacés de 26 px : même réglage sur les
   trois pages. Elle couvre toute l'ouverture, derrière le titre, les textes et
   l'animation, de l'en-tête collant jusqu'aux lignes de sonde ; seul un léger
   fondu l'efface en bas, avant les lignes. Le masque radial centré sur
   l'animation, qui la rendait invisible, est annulé le 2026-09-18. Elle passe
   sous tous les contenus (z-index négatif dans le contexte isolé de l'ouverture). */
/* La grille elle-même est définie une seule fois, dans site.css (règle commune à
   .ouv-hero et au bloc sombre du bas de page). Ici, seulement le fondu du bas. */
.ouv-hero::before {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--ouv-bas) - 70px), transparent calc(100% - 44px - var(--ouv-sondes-h)));
          mask-image: linear-gradient(to bottom, #000 calc(100% - var(--ouv-bas) - 70px), transparent calc(100% - 44px - var(--ouv-sondes-h))); }

/* ---------- Lignes de sonde, juste au-dessus de la courbe de jonction ---------- */
.ouv-sondes { position: absolute; left: 0; right: 0; bottom: 44px; width: 100%; height: var(--ouv-sondes-h); color: var(--ouv-sonde); pointer-events: none; }
@media (max-width: 760px) {
  .ouv-hero { --ouv-sondes-h: 40px; }
  .ouv-sonde-tel-cache { display: none; }
}

/* ---------- Courbe de jonction vers la section suivante (fond --fond-2) ---------- */
.ouv-jonction { display: block; width: 100%; height: 44px; margin-top: -44px; position: relative; z-index: 3; }
.ouv-jonction-fond { fill: var(--fond-2); }
.ouv-jonction-trait { fill: none; stroke: rgba(255, 255, 255, 0.25); stroke-width: 1.2; }

/* ==========================================================================
   Accueil : texte sur 5 colonnes, comparateur avant / après sur 7 (la répartition
   4 / 8 est annulée le 2026-09-18). Le bazar porte 6 éléments (4 notifications,
   2 post-it) serrés et en désordre dans la partie gauche du panneau : leur bord
   droit ne dépasse jamais 55 % de la largeur, ils ne passent donc ni sous le
   bilan ni sous la poignée, qui balaie entre 30 % et 70 %.
   ========================================================================== */
.ouv-hero-accueil { --ouv-col-texte: 5; --ouv-col-zone: 7; }
@media (min-width: 1101px) {
  .ouv-hero-accueil .ouv-actions { column-gap: var(--e-3); flex-wrap: nowrap; }   /* bouton et lien sur la même ligne */
}
.ouv-hero-accueil .ouv-comparo { height: 100%; margin: 0; }
@media (max-width: 1100px) {
  .ouv-hero-accueil .ouv-comparo { height: clamp(460px, 44vw, 540px); }
}

.ouv-comparo { position: relative; height: clamp(460px, 44vw, 540px); margin: 44px 0 0; border-radius: 24px; overflow: hidden;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.12); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize;
  font-size: 15px; line-height: 1.4; }
.ouv-cote { position: absolute; inset: 0; }
.ouv-etiquette { position: absolute; top: 18px; z-index: 4; padding: 6px 14px; border-radius: 999px; font-weight: var(--graisse-demi); font-size: 14px; line-height: 1.3; white-space: nowrap; }

/* --- sans --- */
.ouv-sans { background: var(--ouv-bazar); overflow: hidden; }
.ouv-sans .ouv-etiquette { left: 18px; background: rgba(217, 72, 59, 0.18); color: var(--ouv-alerte-clair); border: 1px solid rgba(217, 72, 59, 0.45); }
.ouv-sans::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 40%, rgba(217, 72, 59, 0.16), transparent 60%); }
.ouv-bazar { position: absolute; inset: 0; }
.ouv-notif { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 14px; background: var(--ouv-notif); border: 1px solid var(--ouv-voile-fort);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35); font-size: 14.5px; line-height: 1.3; color: var(--ouv-notif-texte); white-space: nowrap; animation: ouv-tremble var(--d, 3s) ease-in-out infinite; transform: rotate(var(--r, 0deg)); }
.ouv-notif .ouv-ico { position: relative; flex: none; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.07); color: var(--ouv-notif-texte); }
.ouv-notif .ouv-ico svg { width: 18px; height: 18px; }
.ouv-notif small { display: block; color: var(--ouv-notif-2); font-size: 12.5px; }
.ouv-pastille { position: absolute; top: -7px; right: -9px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--ouv-alerte); color: var(--sur-accent); font-size: 12px; font-weight: var(--graisse-forte); display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--ouv-notif); }
.ouv-pastille.ouv-boum { animation: ouv-boum 0.4s ease-out; }
@keyframes ouv-boum { 40% { transform: scale(1.35); } }
@keyframes ouv-tremble { 0%, 100% { transform: rotate(var(--r, 0deg)) translate(0, 0); } 25% { transform: rotate(calc(var(--r, 0deg) + 0.8deg)) translate(1px, -2px); } 75% { transform: rotate(calc(var(--r, 0deg) - 0.8deg)) translate(-1px, 2px); } }
.ouv-postit { position: absolute; width: 150px; padding: 12px 12px 16px; background: var(--ouv-postit); color: var(--ouv-postit-texte); font-size: 15px; line-height: 1.3; border-radius: 3px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35); transform: rotate(var(--r, 0deg)); font-weight: 500; }
.ouv-sonne { animation: ouv-sonne 1.6s ease-in-out infinite; }
@keyframes ouv-sonne { 0%, 40%, 100% { transform: rotate(var(--r, 0deg)); } 5%, 15%, 25% { transform: rotate(calc(var(--r, 0deg) + 6deg)); } 10%, 20%, 30% { transform: rotate(calc(var(--r, 0deg) - 6deg)); } }
.ouv-pop { animation: ouv-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both, ouv-tremble var(--d, 3s) ease-in-out 0.5s infinite; }
@keyframes ouv-pop { from { opacity: 0; transform: scale(0.6) rotate(var(--r, 0deg)); } to { opacity: 1; transform: rotate(var(--r, 0deg)); } }

/* --- avec --- */
.ouv-avec { background: var(--fond-sombre); clip-path: inset(0 0 0 var(--x, 50%)); }
.ouv-avec::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1.4px); background-size: 24px 24px; }
.ouv-avec::after { content: ""; position: absolute; right: -10%; top: -20%; width: 70%; height: 120%; background: radial-gradient(closest-side, var(--ouv-lueur), transparent); }
.ouv-avec .ouv-etiquette { right: 18px; background: rgba(235, 194, 187, 0.14); color: var(--accent-sur-sombre); border: 1px solid var(--ouv-trait-rose); }
.ouv-bilan { position: absolute; z-index: 2; right: 6%; top: 50%; transform: translateY(-50%); width: clamp(260px, 44%, 430px); padding: 22px 22px 18px; border-radius: 20px;
  background: var(--ouv-voile); border: 1px solid var(--ouv-trait); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35); }
.ouv-bilan-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ouv-bilan-titre { margin: 0; font-size: 21px; font-weight: var(--graisse-forte); letter-spacing: -0.01em; line-height: 1.2; }
.ouv-heure { font-size: 13px; color: var(--texte-2-sur-sombre); }
.ouv-bilan ul { list-style: none; margin: 0; padding: 0; }
.ouv-bilan li { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 15.5px; opacity: 0.25; transition: opacity 0.4s; }
.ouv-bilan li.ouv-vu { opacity: 1; }
.ouv-coche { width: 26px; height: 26px; border-radius: 50%; background: var(--ouv-voile-fort); position: relative; transition: background 0.35s, transform 0.35s; }
.ouv-coche::after { content: ""; position: absolute; left: 9.5px; top: 5.5px; width: 6px; height: 11px; border: solid rgba(255, 255, 255, 0.3); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ouv-bilan li.ouv-vu .ouv-coche { background: var(--accent); transform: scale(1.08); }
.ouv-bilan li.ouv-vu .ouv-coche::after { border-color: var(--sur-accent); }
.ouv-bilan li b { font-variant-numeric: tabular-nums; color: var(--accent-sur-sombre); font-size: 18px; }
.ouv-bilan li.ouv-vous { color: var(--accent-sur-sombre); }
.ouv-bilan-pied { margin-top: 10px; font-size: 13px; color: var(--texte-2-sur-sombre); }

/* --- poignée --- */
.ouv-poignee { position: absolute; z-index: 5; top: 0; bottom: 0; left: var(--x, 50%); width: 0; }
.ouv-poignee::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--texte-sur-sombre); box-shadow: 0 0 16px rgba(255, 255, 255, 0.7); }
.ouv-poignee span { position: absolute; top: 50%; left: 0; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: var(--texte-sur-sombre); color: var(--fond-sombre);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }
.ouv-poignee span svg { width: 24px; height: 24px; }
.ouv-poignee em { position: absolute; top: calc(50% + 36px); left: 0; transform: translateX(-50%); font-style: normal; font-size: 12.5px; color: var(--texte-sur-sombre); background: rgba(0, 0, 0, 0.45); padding: 3px 9px; border-radius: 999px; white-space: nowrap; transition: opacity 0.4s; }
.ouv-comparo.ouv-touche .ouv-poignee em { opacity: 0; }

/* Réglages de l'accueil allégé, placés après les règles de base pour les remplacer */
@media (min-width: 761px) {
  /* notifications et post-it réduits d'environ 10 % ; le téléphone garde ses tailles */
  .ouv-notif { font-size: 13px; gap: 9px; padding: 9px 12px 9px 9px; border-radius: 13px; }
  .ouv-notif .ouv-ico { width: 30px; height: 30px; border-radius: 9px; }
  .ouv-notif .ouv-ico svg { width: 16px; height: 16px; }
  .ouv-notif small { font-size: 11.5px; }
  .ouv-pastille { min-width: 20px; height: 20px; font-size: 11px; top: -6px; right: -8px; }
  .ouv-postit { width: 135px; padding: 11px 11px 14px; font-size: 13.5px; }
  /* bilan : environ 45 % de la largeur du comparateur, calé à droite */
  .ouv-bilan { right: 4%; width: 45%; padding: 20px 20px 16px; }
  .ouv-bilan-titre { font-size: 20px; white-space: nowrap; }
  .ouv-heure { font-size: 12.5px; white-space: nowrap; }
  .ouv-bilan li { font-size: 15px; gap: 10px; }
}
/* Ordinateur (au-dessus de 1100 px) : le comparateur, à côté du texte, fait moins de 590 px de
   large ; le bilan est resserré pour que chaque libellé tienne sur une ligne. Entre 761 et
   1100 px, le comparateur occupe toute la largeur et garde les tailles ci-dessus. */
@media (min-width: 1101px) {
  .ouv-bilan { padding: 16px 16px 12px; }
  .ouv-bilan-titre { font-size: 18px; letter-spacing: 0; }   /* moins de 20 px : pas de serrage */
  .ouv-heure { font-size: 11.5px; }
  .ouv-bilan li { grid-template-columns: 22px 1fr auto; gap: 8px; padding: 10px 0; font-size: 13.5px; }
  .ouv-coche { width: 22px; height: 22px; }
  .ouv-coche::after { left: 8px; top: 4.5px; width: 5px; height: 9px; }
  .ouv-bilan li b { font-size: 16px; }
  .ouv-bilan-pied { font-size: 12px; }
}
@media (max-width: 760px) {
  .ouv-hero-accueil .ouv-comparo { height: 600px; border-radius: 18px; }
  /* titre 38 -> 32 px et espaces resserrés (2026-09-18) : le haut du comparateur remonte dans le premier écran d'un téléphone de 375 × 667 */
  .ouv-hero-accueil .ouv-titre h1 { font-size: 32px; }
  .ouv-hero-accueil .ouv-texte { margin-top: 12px; }
  .ouv-hero-accueil .ouv-actions { margin-top: 20px; }
  .ouv-notif { font-size: 13px; padding: 8px 10px 8px 8px; }
  .ouv-notif small { font-size: 11.5px; }
  .ouv-postit { width: 120px; font-size: 13px; }
  /* Téléphone : plus de curseur. Les deux côtés s'empilent sur toute la largeur, « Sans »
     (53 % de la hauteur) puis « Avec » (47 %), séparés par un filet clair ; chacun garde son
     étiquette en haut. Le script ne pose alors ni balayage ni écouteur de glissement. */
  .ouv-comparo { display: flex; flex-direction: column; cursor: auto; touch-action: auto; }
  .ouv-cote { position: relative; inset: auto; }
  .ouv-sans { flex: 0 0 53%; }
  .ouv-avec { flex: 0 0 47%; clip-path: none; border-top: 1px solid rgba(255, 255, 255, 0.22); }
  .ouv-poignee { display: none; }
  .ouv-etiquette { top: 12px; }
  .ouv-sans .ouv-etiquette { left: 14px; } .ouv-avec .ouv-etiquette { right: 14px; }
  /* bilan : toute la largeur du bloc moins les marges, sous l'étiquette ; lignes à 14 px */
  .ouv-bilan { left: 14px; right: 14px; width: auto; top: 50px; transform: none; padding: 12px 14px 10px; border-radius: 16px; }
  .ouv-bilan-tete { margin-bottom: 6px; }
  .ouv-bilan-titre { font-size: 17px; letter-spacing: 0; }
  .ouv-heure { font-size: 12px; }
  .ouv-bilan li { grid-template-columns: 20px 1fr auto; gap: 10px; font-size: 14px; padding: 4px 0; }
  .ouv-coche { width: 20px; height: 20px; }
  .ouv-coche::after { left: 7px; top: 3.5px; width: 5px; height: 9px; }
  .ouv-bilan li b { font-size: 15px; }
  .ouv-bilan-pied { margin-top: 6px; font-size: 12px; }
}

/* ==========================================================================
   Automatisation : textes à gauche, cascade de tâches à droite
   ========================================================================== */
.ouv-hero-auto::after { content: ""; position: absolute; right: -10%; top: 10%; width: 900px; height: 900px; z-index: -1; background: radial-gradient(closest-side, rgba(140, 47, 43, 0.28), rgba(140, 47, 43, 0)); }
.ouv-hero-auto { --ouv-col-texte: 6; --ouv-col-zone: 6; }
.ouv-compteur-ligne { margin: 22px 0 0; line-height: 1.3; }
.ouv-compteur { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border-radius: 999px; background: var(--ouv-voile); border: 1px solid var(--ouv-trait); font-size: 14px; color: var(--texte-2-sur-sombre); }
.ouv-compteur b { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 26px; padding: 0 8px; border-radius: 999px; background: var(--accent); color: var(--sur-accent); font-variant-numeric: tabular-nums; font-size: 14px; }

/* Cascade à deux colonnes de cartes. Réglage du 2026-09-18 (paquet B) : l'inclinaison
   marquée revient (rotateX 34 degrés, rotateZ -17 degrés) et le mur occupe plus que
   la largeur de sa colonne. Pour qu'aucune carte ne soit coupée sur les côtés malgré
   la dérive des colonnes inclinées, le mur déborde de la zone de 24 px dans la
   gouttière à gauche (il ne touche pas le texte) et de la marge du site à droite
   (il ne sort pas de la page). Hauteur : celle de la zone, 520 px. Seul le fondu du
   haut et du bas masque les cartes qui entrent et sortent. L'échelle et le décalage
   sont réglés par mesure, étiquette comprise. L'inclinaison est pilotée par le
   script au survol, par variables, sans toucher à l'échelle. */
.ouv-mur { position: absolute; inset: 0 calc(-1 * var(--marge-laterale)) 0 -24px; z-index: 1; perspective: 2600px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); }
.ouv-plan { --ouv-echelle: 0.62; --ouv-dx: -15px; position: absolute; left: 50%; top: 50%; width: 540px; height: 1100px; margin: -550px 0 0 -270px; transform-style: preserve-3d;
  transform: translateX(var(--ouv-dx)) rotateX(var(--ouv-rx, 34deg)) rotateZ(var(--ouv-rz, -17deg)) translateZ(-40px) scale(var(--ouv-echelle)); }
.ouv-colonne { position: absolute; top: 0; bottom: 0; width: 256px; }
.ouv-colonne:nth-child(1) { left: 0; } .ouv-colonne:nth-child(2) { left: 284px; }
.ouv-tache { position: absolute; left: 0; right: 0; height: 92px; padding: 14px 14px 12px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12);
  display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-content: center;
  transition: background 0.35s, border-color 0.35s, box-shadow 0.35s; }
.ouv-tache .ouv-ico { grid-row: 1 / 3; width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.07); color: var(--texte-2-sur-sombre); transition: background 0.35s, color 0.35s; }
.ouv-tache .ouv-ico svg { width: 20px; height: 20px; }
.ouv-tache b { font-size: 15px; font-weight: var(--graisse-demi); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ouv-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 14px; line-height: 1.4; color: var(--texte-2-sur-sombre); white-space: nowrap; }
.ouv-etat { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--graisse-demi); }
.ouv-etat i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); }
.ouv-tache.ouv-fait { background: rgba(140, 47, 43, 0.30); border-color: rgba(235, 194, 187, 0.5); box-shadow: 0 12px 40px rgba(140, 47, 43, 0.25); }
.ouv-tache.ouv-fait .ouv-ico { background: rgba(235, 194, 187, 0.18); color: var(--accent-sur-sombre); }
.ouv-tache.ouv-fait .ouv-etat { color: var(--accent-sur-sombre); }
.ouv-tache.ouv-fait .ouv-etat i { background: var(--accent-sur-sombre); box-shadow: 0 0 10px var(--accent-sur-sombre); }
.ouv-tache.ouv-eclair { animation: ouv-eclair 0.7s ease-out; }
@keyframes ouv-eclair { 0% { box-shadow: 0 0 0 0 rgba(235, 194, 187, 0.8), 0 0 60px rgba(235, 194, 187, 0.8); } 100% { box-shadow: 0 0 0 14px rgba(235, 194, 187, 0), 0 12px 40px rgba(140, 47, 43, 0.25); } }
.ouv-ligne { position: absolute; left: -160px; right: -30px; height: 2px; top: 50%; background: linear-gradient(90deg, rgba(235, 194, 187, 0), var(--accent-sur-sombre) 12%, var(--accent-sur-sombre) 88%, rgba(235, 194, 187, 0));
  box-shadow: 0 0 18px 2px rgba(235, 194, 187, 0.7), 0 0 60px 8px rgba(140, 47, 43, 0.6); transform: translateZ(2px); }
.ouv-ligne::after { content: ""; position: absolute; top: -3px; height: 8px; width: 160px; border-radius: 8px; background: radial-gradient(closest-side, #fff, rgba(255, 255, 255, 0)); animation: ouv-balaye 3.2s ease-in-out infinite; }
@keyframes ouv-balaye { 0% { left: 0; } 50% { left: calc(100% - 160px); } 100% { left: 0; } }
/* étiquette au bout gauche de la ligne lumineuse, hors des colonnes de cartes */
.ouv-balise { position: absolute; right: calc(100% + 16px); top: 50%; transform: translateY(-50%) translateZ(4px); display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--accent); color: var(--sur-accent); font-weight: var(--graisse-demi); font-size: 14px; line-height: 1.3; white-space: nowrap; box-shadow: 0 8px 24px rgba(140, 47, 43, 0.5); }
.ouv-balise i { width: 8px; height: 8px; border-radius: 50%; background: var(--sur-accent); animation: ouv-clignote 1.4s infinite; }
@keyframes ouv-clignote { 50% { opacity: 0.3; } }
@media (max-width: 1100px) {
  .ouv-plan { --ouv-echelle: 0.9; --ouv-dx: 60px; }
  .ouv-mur { position: relative; inset: auto; height: 460px;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); }
}
@media (max-width: 760px) {
  .ouv-mur { height: 400px; }
  .ouv-compteur-suite { display: none; }
  .ouv-plan { transform: rotateX(30deg) rotateZ(-14deg) scale(0.75) !important; }
  /* téléphone : pas de place à gauche des colonnes, l'étiquette reste sur la ligne */
  .ouv-balise { right: auto; left: 150px; transform: translate(0, -140%) translateZ(4px); }
  .ouv-ligne { left: -60px; right: -60px; }
}

/* ==========================================================================
   Restaurant : textes à gauche, téléphone animé à droite
   ========================================================================== */
.ouv-hero-resto { --ouv-col-texte: 5; --ouv-col-zone: 7; }
.ouv-hero-resto::after { content: ""; position: absolute; left: 72%; top: 55%; width: 760px; height: 760px; transform: translate(-50%, -50%); z-index: -1; background: radial-gradient(closest-side, rgba(140, 47, 43, 0.38), rgba(140, 47, 43, 0)); }
/* Ligne collée sous les boutons : le bloc prend la largeur de la rangée de boutons,
   la ligne s'aligne sur le bord gauche du bouton et ne dépasse jamais cette largeur. */
.ouv-actions-bloc { width: fit-content; max-width: 100%; }
.ouv-sous-actions { width: 0; min-width: 100%; margin: 12px 0 0; font-size: 14px; line-height: 1.4; color: var(--texte-2-sur-sombre); text-align: left; }
@media (max-width: 1100px) { .ouv-actions-bloc { margin-inline: auto; } }
.ouv-langues { display: flex; gap: 8px; margin-top: 22px; flex-wrap: wrap; }
.ouv-langues span { padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05); font-size: 13px; line-height: 1.4; color: var(--texte-2-sur-sombre); transition: all 0.3s; }
.ouv-langues span.ouv-actif { border-color: var(--accent-sur-sombre); color: var(--texte-sur-sombre); background: rgba(235, 194, 187, 0.14); }
/* Téléphone : pastilles resserrées, hauteur 32 px. Sous 480 px, où les cinq ne tiennent plus
   sur une ligne, le bloc est limité à 240 px : deux lignes équilibrées (trois pastilles puis
   deux, centrées) au lieu de quatre et une. */
@media (max-width: 760px) {
  .ouv-langues { gap: 6px; }
  .ouv-langues span { padding: 6px 9px; }
}
@media (max-width: 480px) {
  .ouv-langues { max-width: 240px; margin-inline: auto; }
}

/* la scène */
.ouv-scene { position: relative; height: 100%; perspective: 1400px; line-height: 1.4; }
.ouv-flotte { position: absolute; left: 50%; top: 50%; width: 300px; height: 610px; margin: -305px 0 0 -150px; transform-style: preserve-3d;
  transform: rotateY(var(--ry, -14deg)) rotateX(var(--rx, 6deg)) scale(var(--ouv-tel, 1)); transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.ouv-telephone { position: absolute; inset: 0; border-radius: 46px; background: var(--ouv-coque); padding: 12px;
  box-shadow: 0 0 0 2px var(--ouv-coque-bord), 0 0 0 7px var(--ouv-coque), 0 50px 90px rgba(0, 0, 0, 0.55), 0 0 80px var(--ouv-lueur); animation: ouv-flotte 7s ease-in-out infinite; }
@keyframes ouv-flotte { 50% { transform: translateY(-8px); } }
.ouv-ecran { position: relative; height: 100%; border-radius: 36px; overflow: hidden; background: var(--ouv-ecran); color: var(--texte); display: flex; flex-direction: column; }
.ouv-encoche { position: absolute; top: 8px; left: 50%; width: 90px; height: 24px; margin-left: -45px; border-radius: 14px; background: var(--ouv-coque); z-index: 3; }
.ouv-barre-haut { padding: 44px 14px 10px; background: var(--fond); border-bottom: 1px solid var(--bordure); display: flex; align-items: center; gap: 10px; }
.ouv-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--sur-accent); font-weight: var(--graisse-forte); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.ouv-barre-haut b { display: block; font-size: 15px; }
.ouv-barre-haut small { display: block; font-size: 12px; color: var(--texte-2); height: 15px; line-height: 15px; }
.ouv-barre-haut small.ouv-ecrit { color: var(--accent); }
/* Le fil commence en haut de l'écran (l'empilement par le bas est annulé le 2026-09-18) :
   l'étiquette du jour et l'échange précédent sont en haut, les nouveaux messages
   s'ajoutent dessous. Quand le fil dépasse l'écran, le script le fait défiler : les
   plus anciens sortent par le haut, le dernier reste visible au-dessus de la saisie. */
.ouv-fil { flex: 1; min-height: 0; padding: 12px 10px; display: flex; flex-direction: column; justify-content: flex-start; gap: 7px; overflow: hidden;
  background-image: radial-gradient(circle, rgba(31, 46, 54, 0.05) 1px, transparent 1.4px); background-size: 14px 14px; }
.ouv-fil > * { flex: none; }
.ouv-bulle { max-width: 82%; padding: 8px 11px 16px; border-radius: 14px; font-size: 14px; line-height: 1.35; position: relative; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
  animation: ouv-arrive 0.35s cubic-bezier(0.2, 1.2, 0.4, 1) both; transform-origin: bottom left; }
.ouv-bulle time { position: absolute; right: 9px; bottom: 3px; font-size: 10.5px; color: var(--texte-2); }
/* étiquette de jour et court échange précédent, grisé : l'écran n'est jamais vide */
.ouv-jour { align-self: center; padding: 3px 10px; border-radius: 999px; background: rgba(31, 46, 54, 0.08); color: var(--texte-2); font-size: 11px; line-height: 1.4; }
.ouv-bulle.ouv-ancien { opacity: 0.55; animation: none; }
.ouv-client { align-self: flex-start; background: var(--fond); border-top-left-radius: 4px; }
.ouv-resto { align-self: flex-end; background: var(--ouv-accent-clair); border-top-right-radius: 4px; transform-origin: bottom right; }
.ouv-resto time::after { content: " ✓✓"; color: var(--ouv-coches); letter-spacing: -2px; }
.ouv-saisie { align-self: flex-end; background: var(--ouv-accent-clair); padding: 11px 14px; border-radius: 14px; border-top-right-radius: 4px; display: flex; gap: 4px; animation: ouv-arrive 0.3s both; transform-origin: bottom right; }
.ouv-saisie i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: 0.35; animation: ouv-point 1s infinite; }
.ouv-saisie i:nth-child(2) { animation-delay: 0.15s; } .ouv-saisie i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ouv-point { 30% { opacity: 1; transform: translateY(-3px); } }
@keyframes ouv-arrive { from { opacity: 0; transform: scale(0.7) translateY(8px); } to { opacity: 1; transform: none; } }
.ouv-barre-bas { padding: 9px 10px 14px; background: var(--fond); border-top: 1px solid var(--bordure); display: flex; gap: 8px; align-items: center; }
.ouv-barre-bas span { flex: 1; height: 34px; border-radius: 17px; background: var(--ouv-ecran); font-size: 13px; color: var(--ouv-notif-2); display: flex; align-items: center; padding: 0 14px; }
.ouv-barre-bas i { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); }

/* cartes qui sortent du téléphone ; la carte de gauche reste dans la scène
   (elle passe à la ligne au besoin) pour ne jamais recouvrir les textes */
.ouv-puce { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 14px;
  background: rgba(18, 49, 62, 0.85); border: 1px solid var(--ouv-trait-rose); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: 14.5px; line-height: 1.3; opacity: 0; transform: translateY(10px) scale(0.95); transition: opacity 0.45s, transform 0.45s cubic-bezier(0.2, 1.2, 0.4, 1); }
.ouv-puce.ouv-visible { opacity: 1; transform: none; }
.ouv-puce .ouv-ico { flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--accent); display: flex; align-items: center; justify-content: center; }
.ouv-puce .ouv-ico svg { width: 17px; height: 17px; color: var(--sur-accent); }
.ouv-puce small { display: block; color: var(--texte-2-sur-sombre); font-size: 12px; }
.ouv-puce.ouv-gauche { right: calc(50% + 118px); max-width: calc(50% - 118px); }
.ouv-puce.ouv-droite { left: min(calc(50% + 118px), calc(100% - 200px)); max-width: 250px; }

/* le téléphone du patron */
.ouv-patron { position: absolute; z-index: 5; left: min(calc(50% + 96px), calc(100% - 220px)); bottom: 80px; width: 236px; padding: 14px; border-radius: 18px; background: var(--fond); color: var(--texte);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45); opacity: 0; transform: translateY(20px) rotate(3deg); transition: opacity 0.45s, transform 0.5s cubic-bezier(0.2, 1.2, 0.4, 1); }
.ouv-patron.ouv-visible { opacity: 1; transform: rotate(3deg); }
.ouv-patron-tete { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--texte-2); margin-bottom: 8px; }
.ouv-patron-tete i { width: 22px; height: 22px; border-radius: 50%; background: var(--ouv-telegram); display: flex; align-items: center; justify-content: center; }
.ouv-patron-tete i svg { width: 12px; height: 12px; }
.ouv-patron b { display: block; font-size: 15px; margin-bottom: 2px; }
.ouv-patron-detail { margin: 0 0 12px; font-size: 14px; color: var(--texte-2); }
.ouv-choix { display: flex; gap: 8px; }
.ouv-choix span { flex: 1; text-align: center; font-weight: var(--graisse-demi); font-size: 14px; padding: 9px 0; border-radius: 10px; border: 1px solid var(--bordure); background: var(--fond); color: var(--texte); transition: all 0.2s; }
.ouv-choix span.ouv-oui { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }
.ouv-choix span.ouv-appuie { transform: scale(0.94); box-shadow: 0 0 0 6px rgba(140, 47, 43, 0.25); }
.ouv-patron-fait { display: none; align-items: center; gap: 6px; font-weight: var(--graisse-demi); color: var(--accent); font-size: 14px; }
.ouv-patron.ouv-valide .ouv-choix { display: none; }
.ouv-patron.ouv-valide .ouv-patron-fait { display: flex; }
.ouv-doigt { position: absolute; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); border: 2px solid #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  opacity: 0; pointer-events: none; transition: left 0.6s cubic-bezier(0.3, 0.7, 0.2, 1), top 0.6s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.3s; z-index: 6; }

/* Téléphone réduit d'environ 15 % pour tenir dans la zone de 520 px (300 x 610 px
   à l'échelle 0,82), cartes et carte du patron proportionnées et gardées dans la
   zone. Le téléphone (760 px et moins) garde ses réglages d'origine. */
@media (min-width: 761px) {
  .ouv-flotte { --ouv-tel: 0.82; }
  .ouv-puce { gap: 9px; padding: 9px 12px 9px 9px; border-radius: 13px; font-size: 13.5px; }
  .ouv-puce .ouv-ico { width: 27px; height: 27px; border-radius: 8px; }
  .ouv-puce .ouv-ico svg { width: 15px; height: 15px; }
  .ouv-puce small { font-size: 11.5px; }
  .ouv-puce.ouv-gauche { top: 96px; right: calc(50% + 100px); max-width: calc(50% - 104px); }
  .ouv-puce.ouv-droite { top: 70px; left: min(calc(50% + 100px), calc(100% - 198px)); max-width: 196px; }
  .ouv-patron { width: 206px; padding: 12px; border-radius: 16px; bottom: 44px; left: min(calc(50% + 80px), calc(100% - 216px)); }
  .ouv-patron-tete { font-size: 11.5px; margin-bottom: 6px; }
  .ouv-patron b { font-size: 14px; }
  .ouv-patron-detail { font-size: 13px; margin-bottom: 10px; }
  .ouv-choix span { font-size: 13px; padding: 8px 0; }
  .ouv-patron-fait { font-size: 13px; }
}
@media (max-width: 1100px) {
  .ouv-scene { height: 580px; }
}
@media (max-width: 760px) {
  .ouv-scene { height: 600px; perspective: none; }
  .ouv-puce.ouv-gauche { top: 150px; } .ouv-puce.ouv-droite { top: 120px; }
  .ouv-flotte { transform: scale(0.86) !important; }
  .ouv-puce { display: none; }
  .ouv-patron { left: 50%; right: auto; margin-left: -125px; bottom: 40px; transform: translateY(20px); }
  .ouv-patron.ouv-visible { transform: none; }
}

/* ==========================================================================
   Mouvement réduit : tout s'affiche fixe
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ouv-notif, .ouv-sonne, .ouv-pop, .ouv-pastille.ouv-boum,
  .ouv-ligne::after, .ouv-balise i, .ouv-tache.ouv-eclair,
  .ouv-telephone, .ouv-saisie i, .ouv-bulle, .ouv-saisie { animation: none; }
  .ouv-flotte, .ouv-puce, .ouv-patron, .ouv-doigt, .ouv-bilan li, .ouv-coche, .ouv-tache, .ouv-langues span { transition: none; }
}


/* ==========================================================================
   En-tête du site sur fond bleu (accueil, automatisation, restaurant)
   Le vrai en-tête du site est gardé. La classe .ouv-entete-sombre marque les
   pages dont l'ouverture est sombre ; .ouv-sur-sombre est présente tant que
   l'en-tête collant est au-dessus de l'ouverture (js/entete-sombre.js la
   retire quand il descend sur les sections claires : il reprend alors son
   apparence habituelle). Mentions légales et confidentialité ne l'ont pas.
   ========================================================================== */
.ouv-entete-sombre { transition: box-shadow 200ms var(--courbe), background-color 200ms var(--courbe), border-color 200ms var(--courbe); }
.ouv-entete-sombre.ouv-sur-sombre { background: var(--fond-sombre); border-bottom-color: transparent; }
.ouv-entete-sombre.ouv-sur-sombre.ombre { box-shadow: 0 1px 0 var(--bordure-sombre), 0 4px 12px rgba(0, 0, 0, 0.25); }
.ouv-sur-sombre .logo, .ouv-sur-sombre .logo:hover { color: var(--texte-sur-sombre); }
.ouv-sur-sombre .logo-symbole { color: var(--accent-sur-sombre); }
.ouv-sur-sombre .logo:hover .logo-symbole { color: var(--texte-sur-sombre); }
.ouv-sur-sombre .menu a:not(.bouton) { color: var(--texte-2-sur-sombre); }
.ouv-sur-sombre .menu a:not(.bouton):hover,
.ouv-sur-sombre .menu a:not(.bouton)[aria-current="page"] { color: var(--texte-sur-sombre); }
.ouv-sur-sombre .menu a:not(.bouton)::after { background: var(--accent-sur-sombre); }
.ouv-sur-sombre .menu-bouton { color: var(--texte-sur-sombre); border-color: var(--texte-sur-sombre); }
.ouv-sur-sombre a:focus-visible, .ouv-sur-sombre .bouton:focus-visible, .ouv-sur-sombre .menu-bouton:focus-visible { outline-color: var(--accent-sur-sombre); }
/* Panneau du menu en bouton (sous 1100 px) : il est dans l'en-tête, il en prend donc le
   fond sombre et les liens clairs ; seuls les filets entre les liens sont à régler. */
@media (max-width: 1100px) {
  .ouv-sur-sombre .menu a:not(.bouton) { border-bottom-color: var(--bordure-sombre); }
}
@media (prefers-reduced-motion: reduce) { .ouv-entete-sombre { transition: none; } }