/* COCO'PHOTO — maquette privée, photographe à Louvroil.
   =====================================================================
   Son univers, pas celui d'une autre : le rose de sa carte et de sa page, une prune profonde pour
   l'encre, un vert sapin pour Noël. Playfair Display aux titres, Lato au texte, une écriture
   (Dancing Script) pour sa signature seulement. Le motif : le diaphragme de son logo.
   Le cœur : le calendrier de ses créneaux de Noël, une heure choisie = une demande prête. */

@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/playfair.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400 900;font-display:swap;src:url(fonts/playfair-it.woff2) format('woff2')}
@font-face{font-family:'Lato';font-weight:400;font-display:swap;src:url(fonts/lato-400.woff2) format('woff2')}
@font-face{font-family:'Lato';font-weight:700;font-display:swap;src:url(fonts/lato-700.woff2) format('woff2')}
@font-face{font-family:'Dancing Script';font-weight:500 700;font-display:swap;src:url(fonts/dancing.woff2) format('woff2')}

:root{
  --fond:#fbf3f3;          /* un rose à peine : celui de sa page */
  --surface:#ffffff;
  --encre:#2f1f2a;         /* prune */
  --doux:#6a5462;          /* 6,3:1 sur --fond */
  --rose:#a8405f;          /* framboise, texte et action (5,4:1 sur --fond) */
  --rose-clair:#f2dde3;
  --sapin:#1f4a3e;         /* Noël */
  --trait:#e7d3d8;
  --gut:clamp(20px,5vw,80px);
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fond);color:var(--encre);font:400 18px/1.65 Lato,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:var(--rose)}
.evitement{position:absolute;left:12px;top:12px;z-index:50;transform:translateY(-200%);padding:10px 16px;background:var(--encre);color:#fff;text-decoration:none;border-radius:999px}
.evitement:focus{transform:none}
.evitement:focus-visible{outline:3px solid #fff;outline-offset:2px}
.noel:focus,.contact:focus,#t-demande:focus{outline:none}
.noel:focus-visible,.contact:focus-visible{outline:2px solid var(--rose);outline-offset:-4px}
.noel{position:relative}
.noel .evitement{left:var(--gut);transform:none}
.noel .evitement:not(:focus){clip-path:inset(50%);width:1px;height:1px;overflow:hidden;padding:0}
#t-demande{scroll-margin-top:20px}
h1,h2,h3{font-family:'Playfair Display',Georgia,serif;font-weight:500;margin:0;line-height:1.08}
h2{font-size:clamp(34px,4.4vw,58px);letter-spacing:-.01em}
.sur-titre{margin:0 0 14px;font:700 13px/1.3 Lato,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--rose)}
.chapo{margin:.8em 0 0;max-width:52ch;font-size:clamp(18px,1.5vw,21px);color:var(--doux)}
.aide{margin:10px 0 0;font-size:15px;line-height:1.5;color:var(--doux)}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border-radius:999px;
  border:2px solid var(--rose);background:var(--rose);color:#fff;font:700 16px/1.2 Lato,sans-serif;text-decoration:none;cursor:pointer}
.btn:hover{background:#8f3350;border-color:#8f3350}
.btn-clair{background:transparent;color:var(--rose)}
.btn-clair:hover{background:var(--rose-clair);color:#8f3350}
.btn:focus-visible,.lien:focus-visible,a:focus-visible{outline:2px solid var(--encre);outline-offset:3px}

/* Le diaphragme de son logo : six lamelles, en CSS. */
.diaph{display:inline-block;width:1.05em;height:1.05em;border-radius:50%;vertical-align:-.15em;margin-right:.45em;
  background:conic-gradient(from 15deg,var(--rose) 0 50deg,#c9708c 50deg 60deg,var(--rose) 60deg 110deg,#c9708c 110deg 120deg,
    var(--rose) 120deg 170deg,#c9708c 170deg 180deg,var(--rose) 180deg 230deg,#c9708c 230deg 240deg,var(--rose) 240deg 290deg,
    #c9708c 290deg 300deg,var(--rose) 300deg 350deg,#c9708c 350deg 360deg);
  -webkit-mask:radial-gradient(circle,transparent 0 28%,#000 29%);mask:radial-gradient(circle,transparent 0 28%,#000 29%)}

/* ── l'ouverture ─────────────────────────────────────────────────────── */
.ouverture{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,80px);align-items:center;
  min-height:min(100svh,920px);padding:clamp(28px,6vh,64px) var(--gut)}
.marque{margin:0 0 clamp(18px,4vh,40px);font:700 15px/1 Lato,sans-serif;letter-spacing:.22em;color:var(--encre)}
h1{font-size:clamp(40px,6.4vw,92px);letter-spacing:-.02em;overflow-wrap:anywhere}
h1 em{font-style:italic;color:var(--rose)}
.ouv-sous{margin:1em 0 0;max-width:40ch;font-size:clamp(18px,1.55vw,21px);color:var(--doux)}
.ouv-actions{display:flex;flex-wrap:wrap;gap:12px;margin:clamp(22px,4vh,36px) 0 0}

.iris{margin:0;justify-self:center;width:min(100%,560px)}
.iris-cadre{position:relative;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--encre);
  box-shadow:0 0 0 10px var(--encre),0 0 0 11px #6a5462,0 30px 60px -30px rgb(47 31 42 / .55)}
.iris-cadre img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.iris-cadre .diapo:not(:first-child){opacity:0}
/* Les décors se succèdent : 6 s chacun, fondu de 1 s, léger recul (Ken Burns), en boucle. */
.js .iris.ouvert .diapo{animation:diapo 24s linear infinite both}
.js .iris.ouvert .diapo:nth-child(2){animation-delay:6s}
.js .iris.ouvert .diapo:nth-child(3){animation-delay:12s}
.js .iris.ouvert .diapo:nth-child(4){animation-delay:18s}
.js .iris.ouvert .diapo:first-child{animation-name:diapo-premier}
.iris.en-pause .diapo{animation-play-state:paused !important}
@keyframes diapo{0%{opacity:0;transform:scale(1.1)}4%{opacity:1}25%{opacity:1}29%{opacity:0}100%{opacity:0;transform:scale(1)}}
@keyframes diapo-premier{0%{opacity:1;transform:scale(1.1)}25%{opacity:1}29%{opacity:0}96%{opacity:0}100%{opacity:1;transform:scale(1)}}
.lamelles{position:absolute;inset:-2%;width:104%;height:104%;display:none}
.js .lamelles{display:block}
.lamelle{fill:#2f1f2a;stroke:#5d4655;stroke-width:.8;transform-box:view-box;transform-origin:0 0;
  transform:translate(-2px,0) rotate(0deg);transition:transform 1.7s cubic-bezier(.6,0,.15,1)}
.iris.ouvert .lamelle{transform:translate(112px,-18px) rotate(-22deg)}
.iris figcaption{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-top:22px;text-align:center;font-size:14px;color:var(--doux)}
.pause{min-height:36px;padding:6px 14px;border-radius:999px;border:1.5px solid #9c8792;background:var(--surface);color:var(--encre);font:700 13px/1 Lato,sans-serif;cursor:pointer}
.pause:focus-visible{outline:2px solid var(--rose);outline-offset:2px}

/* ── le calendrier de Noël ───────────────────────────────────────────── */
.noel{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);column-gap:clamp(28px,4vw,60px);
  grid-template-areas:"tete tete" "cal demande" "releve releve";padding:clamp(70px,12vh,140px) var(--gut);
  background:var(--surface);border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}
.noel-tete{grid-area:tete;margin-bottom:clamp(28px,5vh,48px)}
.noel h2{color:var(--sapin)}
.decors{list-style:none;display:flex;flex-wrap:wrap;gap:14px;margin:26px 0 0;padding:0}
.decors li{flex:0 1 260px}
.decors img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px}
.decors span{display:block;margin-top:8px;font-size:15px;color:var(--doux)}
.infos-seance{margin:18px 0 0;font-size:15px;color:var(--doux)}

.calendrier{grid-area:cal;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px);align-content:start}
.mois-nom{font-size:26px;color:var(--sapin);margin-bottom:12px}
.entetes,.grille{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.entetes li{font:700 12px/1 Lato,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--doux);text-align:center;padding:4px 0}
.grille>li{min-height:76px;padding:6px 5px;border-radius:10px;background:var(--fond);display:flex;flex-direction:column;gap:4px}
.grille>li.vide{background:transparent}
.grille>li.hors{background:transparent;opacity:.45}
.grille>li.sans{background:repeating-linear-gradient(135deg,transparent 0 6px,rgb(106 84 98 / .08) 6px 7px),var(--fond)}
.num{font:500 17px/1 'Playfair Display',serif;color:var(--encre)}
.hors .num,.sans .num{color:var(--doux)}
.lisible{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.heures{display:flex;flex-direction:column;gap:4px}
.heure{min-height:28px;min-width:max-content;padding:3px 6px;white-space:nowrap;border-radius:999px;border:1.5px solid var(--sapin);background:var(--surface);color:var(--sapin);
  font:700 13px/1 Lato,sans-serif;cursor:pointer}
.heure:hover{background:#e3eeea}
.heure[aria-pressed="true"]{background:var(--sapin);color:#fff}
@media (forced-colors:active){.heure[aria-pressed="true"]{background:Highlight;color:HighlightText;border-color:HighlightText;forced-color-adjust:none}}
/* Sans script, les heures se lisent en texte ; avec script, ce sont des boutons. */
.heures{display:none}
.script .heures{display:flex}
.sans-script{font-size:13px;line-height:1.3;color:var(--sapin)}
.script .jour .sans-script{display:none}
.erreur:focus-visible{outline:2px solid var(--encre);outline-offset:3px}
.oblig{font-weight:400;color:var(--doux);font-size:14px}
.citation{margin:0 auto;max-width:880px}
.citation p{margin:0;font:italic 500 clamp(28px,3.4vw,46px)/1.2 'Playfair Display',serif}
.heure:focus-visible{outline:2px solid var(--rose);outline-offset:2px}

.demande{grid-area:demande;align-self:start;position:sticky;top:20px;margin:0;padding:24px;border-radius:20px;background:var(--fond);border:1px solid var(--trait)}
.demande h3{font-size:26px}
.choix-creneau{margin:8px 0 18px;font-weight:700;color:var(--sapin)}
.q{margin:0 0 18px;padding:0;border:0;min-width:0}
.q legend,.q-titre{display:block;margin:0 0 8px;padding:0;font-weight:700;font-size:16px}
.pastilles{display:flex;flex-wrap:wrap;gap:6px}
.pastilles label{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 12px;border-radius:999px;border:1.5px solid #c9b3bb;background:var(--surface);font-size:15px;cursor:pointer}
.pastilles input{accent-color:var(--rose);margin:0}
.pastilles label:has(input:checked){border-color:var(--rose);background:var(--rose);color:#fff}
.pastilles label:has(input:checked) input{accent-color:#fff}
.pastilles label:has(input:focus-visible){outline:2px solid var(--encre);outline-offset:2px}
.q input[type=text]{width:100%;min-height:46px;padding:9px 14px;border-radius:12px;border:1.5px solid #9c8792;background:var(--surface);font:400 17px Lato,sans-serif;color:var(--encre)}
.q input[type=text]:focus-visible{outline:2px solid var(--rose);outline-offset:2px}
.erreur{margin:0;color:var(--rose);font-weight:700}
.erreur:not(:empty){margin:0 0 12px}
.message{margin:0 0 14px;padding:12px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--trait);font:400 15px/1.55 Lato,sans-serif;white-space:pre-wrap}
.envoi{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.envoi .btn{min-height:44px;padding:10px 18px;font-size:15px}
.copie{align-self:center;font-size:14px;color:var(--doux)}
.releve{grid-area:releve;margin:26px 0 0;font-size:14px;color:var(--doux)}

/* ── les séances ─────────────────────────────────────────────────────── */
.seances{padding:clamp(70px,12vh,140px) var(--gut);text-align:center}
.seances h2{max-width:24ch;margin:0 auto;font-style:italic;font-size:clamp(28px,3.4vw,46px);line-height:1.2}
.galeries{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,30px);max-width:900px;margin:clamp(30px,5vh,48px) auto 0;padding:0;text-align:center}
.cadre-vide{aspect-ratio:4/5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  border:2px dashed #c9a5b2;border-radius:180px 180px 18px 18px;background:repeating-linear-gradient(135deg,transparent 0 10px,rgb(168 64 95 / .04) 10px 11px),var(--surface)}
.cadre-vide .diaph{width:34px;height:34px;margin:0}
.vos-photos{font:700 13px/1.3 Lato,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--rose)}
.galeries h3{margin-top:14px;font-size:clamp(22px,2vw,28px)}
.seances .chapo{margin:clamp(24px,4vh,36px) auto 0}

/* ── le studio ───────────────────────────────────────────────────────── */
.studio{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center;
  padding:0 var(--gut) clamp(70px,12vh,140px)}
.studio-photo{margin:0}
.studio-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:220px 220px 20px 20px}
.studio-texte p:not(.sur-titre){max-width:44ch;color:var(--doux);font-size:clamp(18px,1.5vw,21px)}
.lien{font-weight:700}

/* ── contact ─────────────────────────────────────────────────────────── */
.contact{padding:clamp(70px,12vh,140px) var(--gut);background:var(--encre);color:#f6ecef}
.contact .sur-titre{color:#f0a6bd}
.infos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:clamp(24px,4vh,40px) 0 0}
.infos dt{font:700 13px/1.3 Lato,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#d9bfc8}
.infos dd{margin:6px 0 0;font-size:19px}
.infos a{color:#fff}
.infos a:focus-visible{outline-color:#f0a6bd}

.pied{padding:30px var(--gut) 40px;font-size:15px;color:var(--doux)}
.pied p{margin:0 0 6px}
.signature{font:600 26px/1 'Dancing Script',cursive;color:var(--rose)}
.pied-fine{font-size:13px;max-width:80ch}

@media (max-width:980px){
  .noel{grid-template-columns:1fr;grid-template-areas:"tete" "cal" "demande" "releve"}
  .demande{position:static;margin-top:28px}
  .infos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .ouverture{grid-template-columns:1fr;min-height:0}
  .iris{width:min(86%,420px);order:-1}
  .calendrier{grid-template-columns:1fr}
  .galeries{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grille>li{min-height:64px;padding:5px 3px}
  .heure{font-size:12px;min-height:30px}
  .studio{grid-template-columns:1fr}
  .studio-photo img{max-height:70vh}
  .infos{grid-template-columns:1fr}
}
/* Petit écran : le calendrier devient une liste de jours, heures en ligne (cibles plus grandes, texte espaçable). */
@media (max-width:480px){
  .entetes{display:none}
  .grille{grid-template-columns:1fr}
  .grille>li.vide,.grille>li.hors{display:none}
  .grille>li.jour{flex-direction:row;align-items:center;gap:12px;min-height:52px;padding:8px 12px}
  .grille>li.sans{min-height:36px}
  .num{min-width:2ch}
  .heures{flex-direction:row;flex-wrap:wrap;gap:8px}
  .heure{min-height:40px;font-size:14px;padding:6px 14px}
}
@media (prefers-reduced-motion:reduce){ .lamelle{transition:none} .diapo{animation:none !important} }