/* Seyll Laureen - feuille de style commune.
   Les couleurs viennent de lumiere.js (heure réelle du visiteur) : --ciel, --papier, --texte, --doux, --accent, --trait.
   Valeurs par défaut = matin, pour un affichage correct avant le premier calcul. */
:root {
  --ciel:#f7f5f1; --papier:#ffffff; --texte:#1c1b18; --doux:#6b6458; --accent:#8a6a3a; --trait:#1c1b1833; --logo:invert(1);
  --serif:'Cormorant Garamond', Georgia, serif; --sans:'Outfit', system-ui, -apple-system, sans-serif;
  --bas: env(safe-area-inset-bottom); --haut: env(safe-area-inset-top);
}
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body { background:var(--ciel); color:var(--texte); font-family:var(--sans); font-weight:300; line-height:1.5; min-height:100vh;
  transition:background-color 1.4s ease, color 1.4s ease; }
img { display:block; max-width:100%; }
button { font:inherit; color:inherit; }
a { color:inherit; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* En-tête : logo et langues. La navigation principale, elle, vit en bas sur téléphone (sous le pouce). */
.entete { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:calc(10px + var(--haut)) 18px 10px; background:color-mix(in srgb, var(--ciel) 86%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); transition:background-color 1.4s; }
.entete .logo img { width:118px; height:auto; filter:var(--logo); transition:filter 1.4s; }
.langues { display:flex; gap:2px; }
.langues button { border:none; background:none; padding:6px 7px; font-size:12px; font-weight:600; letter-spacing:.08em; color:var(--doux); cursor:pointer; border-radius:6px; }
.langues button[aria-pressed="true"] { color:var(--texte); background:var(--trait); }

.titre-page { padding:18px 18px 8px; max-width:1400px; margin:0 auto; }
.titre-page .sur { font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); }
.titre-page h1 { font:500 clamp(40px,7vw,84px)/1 var(--serif); margin:.12em 0 .18em; }
.titre-page p { color:var(--doux); max-width:52ch; }

.pied { padding:40px 18px calc(110px + var(--bas)); text-align:center; font-size:12px; color:var(--doux); }
.pied a { color:var(--doux); }

/* Bandeau du bas, le même sur toutes les pages (sauf l'accueil) : toujours blanc, son nom en foncé, qui ramène à
   l'accueil. Ne suit pas la lumière de l'heure (demande de David). */
/* Le bandeau blanc : texte centré sur toute sa hauteur, barre d'accueil de l'iPhone comprise (même hauteur totale qu'avant),
   puis remonté de 20 % de cette hauteur (demande de David).
   Lien vers l'accueil signalé par un trait fin et un reflet de lumière qui traverse les lettres, comme sur le portrait. */
.signature-bas { position:fixed; z-index:35; left:0; right:0; bottom:0; margin:0;
  padding:calc(11px + var(--bas) / 2) 16px; text-align:center; white-space:nowrap;
  background:#fff; box-shadow:0 -1px 0 rgba(28,27,24,.08); font:600 11px/1.3 var(--sans); letter-spacing:.15em; text-transform:uppercase; }
.signature-bas { overflow:hidden; }
/* Un rai de lumière dorée balaie tout le bandeau, et le reflet traverse les lettres au même instant (la lumière, sa
   marque). Toutes les 4,5 s, plus franc qu'avant à la demande de David. */
.signature-bas::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, rgba(231,180,106,.0) 40%, rgba(231,180,106,.55) 50%, rgba(231,180,106,0) 60%, transparent 62%);
  background-size:300% 100%; background-position:100% 0; animation:balayage-bandeau 4.5s ease-in-out 1s infinite; }
.signature-bas a { display:inline-block; position:relative; z-index:1; top:calc(-9.7px - var(--bas) * .2); padding:6px 4px;
  text-decoration:underline 1.5px #b8874a; text-underline-offset:6px;
  color:transparent; -webkit-background-clip:text; background-clip:text;
  background-image:linear-gradient(100deg, #1c1b18 40%, #c08a3e 47%, #e9b96e 50%, #c08a3e 53%, #1c1b18 60%); background-size:300% 100%; background-position:100% 0;
  animation:reflet-signature 4.5s ease-in-out 1s infinite; transition:transform .15s; }
.signature-bas a:active { transform:scale(.96); }
@keyframes reflet-signature { 0% { background-position:100% 0; } 40%, 100% { background-position:0 0; } }
@keyframes balayage-bandeau { 0% { background-position:100% 0; } 40%, 100% { background-position:0 0; } }
@media (hover:hover) { .signature-bas a:hover { text-decoration-color:#1c1b18; } }
@media (prefers-reduced-motion:reduce) { .signature-bas a, .signature-bas::before { animation:none; } }

/* Le site se tient en portrait (demande de David). Le navigateur ne laisse pas bloquer la rotation sur iPhone :
   en paysage sur un téléphone, un écran sobre demande de le retourner. Ordinateurs et tablettes non concernés. */
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  html, body { overflow:hidden !important; }
  body::after { content:"Tournez votre téléphone"; position:fixed; inset:0; z-index:2147483647; display:flex; align-items:center; justify-content:center;
    background:#0b0806; color:#fbf8f2; font:italic 500 30px/1.2 var(--serif); letter-spacing:.01em; text-align:center; padding:20px; }
}

/* Mentions légales et confidentialité : une page de lecture, sobre. */
.page-legale .entete { padding:calc(12px + var(--haut)) 18px 12px; }
.legal { max-width:680px; margin:0 auto; padding:18px 20px calc(110px + var(--bas)); font-size:15.5px; line-height:1.6; }
.legal .sur { font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); }
.legal h1 { font:500 clamp(38px, 10vw, 56px)/1.05 var(--serif); margin:6px 0 4px; }
.legal .maj { font-size:13px; color:var(--doux); margin-bottom:22px; }
.legal h2 { font:500 26px/1.2 var(--serif); margin:34px 0 10px; }
.legal h3 { font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:6px; }
.legal p, .legal ul { margin-bottom:12px; }
.legal ul { padding-left:18px; }
.legal li { margin-bottom:8px; }
.legal dl { border-top:1px solid var(--trait); }
.legal dl > div { display:grid; grid-template-columns:110px 1fr; gap:12px; padding:9px 0; border-bottom:1px solid var(--trait); }
.legal dt { font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--doux); padding-top:2px; }
.legal dd { margin:0; overflow-wrap:anywhere; }
.legal [hidden] { display:none; }
.legal .traitement { border:1px solid var(--trait); border-radius:14px; padding:16px; margin-bottom:12px; background:var(--papier); }
.legal .traitement dl { margin-top:10px; }
.legal .traitement dl > div { grid-template-columns:120px 1fr; }
.legal .voir { margin-top:36px; font-weight:500; }

/* Cookies : une information, pas un consentement. Le site ne dépose que le cookie de l'espace client, indispensable :
   rien à accepter ni à refuser. Affichée une fois, au-dessus du bandeau du bas. */
.avis-cookies { position:fixed; z-index:36; left:12px; right:12px; bottom:calc(60px + var(--bas)); max-width:460px; margin:0 auto; display:flex; align-items:center; gap:14px;
  padding:14px 14px 14px 18px; border-radius:16px; background:#1c1b18; color:#f7f5f1; font-size:13px; line-height:1.45; box-shadow:0 12px 30px rgba(0,0,0,.28);
  animation:avis-entre .5s cubic-bezier(.2,.8,.2,1) 1.2s both; }
.avis-cookies a { color:#e7c48f; }
.avis-cookies button { flex:none; border:none; border-radius:999px; padding:10px 16px; background:#f7f5f1; color:#1c1b18; font:600 12px var(--sans); letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
@keyframes avis-entre { from { opacity:0; transform:translateY(16px); } }
@media (prefers-reduced-motion:reduce) { .avis-cookies { animation:none; } }
/* Liens vers les pages légales, sous les formulaires (contact, espace client). */
.liens-legaux { margin:26px 0 0; font-size:12px; color:var(--doux); text-align:center; }
.liens-legaux a { color:inherit; }
/* Hors connexion : bandeau discret sous l'encoche. */
.hors-connexion { position:fixed; z-index:80; left:12px; right:12px; top:calc(8px + var(--haut)); max-width:460px; margin:0 auto; padding:9px 14px; border-radius:12px;
  background:#1c1b18; color:#f7f5f1; font:500 12.5px/1.4 var(--sans); text-align:center; box-shadow:0 8px 22px rgba(0,0,0,.25); }
/* Photos protégées comme sur davidmertens.com (choix de David, sans filigrane) : ni sélection, ni menu « Enregistrer
   l'image » à l'appui long sur iPhone ; clic droit et glisser bloqués dans app.js. */
img { -webkit-user-drag:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }