/* Oté Famiy · rubrique famille et grossesse de davidhuitorel.fr
   Concept : « le tirage qui rigole ». Même logique que davidhuitorel.fr (en-tête, menu qui sort à droite,
   blocs de couleur posés dans la page avec une marge), mais la page est crème, les blocs prennent les
   couleurs de la charte et certaines photos sont des tirages posés de travers.
   Règle : toutes les valeurs (couleurs, grille, espacements, tailles) vivent dans :root, nulle part ailleurs. */

/* Polices hébergées avec le site (aucune requête vers Google) : Montserrat et Chau Philomene One, licence SIL OFL */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/montserrat-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/montserrat-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/montserrat-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/montserrat-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Chau Philomene One";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/chau-philomene-one-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Polices de secours calées sur la largeur de Montserrat et de Chau : quand la vraie police arrive, le texte ne change pas de taille et rien ne saute */
@font-face{font-family:"Montserrat Fallback";font-weight:400 500;src:local("Arial"),local("ArialMT"),local("Liberation Sans");size-adjust:113%}
@font-face{font-family:"Montserrat Fallback";font-weight:600;src:local("Arial"),local("ArialMT"),local("Liberation Sans");size-adjust:115%}
@font-face{font-family:"Montserrat Fallback";font-weight:700;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold");size-adjust:109.6%}
@font-face{font-family:"Montserrat Fallback";font-weight:800 900;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold");size-adjust:105.6%}
@font-face{font-family:"Chau Fallback";font-weight:400;src:local("Arial"),local("ArialMT"),local("Liberation Sans");size-adjust:78%}

:root{
  /* Couleurs : charte v2, codes web (sRGB), les mêmes sur tous les écrans */
  --creme:#FEF3E7; --creme-2:#F6EBDD; --blanc:#FFFFFF;
  --nuit:#0B2335; --nuit-2:#152B40; --nuit-filet:#2A3E52; --nuit-doux:#B8C2CC;
  --corail:#FF481E; --mandarine:#FF8200; --soleil:#FFA600; --punch:#FF4475; --lagon:#009BA1;
  --lagon-t:#007B81; --lagon-c:#48C2C8; --orange-dh:#C2571A;
  --encre:#0B2335; --encre-doux:#4B5866; --filet:#E6D9CA; --filet-2:#D9C8B4;
  --voile:rgba(11,35,53,.46);

  /* Polices */
  --f:"Montserrat","Montserrat Fallback","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-cond:"Chau Philomene One","Chau Fallback","Arial Narrow","Roboto Condensed",sans-serif;

  /* Grille : 12 colonnes, 1320 px maximum */
  --max:1320px; --gout:clamp(16px,2vw,28px);
  --marge-g:max(16px,env(safe-area-inset-left,0px)); --marge-d:max(16px,env(safe-area-inset-right,0px));
  --mat:clamp(8px,1.1vw,16px);

  /* Espacements : dans un bloc (xs, s, m), entre deux blocs (l), entre deux sections (xl, xxl) */
  --esp-xs:8px; --esp-s:16px; --esp-m:24px; --esp-l:40px;
  --esp-xl:clamp(56px,7vw,104px); --esp-xxl:clamp(80px,10vw,152px);

  /* Texte */
  --t-affiche:clamp(40px,4.7vw,72px); --t-display:clamp(32px,3.7vw,54px); --t-titre:clamp(28px,3.2vw,44px); --t-titre-2:clamp(22px,2.2vw,30px);
  --t-cond:clamp(28px,3.2vw,46px); --t-chapo:clamp(18px,1.4vw,21px); --t-texte:17px; --t-petit:14.5px; --t-label:14px;
  --lh-titre:1.02; --lh-texte:1.62; --ligne:60ch;

  /* Formes */
  --r-bloc:clamp(18px,2.2vw,30px); --r-carte:16px; --r-pilule:999px;
  --bord-tirage:clamp(6px,.75vw,11px);
  --ombre-tirage:0 1px 2px rgba(11,35,53,.14),0 22px 44px -20px rgba(11,35,53,.5); --papier:#FDFBF6;
  --bord-h:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 4' preserveAspectRatio='none'%3E%3Cpath d='M0 4 L0 0.37 L2 0.68 L4 0.57 L6 0.30 L8 0.87 L10 0.30 L12 0.61 L14 0.59 L16 0.44 L18 0.71 L20 0.35 L22 0.70 L24 0.59 L26 0.40 L28 0.71 L30 0.60 L32 0.48 L34 0.64 L36 0.65 L38 0.57 L40 0.55 L42 0.65 L44 0.76 L46 0.33 L48 0.80 L50 0.76 L52 0.27 L54 0.92 L56 0.54 L58 0.57 L60 0.61 L62 0.61 L64 0.75 L66 0.23 L68 0.90 L70 0.50 L72 0.31 L74 0.83 L76 0.33 L78 0.53 L80 0.43 L82 0.51 L84 0.43 L86 0.25 L88 0.56 L90 0.27 L92 0.28 L94 0.37 L96 0.28 L98 0.20 L100 0.24 L102 0.22 L104 0.19 L106 0.14 L108 0.08 L110 0.31 L112 0.00 L114 0.13 L116 0.22 L118 0.00 L120 0.15 L122 0.02 L124 0.19 L126 0.00 L128 0.10 L130 0.30 L132 0.00 L134 0.27 L136 0.17 L138 0.00 L140 0.14 L142 0.25 L144 0.21 L146 0.00 L148 0.46 L150 0.22 L152 0.15 L154 0.43 L156 0.40 L158 0.29 L160 0.37 L162 0.67 L164 0.28 L166 0.55 L168 0.65 L170 0.48 L172 0.66 L174 0.56 L176 0.82 L178 0.54 L180 0.73 L182 0.85 L184 0.61 L186 0.87 L188 0.71 L190 0.89 L192 0.76 L194 0.75 L196 0.97 L198 0.73 L200 0.79 L202 0.89 L204 0.86 L206 0.65 L208 0.91 L210 0.84 L212 0.65 L214 0.80 L216 0.80 L218 0.75 L220 0.48 L222 0.96 L224 0.60 L226 0.40 L228 0.96 L230 0.40 L232 0.59 L234 0.55 L236 0.59 L238 0.50 L240 0.27 L242 0.83 L244 0.19 L246 0.39 L248 0.64 L250 0.18 L252 0.46 L254 0.33 L256 0.41 L258 0.30 L260 0.27 L262 0.47 L264 0.23 L266 0.27 L268 0.42 L270 0.26 L272 0.26 L274 0.38 L276 0.24 L278 0.41 L280 0.18 L282 0.36 L284 0.49 L286 0.00 L288 0.60 L290 0.27 L292 0.23 L294 0.47 L296 0.23 L298 0.55 L300 0.05 L302 0.59 L304 0.43 L306 0.00 L308 0.77 L310 0.19 L312 0.29 L314 0.46 L316 0.34 L318 0.38 L320 0.17 L322 0.59 L324 0.24 L326 0.17 L328 0.58 L330 0.23 L332 0.19 L334 0.48 L336 0.26 L338 0.22 L340 0.37 L342 0.25 L344 0.36 L346 0.12 L348 0.40 L350 0.32 L352 0.05 L354 0.54 L356 0.10 L358 0.37 L360 0.29 L362 0.18 L364 0.57 L366 0.00 L368 0.53 L370 0.38 L372 0.17 L374 0.55 L376 0.30 L378 0.52 L380 0.26 L382 0.57 L384 0.58 L386 0.23 L388 0.74 L390 0.58 L392 0.41 L394 0.67 L396 0.75 L398 0.49 L400 0.66 L402 0.84 L404 0.64 L406 0.67 L408 0.83 L410 0.89 L412 0.53 L414 0.97 L416 0.91 L418 0.57 L420 1.04 L422 0.77 L424 0.86 L426 0.78 L428 0.87 L430 0.93 L432 0.59 L434 1.01 L436 0.73 L438 0.74 L440 0.81 L442 0.69 L444 0.81 L446 0.55 L448 0.76 L450 0.64 L452 0.56 L454 0.56 L456 0.61 L458 0.53 L460 0.32 L462 0.66 L464 0.34 L466 0.32 L468 0.42 L470 0.36 L472 0.26 L474 0.13 L476 0.53 L478 0.00 L480 0.13 L482 0.42 L484 0.00 L486 0.14 L488 0.16 L490 0.17 L492 0.00 L494 0.13 L496 0.24 L498 0.00 L500 0.14 L502 0.18 L504 0.00 L506 0.02 L508 0.27 L510 0.03 L512 0.06 L514 0.26 L516 0.08 L518 0.24 L520 0.07 L522 0.37 L524 0.19 L526 0.14 L528 0.51 L530 0.10 L532 0.47 L534 0.25 L536 0.40 L538 0.53 L540 0.12 L542 0.74 L544 0.34 L546 0.38 L548 0.65 L550 0.43 L552 0.57 L554 0.41 L556 0.73 L558 0.51 L560 0.39 L562 0.83 L564 0.51 L566 0.42 L568 0.79 L570 0.58 L572 0.42 L574 0.75 L576 0.58 L578 0.56 L580 0.51 L582 0.71 L584 0.61 L586 0.28 L588 0.94 L590 0.38 L592 0.46 L594 0.80 L596 0.32 L598 0.73 L600 0.37 L600 4 Z'/%3E%3C/svg%3E");
  --bord-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 600' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L2.93 0 L2.93 2 L3.00 4 L3.19 6 L3.28 8 L3.01 10 L3.04 12 L3.26 14 L3.14 16 L3.23 18 L3.33 20 L3.21 22 L3.59 24 L3.79 26 L3.27 28 L3.30 30 L3.75 32 L3.80 34 L3.98 36 L3.96 38 L3.58 40 L3.84 42 L4.00 44 L4.00 46 L3.97 48 L4.00 50 L4.00 52 L4.00 54 L4.00 56 L3.89 58 L4.00 60 L4.00 62 L4.00 64 L4.00 66 L3.82 68 L3.82 70 L4.00 72 L3.85 74 L3.88 76 L3.93 78 L3.54 80 L3.52 82 L3.69 84 L3.36 86 L3.37 88 L3.55 90 L3.25 92 L3.29 94 L3.38 96 L2.89 98 L2.88 100 L3.30 102 L3.23 104 L3.11 106 L2.99 108 L2.75 110 L2.98 112 L3.26 114 L3.08 116 L2.99 118 L3.07 120 L3.21 122 L3.29 124 L3.05 126 L3.04 128 L3.45 130 L3.56 132 L3.52 134 L3.47 136 L3.20 138 L3.47 140 L3.95 142 L3.71 144 L3.63 146 L3.88 148 L3.69 150 L3.74 152 L4.00 154 L3.76 156 L3.83 158 L4.00 160 L3.91 162 L3.78 164 L3.90 166 L3.73 168 L3.81 170 L4.00 172 L3.92 174 L3.73 176 L3.60 178 L3.53 180 L3.75 182 L3.79 184 L3.59 186 L3.54 188 L3.42 190 L3.47 192 L3.59 194 L3.24 196 L3.20 198 L3.64 200 L3.52 202 L3.25 204 L3.25 206 L3.05 208 L3.30 210 L3.77 212 L3.39 214 L3.09 216 L3.42 218 L3.42 220 L3.40 222 L3.57 224 L3.42 226 L3.52 228 L3.81 230 L3.61 232 L3.44 234 L3.59 236 L3.73 238 L3.93 240 L3.92 242 L3.72 244 L3.74 246 L3.72 248 L3.78 250 L4.00 252 L3.92 254 L3.75 256 L3.91 258 L3.74 260 L3.68 262 L3.93 264 L3.67 266 L3.56 268 L3.95 270 L3.71 272 L3.32 274 L3.44 276 L3.39 278 L3.48 280 L3.74 282 L3.31 284 L2.94 286 L3.21 288 L3.30 290 L3.21 292 L3.15 294 L3.01 296 L3.13 298 L3.23 300 L2.98 302 L2.88 304 L2.99 306 L3.19 308 L3.42 310 L3.13 312 L2.85 314 L3.18 316 L3.30 318 L3.30 320 L3.56 322 L3.40 324 L3.28 326 L3.66 328 L3.59 330 L3.45 332 L3.86 334 L3.87 336 L3.76 338 L4.00 340 L3.93 342 L3.72 344 L4.00 346 L4.00 348 L4.00 350 L4.00 352 L4.00 354 L3.88 356 L4.00 358 L4.00 360 L4.00 362 L4.00 364 L3.91 366 L4.00 368 L4.00 370 L3.74 372 L3.79 374 L3.85 376 L3.84 378 L3.97 380 L3.51 382 L3.11 384 L3.56 386 L3.69 388 L3.36 390 L3.38 392 L3.18 394 L3.00 396 L3.31 398 L3.18 400 L2.86 402 L3.15 404 L3.22 406 L3.00 408 L3.00 410 L2.89 412 L2.90 414 L3.18 416 L3.23 418 L3.16 420 L3.10 422 L2.98 424 L3.16 426 L3.35 428 L3.36 430 L3.50 432 L3.41 434 L3.26 436 L3.62 438 L3.67 440 L3.41 442 L3.72 444 L3.89 446 L3.76 448 L3.92 450 L3.71 452 L3.47 454 L4.00 456 L4.00 458 L3.86 460 L3.80 462 L3.80 464 L3.79 466 L4.00 468 L3.93 470 L3.66 472 L3.85 474 L3.94 476 L3.75 478 L3.57 480 L3.46 482 L3.69 484 L3.86 486 L3.60 488 L3.44 490 L3.35 492 L3.26 494 L3.55 496 L3.57 498 L3.25 500 L3.40 502 L3.41 504 L3.11 506 L3.35 508 L3.44 510 L3.17 512 L3.44 514 L3.57 516 L3.26 518 L3.35 520 L3.39 522 L3.29 524 L3.70 526 L3.84 528 L3.48 530 L3.42 532 L3.55 534 L3.72 536 L3.91 538 L3.76 540 L3.66 542 L3.85 544 L3.88 546 L3.85 548 L3.74 550 L3.64 552 L4.00 554 L4.00 556 L3.70 558 L3.60 560 L3.74 562 L3.69 564 L3.96 566 L3.91 568 L3.40 570 L3.56 572 L3.74 574 L3.37 576 L3.42 578 L3.54 580 L3.32 582 L3.43 584 L3.40 586 L3.02 588 L3.06 590 L3.21 592 L3.18 594 L3.26 596 L3.15 598 L2.93 600 L0 600 Z'/%3E%3C/svg%3E");
  --bord-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 4' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L0 3.55 L2 3.47 L4 3.28 L6 3.63 L8 3.63 L10 3.50 L12 3.39 L14 3.80 L16 3.58 L18 3.73 L20 3.45 L22 3.65 L24 4.00 L26 3.37 L28 3.70 L30 3.72 L32 3.92 L34 3.57 L36 3.55 L38 3.82 L40 3.70 L42 3.77 L44 3.21 L46 3.91 L48 3.66 L50 3.35 L52 3.56 L54 3.42 L56 3.64 L58 3.31 L60 3.33 L62 3.33 L64 3.51 L66 3.18 L68 3.20 L70 3.37 L72 3.14 L74 3.34 L76 3.15 L78 3.16 L80 3.24 L82 3.36 L84 3.06 L86 3.29 L88 3.27 L90 3.30 L92 3.52 L94 3.02 L96 3.59 L98 3.54 L100 3.49 L102 3.38 L104 3.65 L106 3.87 L108 3.54 L110 3.81 L112 3.60 L114 4.00 L116 3.80 L118 3.67 L120 4.00 L122 4.00 L124 4.00 L126 3.86 L128 4.00 L130 4.00 L132 4.00 L134 3.94 L136 4.00 L138 4.00 L140 3.85 L142 4.00 L144 4.00 L146 4.00 L148 3.94 L150 3.82 L152 3.75 L154 3.91 L156 3.68 L158 3.46 L160 3.71 L162 3.31 L164 3.56 L166 3.27 L168 3.17 L170 3.21 L172 3.20 L174 3.08 L176 2.77 L178 3.16 L180 2.78 L182 3.07 L184 2.75 L186 2.75 L188 3.19 L190 2.75 L192 2.77 L194 2.75 L196 3.08 L198 2.79 L200 2.76 L202 2.95 L204 3.10 L206 3.22 L208 2.75 L210 3.37 L212 3.40 L214 3.24 L216 3.32 L218 3.48 L220 3.71 L222 3.67 L224 3.59 L226 3.74 L228 4.00 L230 3.77 L232 3.99 L234 4.00 L236 4.00 L238 4.00 L240 4.00 L242 4.00 L244 4.00 L246 4.00 L248 4.00 L250 4.00 L252 4.00 L254 4.00 L256 4.00 L258 3.88 L260 4.00 L262 4.00 L264 4.00 L266 3.84 L268 3.96 L270 4.00 L272 3.75 L274 3.81 L276 3.40 L278 3.99 L280 3.54 L282 3.22 L284 3.52 L286 3.46 L288 3.37 L290 3.05 L292 3.20 L294 3.26 L296 3.27 L298 2.77 L300 3.07 L302 3.26 L304 2.92 L306 2.91 L308 2.97 L310 3.15 L312 2.96 L314 3.03 L316 2.84 L318 3.33 L320 3.06 L322 2.92 L324 3.36 L326 3.02 L328 3.43 L330 3.15 L332 3.31 L334 3.34 L336 3.48 L338 3.48 L340 3.28 L342 3.73 L344 3.38 L346 3.84 L348 3.47 L350 3.51 L352 3.98 L354 3.63 L356 3.68 L358 3.65 L360 3.97 L362 3.78 L364 3.74 L366 3.64 L368 3.97 L370 3.99 L372 3.48 L374 3.83 L376 3.96 L378 3.84 L380 3.59 L382 3.80 L384 3.81 L386 3.94 L388 3.55 L390 3.58 L392 4.00 L394 3.54 L396 3.71 L398 3.60 L400 3.83 L402 3.70 L404 3.58 L406 3.67 L408 3.61 L410 3.92 L412 3.32 L414 3.81 L416 3.60 L418 3.57 L420 3.82 L422 3.37 L424 3.71 L426 3.60 L428 3.69 L430 3.43 L432 3.59 L434 3.61 L436 3.58 L438 3.58 L440 3.24 L442 3.77 L444 3.56 L446 3.30 L448 3.39 L450 3.61 L452 3.46 L454 3.34 L456 3.26 L458 3.43 L460 3.66 L462 2.98 L464 3.34 L466 3.45 L468 3.39 L470 3.15 L472 3.20 L474 3.47 L476 3.25 L478 3.35 L480 2.96 L482 3.63 L484 3.31 L486 3.09 L488 3.49 L490 3.22 L492 3.57 L494 3.24 L496 3.42 L498 3.42 L500 3.58 L502 3.47 L504 3.39 L506 3.74 L508 3.41 L510 3.82 L512 3.55 L514 3.56 L516 3.86 L518 3.78 L520 3.66 L522 3.72 L524 3.89 L526 3.83 L528 3.90 L530 3.54 L532 4.00 L534 3.99 L536 3.67 L538 3.73 L540 3.94 L542 3.98 L544 3.58 L546 3.82 L548 3.67 L550 4.00 L552 3.52 L554 3.44 L556 4.00 L558 3.52 L560 3.64 L562 3.37 L564 3.72 L566 3.56 L568 3.42 L570 3.39 L572 3.42 L574 3.71 L576 3.07 L578 3.51 L580 3.37 L582 3.34 L584 3.46 L586 3.21 L588 3.39 L590 3.41 L592 3.42 L594 3.25 L596 3.49 L598 3.34 L600 3.55 L600 0 Z'/%3E%3C/svg%3E");
  --bord-g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 600' preserveAspectRatio='none'%3E%3Cpath d='M4 0 L0.43 0 L0.46 2 L0.65 4 L0.75 6 L0.69 8 L0.56 10 L0.49 12 L0.48 14 L0.57 16 L0.71 18 L0.73 20 L0.53 22 L0.32 24 L0.37 26 L0.60 28 L0.67 30 L0.48 32 L0.30 34 L0.35 36 L0.48 38 L0.45 40 L0.34 42 L0.33 44 L0.42 46 L0.41 48 L0.32 50 L0.32 52 L0.40 54 L0.39 56 L0.30 58 L0.33 60 L0.50 62 L0.51 64 L0.30 66 L0.20 68 L0.41 70 L0.64 72 L0.51 74 L0.23 76 L0.26 78 L0.56 80 L0.60 82 L0.27 84 L0.10 86 L0.42 88 L0.73 90 L0.47 92 L0.00 94 L0.00 96 L0.43 98 L0.68 100 L0.31 102 L0.00 104 L0.00 106 L0.27 108 L0.32 110 L0.10 112 L0.02 114 L0.15 116 L0.16 118 L0.00 120 L0.00 122 L0.16 124 L0.34 126 L0.21 128 L0.01 130 L0.07 132 L0.29 134 L0.37 136 L0.31 138 L0.37 140 L0.53 142 L0.54 144 L0.40 146 L0.44 148 L0.76 150 L0.98 152 L0.86 154 L0.63 156 L0.70 158 L1.01 160 L1.17 162 L1.04 164 L0.91 166 L0.97 168 L1.13 170 L1.17 172 L1.08 174 L1.00 176 L0.98 178 L1.03 180 L1.09 182 L1.06 184 L0.88 186 L0.70 188 L0.71 190 L0.88 192 L0.89 194 L0.62 196 L0.36 198 L0.43 200 L0.60 202 L0.49 204 L0.20 206 L0.14 208 L0.35 210 L0.40 212 L0.06 214 L0.00 216 L0.00 218 L0.36 220 L0.31 222 L0.00 224 L0.00 226 L0.00 228 L0.24 230 L0.19 232 L0.04 234 L0.08 236 L0.18 238 L0.11 240 L0.05 242 L0.26 244 L0.54 246 L0.47 248 L0.15 250 L0.11 252 L0.47 254 L0.72 256 L0.54 258 L0.30 260 L0.44 262 L0.72 264 L0.65 266 L0.35 268 L0.36 270 L0.72 272 L0.86 274 L0.52 276 L0.19 278 L0.35 280 L0.73 282 L0.74 284 L0.38 286 L0.18 288 L0.37 290 L0.58 292 L0.48 294 L0.25 296 L0.21 298 L0.35 300 L0.43 302 L0.36 304 L0.27 306 L0.23 308 L0.23 310 L0.30 312 L0.41 314 L0.43 316 L0.30 318 L0.18 320 L0.26 322 L0.46 324 L0.52 326 L0.41 328 L0.35 330 L0.43 332 L0.50 334 L0.43 336 L0.41 338 L0.55 340 L0.68 342 L0.58 344 L0.37 346 L0.37 348 L0.57 350 L0.68 352 L0.61 354 L0.52 356 L0.50 358 L0.45 360 L0.39 362 L0.49 364 L0.71 366 L0.72 368 L0.38 370 L0.14 372 L0.37 374 L0.78 376 L0.76 378 L0.35 380 L0.19 382 L0.52 384 L0.78 386 L0.58 388 L0.29 390 L0.45 392 L0.84 394 L0.84 396 L0.45 398 L0.33 400 L0.70 402 L1.04 404 L0.86 406 L0.52 408 L0.57 410 L0.90 412 L1.00 414 L0.77 416 L0.64 418 L0.80 420 L0.95 422 L0.84 424 L0.68 426 L0.70 428 L0.78 430 L0.71 432 L0.59 434 L0.64 436 L0.71 438 L0.54 440 L0.26 442 L0.24 444 L0.48 446 L0.56 448 L0.26 450 L0.00 452 L0.00 454 L0.15 456 L0.19 458 L0.00 460 L0.00 462 L0.00 464 L0.00 466 L0.00 468 L0.00 470 L0.00 472 L0.00 474 L0.00 476 L0.00 478 L0.00 480 L0.00 482 L0.00 484 L0.13 486 L0.21 488 L0.08 490 L0.00 492 L0.00 494 L0.39 496 L0.65 498 L0.49 500 L0.20 502 L0.29 504 L0.69 506 L0.87 508 L0.66 510 L0.52 512 L0.73 514 L1.00 516 L0.90 518 L0.65 520 L0.70 522 L1.01 524 L1.08 526 L0.82 528 L0.65 530 L0.81 532 L0.97 534 L0.83 536 L0.62 538 L0.68 540 L0.84 542 L0.74 544 L0.48 546 L0.44 548 L0.64 550 L0.67 552 L0.41 554 L0.28 556 L0.48 558 L0.62 560 L0.36 562 L0.06 564 L0.24 566 L0.65 568 L0.66 570 L0.19 572 L0.00 574 L0.26 576 L0.70 578 L0.65 580 L0.28 582 L0.17 584 L0.42 586 L0.61 588 L0.52 590 L0.42 592 L0.54 594 L0.67 596 L0.59 598 L0.43 600 L4 600 Z'/%3E%3C/svg%3E");
  --biais:-28deg;

  /* Mouvement */
  --pose:cubic-bezier(.16,1,.3,1); --tiroir:cubic-bezier(.86,0,.07,1); --rebond:cubic-bezier(.34,1.4,.64,1);

  --entete:68px;
  color-scheme:light;
}
@media (min-width:760px){
  :root{--marge-g:max(48px,env(safe-area-inset-left,0px));--marge-d:max(48px,env(safe-area-inset-right,0px));--entete:76px}
}
/* Couleurs : codes web (sRGB) de la charte pour tous les écrans, Mac et iPhone compris. Pas de lecture Display P3 sur le site (décision de David, 20 octobre 2026). */

/* ---------- Base ---------- */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--entete) + 16px)}
body{margin:0;background:var(--creme);color:var(--encre);font-family:var(--f);font-size:var(--t-texte);line-height:var(--lh-texte);font-weight:500;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--creme)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1.5px}
h1,h2,h3,h4{margin:0;font-weight:800;line-height:var(--lh-titre);text-wrap:balance}
p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:3px solid var(--lagon);outline-offset:3px;border-radius:4px}
b,strong{font-weight:800}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nb{font-variant-numeric:tabular-nums}

/* ---------- Largeurs et grille ---------- */
.in{max-width:var(--max);margin-inline:auto;padding-left:var(--marge-g);padding-right:var(--marge-d)}
.etroit{max-width:880px}
.section{padding-block:var(--esp-xl)}
.section + .section,.page-tete + .section{padding-top:0}
.bloc{margin-inline:var(--mat);border-radius:var(--r-bloc);padding-block:clamp(40px,5vw,72px);overflow:hidden;position:relative}
.bloc + .bloc{margin-top:clamp(32px,4vw,56px)}
.bloc-nuit{background:var(--nuit);color:var(--creme)}
.bloc-lagon{background:var(--lagon);color:var(--nuit)}
.bloc-soleil{background:var(--soleil);color:var(--nuit)}
.bloc-punch{background:var(--punch);color:var(--nuit)}
.bloc-corail{background:var(--corail);color:var(--nuit)}
.bloc-creme2{background:var(--creme-2)}
.pile{display:flex;flex-direction:column;gap:var(--esp-m)}
.pile-s{display:flex;flex-direction:column;gap:var(--esp-s)}
.pile-l{display:flex;flex-direction:column;gap:var(--esp-l)}
.deux{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--esp-l);align-items:center}
@media (min-width:900px){
  .deux{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--esp-xl)}
  .deux.d57{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .deux.d75{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .deux.inverse > :first-child{order:2}
}
.deux > *{min-width:0}

/* ---------- Typographie ---------- */
.label{font-weight:400;font-family:var(--f-cond);font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;line-height:1.3;display:inline-flex;align-items:center;gap:12px;color:currentColor}
.label::before{content:"";flex:none;width:24px;height:8px;border-radius:4px;background:var(--etincelle,var(--corail));transform:rotate(var(--biais))}
.bloc-corail .label,.bloc-punch .label{--etincelle:var(--soleil)}
.affiche{font-size:var(--t-affiche);line-height:1.1;letter-spacing:-.022em;text-transform:uppercase}
.affiche .on{font-size:.5em;letter-spacing:0;font-weight:600}
.titre{font-size:var(--t-titre);letter-spacing:-.015em;text-transform:uppercase}
.titre-2{font-size:var(--t-titre-2);line-height:1.15;letter-spacing:-.005em;font-weight:800}
.display{font-family:var(--f);font-weight:800;font-size:var(--t-display);line-height:1.02;letter-spacing:-.012em;text-transform:uppercase;text-wrap:balance}
.cond{font-family:var(--f-cond);font-weight:400;font-size:var(--t-cond);line-height:1.08;letter-spacing:.005em}
.chapo{font-size:var(--t-chapo);line-height:1.5;font-weight:600;max-width:var(--ligne)}
.texte{display:flex;flex-direction:column;gap:.9em;max-width:var(--ligne)}
.doux{color:var(--encre-doux)}
.bloc-nuit .doux{color:var(--nuit-doux)}
.petit{font-size:var(--t-petit);line-height:1.5}
.blanc{color:var(--blanc)}
.kw{position:relative;z-index:0;white-space:nowrap;display:inline-block}
/* Coup de pinceau derrière les mots clés : six tracés organiques générés (pinceau.py), jamais identiques */
.kw::after{content:"";position:absolute;left:var(--pin-g,-.1em);right:var(--pin-d,-.34em);top:var(--pin-h,.44em);bottom:var(--pin-b,-.1em);z-index:-1;background:var(--kw,var(--soleil));-webkit-mask:var(--pinceau) center/100% 100% no-repeat;mask:var(--pinceau) center/100% 100% no-repeat;transform:translate(var(--pin-x,0),var(--pin-y,0)) rotate(var(--pin-rot,-2deg))}
.kw,.pinceau-1{--pin-g:-.14em;--pin-d:-.3em;--pin-rot:-3deg;--pin-x:-.06em;--pin-y:0;--pinceau:url("img/pinceau-1.webp")}
.pinceau-2{--pin-g:.32em;--pin-d:-.16em;--pin-rot:2.2deg;--pin-x:.1em;--pin-y:.04em;--pinceau:url("img/pinceau-2.webp")}
.pinceau-3{--pin-g:.3em;--pin-d:-.14em;--pin-rot:-1.6deg;--pin-x:-.12em;--pin-y:.02em;--pinceau:url("img/pinceau-3.webp")}
.pinceau-4{--pin-rot:-2.4deg;--pin-x:0;--pin-y:.02em;--pinceau:url("img/pinceau-4.webp")}
.pinceau-5{--pin-g:.18em;--pin-d:-1em;--pin-h:.6em;--pin-b:-.16em;--pin-rot:3deg;--pin-x:.04em;--pin-y:0;--pinceau:url("img/pinceau-5.webp")}
.pinceau-6{--pin-g:1.9em;--pin-d:-.12em;--pin-rot:-1.8deg;--pin-x:-.08em;--pin-y:.03em;--pinceau:url("img/pinceau-6.webp")}
.kw-corail{--kw:var(--corail)} .kw-punch{--kw:var(--punch)} .kw-lagon{--kw:var(--lagon-c)} .kw-soleil{--kw:var(--soleil)} .kw-creme{--kw:var(--creme)}

/* ---------- Boutons et liens ---------- */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-s) var(--esp-m)}
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px;border-radius:var(--r-pilule);background:var(--corail);color:var(--nuit);font-weight:800;font-size:14.5px;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;transition:background .25s,color .25s,transform .35s var(--rebond);text-align:center;line-height:1.2}
@media (hover:hover){.bouton:hover{background:var(--nuit);color:var(--creme);transform:translateY(-2px) rotate(-1deg)}}
.bouton:active{transform:scale(.97)}
.bouton svg{width:16px;height:16px;flex:none}
.bouton-nuit{background:var(--nuit);color:var(--creme)}
@media (hover:hover){.bouton-nuit:hover{background:var(--soleil);color:var(--nuit)}}
@media (hover:hover){.bloc-nuit .bouton:hover{background:var(--soleil);color:var(--nuit)}}
.bouton-creme{background:var(--creme);color:var(--nuit)}
@media (hover:hover){.bouton-creme:hover{background:var(--nuit);color:var(--creme)}}
.lien{display:inline-flex;align-items:center;gap:8px;font-weight:700;text-decoration:none;min-height:44px}
.lien span{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.lien::after{content:"→";text-decoration:none;display:inline-block;transition:transform .35s var(--pose)}
.lien:hover::after{transform:translateX(4px)}

/* ---------- Photos ---------- */
.ph{position:relative;max-width:100%}
.ph img{width:100%;height:auto;object-fit:cover;object-position:var(--pos,50% 50%)}
.r32 img{aspect-ratio:3/2} .r23 img{aspect-ratio:2/3} .r45 img{aspect-ratio:4/5} .r11 img{aspect-ratio:1/1} .r54 img{aspect-ratio:5/4} .r169 img{aspect-ratio:16/9} .r21 img{aspect-ratio:2/1}

/* Tirage : papier précalculé (texture fixe, bord à peine irrégulier, ombre fixe). Aucun filtre : le navigateur ne fait que déplacer l'image. */
.tirage{transform:rotate(var(--rot,0deg));transition:transform .5s var(--pose);box-shadow:0 .5px 1px rgba(40,30,15,.16),0 3px 7px -2px rgba(11,35,53,.16),0 16px 30px -12px rgba(11,35,53,.34)}
.feuille{display:block;position:relative;padding:var(--bord-tirage);border-radius:1px;background:linear-gradient(155deg,rgba(255,255,255,.55),rgba(255,255,255,0) 42%,rgba(120,95,60,.05)),var(--papier) url(img/papier.webp) 0 0/128px;box-shadow:inset 0 0 0 .5px rgba(120,95,60,.20),inset 0 0 3px rgba(120,95,60,.10);-webkit-mask:var(--bord-h) 0 0/600px 4px repeat-x,var(--bord-b) 0 100%/600px 4px repeat-x,var(--bord-g) 0 0/4px 600px repeat-y,var(--bord-d) 100% 0/4px 600px repeat-y,linear-gradient(#000 0 0) 50% 50%/calc(100% - 3px) calc(100% - 3px) no-repeat;mask:var(--bord-h) 0 0/600px 4px repeat-x,var(--bord-b) 0 100%/600px 4px repeat-x,var(--bord-g) 0 0/4px 600px repeat-y,var(--bord-d) 100% 0/4px 600px repeat-y,linear-gradient(#000 0 0) 50% 50%/calc(100% - 3px) calc(100% - 3px) no-repeat}
.feuille img{position:relative}
.feuille::after{content:"";position:absolute;inset:var(--bord-tirage);pointer-events:none;box-shadow:inset 0 0 0 1px rgba(11,35,53,.07)}
.tirage:hover{transform:rotate(calc(var(--rot,0deg) * .4)) translateY(-3px)}
.vivant .tirage{translate:var(--jx,0px) var(--jy,0px);rotate:var(--jr,0deg)}
.vivant .tirages .exclam{translate:var(--jx,0px) var(--jy,0px)}
.vivant .tirage:hover{transform:rotate(var(--rot,0deg))}
.vivant .tirage{touch-action:pan-y;will-change:transform,translate,rotate}
.legende{margin-top:10px;font-size:13px;line-height:1.4;color:var(--encre-doux)}

/* ---------- En-tête ---------- */
.tete{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--creme);transition:box-shadow .3s}
.tete.defile{box-shadow:0 1px 0 var(--filet)}
.tete-in{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:var(--esp-s);min-height:var(--entete);padding-block:8px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.devise{display:none;font-family:var(--f-cond);font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--encre-doux);text-decoration:none;white-space:nowrap}
.devise i{font-style:normal;display:inline-block;width:6px;height:6px;border-radius:50%;margin:0 .7em;vertical-align:middle;background:var(--d,var(--corail))}
.logo{display:flex;align-items:center;min-height:44px;text-decoration:none;color:var(--nuit)}
.logo svg{display:block;height:46px;width:auto;overflow:visible;transition:height .3s var(--pose)}
.tete.defile .logo svg{height:40px}
.tete-droite{justify-self:end;display:flex;align-items:center;gap:var(--esp-m)}
.bt-reserver{display:none;min-height:44px;padding:0 20px;font-size:13px}
.bt-menu{display:inline-flex;align-items:center;gap:9px;min-height:44px;font-family:var(--f-cond);font-size:15px;letter-spacing:.22em;text-transform:uppercase}
.bt-menu span{position:relative;padding-bottom:2px}
.bt-menu span::after{content:"";position:absolute;left:0;right:.22em;bottom:0;height:2px;border-radius:1px;background:currentColor;transition:transform .48s var(--pose);transform-origin:100% 50%}
.bt-menu:hover span::after{transform:scaleX(.4)}
.bt-menu svg{width:11px;height:11px}
@media (min-width:760px){
  .tete-in{grid-template-columns:1fr auto 1fr;padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}
  .devise{display:block}
  .bt-reserver{display:inline-flex}
  .logo svg{height:52px}
  .tete.defile .logo svg{height:44px}
}

/* ---------- Menu : panneau qui sort à droite, comme davidhuitorel.fr ---------- */
.menu{position:fixed;inset:0;z-index:100;visibility:hidden;transition:visibility 0s linear .7s}
.menu.ouvert{visibility:visible;transition:none}
.menu .voile{position:absolute;inset:0;background:var(--voile);opacity:0;transition:opacity .6s ease}
.menu.ouvert .voile{opacity:1}
.panneau{position:absolute;top:0;right:0;bottom:0;width:min(500px,100%);background:var(--nuit);color:var(--creme);transform:translateX(100%);transition:transform .55s var(--tiroir);display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-right:env(safe-area-inset-right,0px)}
.menu.ouvert .panneau{transform:none}
.panneau:focus{outline:none}
.panneau::before{content:"";position:absolute;top:0;bottom:10px;left:64px;width:1px;background:var(--nuit-filet)}
.panneau-haut{display:flex;justify-content:space-between;align-items:center;padding:12px 28px 0 92px;min-height:var(--entete)}
.panneau-haut .logo{color:var(--creme)}
.panneau-haut .logo svg{height:40px}
.panneau .bt-menu{color:var(--creme)}
.panneau nav{flex:1;display:flex;flex-direction:column;justify-content:center;gap:var(--esp-l);padding:var(--esp-m) 28px var(--esp-m) 0}
.grand-menu{display:flex;flex-direction:column;gap:4px;width:100%}
.grand-menu > li{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:baseline;opacity:0;transform:translateX(28px);transition:opacity .5s var(--pose),transform .6s var(--pose)}
.menu.ouvert .grand-menu > li{opacity:1;transform:none;transition-delay:calc(var(--i) * 40ms + .14s)}
.grand-menu .n{font-family:var(--f-cond);font-size:13px;letter-spacing:.12em;color:var(--nuit-doux);text-align:center;font-variant-numeric:tabular-nums}
.grand-menu a,.grand-menu .sous-bt{position:relative;display:inline-flex;align-items:center;gap:12px;padding:5px 0 5px 34px;font-size:clamp(25px,3.6vw,34px);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:1.12;text-decoration:none;color:var(--creme);transition:transform .48s var(--pose);text-align:left}
.grand-menu a::before,.grand-menu .sous-bt::before{content:"";position:absolute;left:2px;top:50%;width:22px;height:8px;margin-top:-4px;border-radius:4px;background:var(--c,var(--corail));transform:rotate(var(--biais)) scaleX(0);transform-origin:0 50%;transition:transform .45s var(--pose)}
.grand-menu a:hover,.grand-menu .sous-bt:hover{transform:translateX(6px)}
.grand-menu a:hover::before,.grand-menu .sous-bt:hover::before,.grand-menu a[aria-current="page"]::before{transform:rotate(var(--biais)) scaleX(1)}
.sous-bt .plus{font-size:.6em;transition:transform .4s var(--pose)}
.sous-bt[aria-expanded="true"] .plus{transform:rotate(45deg)}
.sous-menu{grid-column:2;padding-left:34px;display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--pose)}
.sous-menu.ouvert{grid-template-rows:1fr}
.sous-menu > ul{overflow:hidden;min-height:0}
.sous-menu a{display:flex;min-height:40px;align-items:center;font-family:var(--f-cond);font-size:15px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--nuit-doux)}
.sous-menu a:hover{color:var(--creme)}
.panneau .bouton{margin-left:98px;align-self:flex-start}
.panneau-bas{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;padding:20px 28px 24px 92px;font-family:var(--f-cond);font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--nuit-doux)}
.panneau-bas a{color:var(--creme);text-decoration:none}
.panneau-bas a:hover{text-decoration:underline}
.ruban{display:flex;height:10px;flex:none}
.ruban i{flex:1}
body.menu-ouvert{overflow:hidden}
@media (max-width:420px){
  .panneau::before{left:48px}
  .grand-menu > li{grid-template-columns:48px minmax(0,1fr)}
  .panneau-haut{padding-left:72px;padding-right:16px}
  .panneau nav{padding-right:16px}
  .panneau .bouton{margin-left:74px}
  .panneau-bas{padding-left:74px;padding-right:16px}
}

/* ---------- Ouverture de l'accueil ---------- */
.ouverture{padding-block:var(--esp-l) var(--esp-xl);overflow-x:clip}
.ouverture-grille{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--esp-l)}
/* Slogan en escalier : « on court » à gauche, « on rigole » à droite, « on se fait des câlins » entre les deux */
.ouverture .affiche .ligne:nth-child(2){padding-left:31%}
.ouverture .affiche .ligne:nth-child(3),.ouverture .affiche .ligne:nth-child(4){padding-left:15%}
@media (max-width:959px){.ouverture .affiche .ligne:nth-child(2){padding-left:38%}.ouverture .affiche .ligne:nth-child(3){padding-left:20%}.ouverture .affiche .ligne:nth-child(4){padding-left:40%}
.ouverture .tirages{order:-1;aspect-ratio:1/.8}.tirages .exclam{right:-3%;top:-3%;height:102%}}
.ouverture-texte{display:flex;flex-direction:column;gap:var(--esp-m);align-items:flex-start}
.ouverture .affiche span.ligne{display:block}
.ouverture .affiche{align-self:stretch}
/* La promesse écrite (charte) : « graphique » en Lagon, « fun » en Corail, « émotions » en Punch, 800, 24 px au moins.
   « photo » et « graphiques » collés : le jeu de mots se lit dans le changement de couleur au milieu du mot. */
.promesse-ecrite{font-size:clamp(24px,2.1vw,31px);font-weight:800;line-height:1.22;letter-spacing:-.012em;max-width:24ch;text-wrap:balance;margin-bottom:calc(var(--esp-m) * -.5)}
.pr-lagon{color:var(--lagon)} .pr-corail{color:var(--corail)} .pr-punch{color:var(--punch)}
.ouverture .affiche .ligne + .ligne{margin-top:.16em}
.prix-ancre{display:flex;flex-wrap:wrap;gap:6px 18px;font-weight:700;font-size:15px;color:var(--encre-doux)}
.prix-ancre b{color:var(--encre)}
.tirages{position:relative;width:100%;max-width:100%;aspect-ratio:1/.9}
.tirages .exclam{--ex-d:48px;position:absolute;right:-22%;top:-4%;height:108%;width:auto;color:var(--soleil);opacity:1}
.tirages .exclam .x{fill:currentColor}
.tirages .t1{position:absolute;left:0;top:3%;width:80%;--rot:2.5deg;z-index:1}
.tirages .t2{position:absolute;right:9%;bottom:0;width:58%;--rot:-3deg;z-index:2}
.tirages .t3{position:absolute;left:0;bottom:3%;width:44%;--rot:3deg;z-index:3}
@media (min-width:960px){
  .ouverture{padding-block:var(--esp-l) var(--esp-l)}
  .ouverture-grille{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:var(--esp-l)}
}
@media (prefers-reduced-motion:no-preference){
  .tirages .t1{animation:pose-t1 .9s var(--pose) both}
  .tirages .t2{animation:pose-t2 .9s var(--pose) .12s both}
  .tirages .t3{animation:pose-t3 .9s var(--rebond) .3s both}
  .tirages .exclam{animation:exclam .8s var(--rebond) .05s both;transform-origin:50% 100%}
  .ouverture .kw::after{animation:peint .75s var(--pose) both}
  .ouverture .ligne:nth-child(2) .kw::after{animation-delay:.25s}
  .ouverture .ligne:nth-child(4) .kw::after{animation-delay:.5s}
}
@keyframes pose-t1{from{transform:translateY(24px) rotate(9deg)}to{transform:rotate(var(--rot))}}
@keyframes pose-t2{from{transform:translate(-18px,30px) rotate(-14deg)}to{transform:rotate(var(--rot))}}
@keyframes pose-t3{from{transform:translate(12px,26px) rotate(18deg) scale(.86)}to{transform:rotate(var(--rot))}}
@keyframes exclam{from{transform:scaleY(.6)}to{transform:none}}
@keyframes peint{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* ---------- Ouverture des pages intérieures ---------- */
.page-tete{padding-block:var(--esp-l) var(--esp-xl)}
.page-tete .deux{align-items:end}
.faits{display:flex;flex-wrap:wrap;gap:10px}
.faits li{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--r-pilule);background:var(--blanc);font-weight:700;font-size:14.5px;line-height:1.3;box-shadow:inset 0 0 0 1.5px var(--filet)}
.faits li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--f-c,var(--corail));flex:none}

/* ---------- Les trois mots ---------- */
.tete-section{display:flex;flex-direction:column;gap:var(--esp-m);margin-bottom:var(--esp-l);max-width:820px}
.pile-l > .tete-section{margin-bottom:calc(var(--esp-xs) * -1)}
.mots{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--esp-l)}
.mot{display:flex;flex-direction:column;gap:var(--esp-s)}
.mot h3{font-size:var(--t-titre-2);text-transform:uppercase;letter-spacing:.01em;margin-top:6px}
.mot p{max-width:42ch}
@media (min-width:760px){.mots{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gout)} .mot:nth-child(2){margin-top:var(--esp-l)} }

/* ---------- Bloc « tu es sur la photo » ---------- */
.moi-aussi .ph{max-width:460px}
.moi-aussi{padding-bottom:var(--esp-l)}
.pile > .actions{margin-top:var(--esp-xs)}
main > .section:last-of-type{padding-bottom:var(--esp-l)}
.grosse-phrase{font-size:clamp(24px,2.8vw,40px);font-weight:800;line-height:1.12;text-transform:uppercase;letter-spacing:-.01em}

/* ---------- David ---------- */
.david .tirage{max-width:420px;margin-inline:auto}
.signature{display:flex;align-items:flex-end;gap:9px;flex-wrap:wrap}
.signature .by{font-family:var(--f);font-weight:500;font-size:17px;line-height:1;color:var(--encre-doux);transform:translateY(1px)}
.signature .dh{fill:var(--orange-dh)}
.signature svg{height:26px;width:auto;color:var(--nuit)}


/* ---------- Planche (galerie) ---------- */
.planche{columns:2 160px;column-gap:var(--gout)}
.planche > *{break-inside:avoid;margin-bottom:var(--gout)}
@media (min-width:760px){.planche{columns:3 240px}}
.vignette{display:block;position:relative;cursor:zoom-in;overflow:hidden}
.vignette img{transition:transform .8s var(--pose)}
.vignette:hover img{transform:scale(1.03)}
.vignette::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 0 var(--corail);transition:box-shadow .3s}
.vignette:focus-visible::after,.vignette:hover::after{box-shadow:inset 0 0 0 4px var(--corail)}

/* ---------- Étapes ---------- */
.etapes{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--esp-l);counter-reset:e}
.etape{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--esp-s);align-content:start}
.etape .num{font-family:var(--f-cond);font-size:clamp(52px,5.6vw,76px);line-height:.86;color:var(--c,var(--soleil));min-width:1.4em;font-variant-numeric:tabular-nums}
.etape h3{font-size:var(--t-titre-2);line-height:1.2;margin-bottom:8px}
@media (min-width:900px){.etapes{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gout);align-items:start}}

/* ---------- Tarifs ---------- */
.tarif{display:flex;flex-wrap:wrap;gap:var(--esp-m) var(--esp-xl);align-items:center;background:var(--corail);color:var(--nuit);border-radius:var(--r-bloc);padding:clamp(28px,4vw,52px)}
.tarif > :first-child{flex:0 0 auto}
.tarif .coches{flex:1 1 260px;min-width:0}
.tarif .montant{font-weight:800;font-size:clamp(72px,10vw,132px);line-height:.9;letter-spacing:-.04em;color:var(--blanc)}
.tarif .montant small{font-size:.32em;letter-spacing:0;margin-left:.08em}
.coches{display:flex;flex-direction:column;gap:12px;font-weight:700;font-size:17px;line-height:1.4}
.coches li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:start}
.coches li::before{content:"";width:26px;height:26px;border-radius:50%;background:var(--coche,var(--nuit)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M8 14.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.coches.lagon{--coche:var(--lagon-t)}
.coches.leger{font-weight:600;font-size:16.5px}
.options{display:flex;flex-direction:column}
.options li{display:flex;justify-content:space-between;align-items:baseline;gap:var(--esp-m);padding:16px 0;border-bottom:1.5px solid var(--filet-2);font-weight:600;font-size:18px}
.options li b{font-size:22px;white-space:nowrap;font-variant-numeric:tabular-nums}
.galerie-entiere{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--esp-s) var(--esp-m);background:var(--soleil);border-radius:var(--r-bloc);padding:26px clamp(24px,3vw,40px)}
.galerie-entiere .gros{font-weight:800;font-size:clamp(34px,4vw,48px);line-height:1;letter-spacing:-.02em}
.galerie-entiere > div{flex:1 1 260px;min-width:0}
.galerie-entiere .titre-2{margin-bottom:10px} .galerie-entiere .petit + .petit{margin-top:6px}

/* Prix de Noël (masqué automatiquement après le 24 décembre) */
.noel{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:var(--r-pilule);background:var(--nuit);color:var(--creme);font-weight:700;font-size:14.5px;line-height:1.3}
.noel::before{content:"";width:18px;height:7px;border-radius:4px;background:var(--soleil);transform:rotate(var(--biais));flex:none}
.barre{text-decoration:line-through;text-decoration-thickness:2px;opacity:.7;font-weight:600}

/* ---------- Cartes cadeau ---------- */
.cartes{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gout)}
@media (min-width:760px){.cartes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.carte{display:flex;flex-direction:column;gap:var(--esp-m);background:var(--blanc);border-radius:var(--r-bloc);padding:clamp(24px,3vw,40px);box-shadow:inset 0 0 0 1.5px var(--filet)}
.carte .prix{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.carte .prix b{font-size:clamp(48px,5vw,68px);line-height:1;letter-spacing:-.03em}
.carte .actions{margin-top:auto}

/* ---------- Petits jeux ---------- */
.jeux{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--esp-l) var(--gout)}
@media (min-width:900px){.jeux{grid-template-columns:repeat(3,minmax(0,1fr))}}
.jeu{display:flex;flex-direction:column;gap:12px}
.jeu h3{font-weight:800;font-size:clamp(20px,1.8vw,24px);line-height:1.2;letter-spacing:-.005em}
.jeu p{font-size:15.5px;line-height:1.5;color:var(--encre-doux)}
@media (max-width:480px){.jeu p{font-size:14.5px}}

/* ---------- Liste « imagine » ---------- */
.imagine{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--esp-m)}
.imagine li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;font-size:clamp(18px,1.6vw,22px);font-weight:700;line-height:1.35}
.imagine li::before{content:"";width:30px;height:11px;margin-top:.45em;border-radius:6px;background:var(--soleil);transform:rotate(var(--biais))}
@media (min-width:900px){.imagine{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--esp-l) var(--esp-xl)}}

/* ---------- Lieux ---------- */
.lieux{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gout)}
@media (min-width:760px){.lieux{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lieu{display:flex;flex-direction:column;gap:12px}
.lieu h3{font-size:19px;line-height:1.25}

/* ---------- Témoignages ---------- */
.temoins{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gout)}
@media (min-width:900px){.temoins{grid-template-columns:repeat(3,minmax(0,1fr))}}
.temoin{display:flex;flex-direction:column;gap:var(--esp-s);background:var(--blanc);border-radius:var(--r-carte);padding:28px;box-shadow:inset 0 0 0 1.5px var(--filet)}
.temoin::before{content:"“";font-family:var(--f-cond);font-size:72px;line-height:.6;height:30px;color:var(--punch)}
.temoin p{font-weight:600;font-size:17.5px;line-height:1.5}
.temoin cite{font-style:normal;font-family:var(--f-cond);letter-spacing:.16em;text-transform:uppercase;font-size:14px;color:var(--encre-doux);margin-top:auto}

/* ---------- FAQ ---------- */
.faq{display:flex;flex-direction:column;border-top:1.5px solid var(--filet-2)}
.faq details{border-bottom:1.5px solid var(--filet-2)}
.faq summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) 36px;gap:var(--esp-s);align-items:center;padding:20px 0;cursor:pointer;font-weight:800;font-size:clamp(17px,1.5vw,20px);line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--creme-2);font-size:22px;font-weight:700;transition:transform .35s var(--pose),background .25s}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--soleil)}
.faq .reponse{padding:0 52px 24px 0;display:flex;flex-direction:column;gap:.8em;max-width:var(--ligne);color:var(--encre-doux)}

/* ---------- Contact ---------- */
.form{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--esp-m)}
@media (min-width:640px){.form{grid-template-columns:repeat(2,minmax(0,1fr))} .form .large{grid-column:1/-1}}
.champ{display:flex;flex-direction:column;gap:8px}
.champ label,.champ legend{font-weight:700;font-size:15px}
.champ input,.champ textarea{width:100%;min-height:52px;padding:12px 16px;border-radius:12px;border:1.5px solid var(--filet-2);background:var(--blanc);font-size:16px;font-weight:500;line-height:1.4;transition:border-color .2s}
.champ textarea{min-height:140px;resize:vertical}
.champ input:focus,.champ textarea:focus{outline:none;border-color:var(--lagon);box-shadow:0 0 0 3px rgba(0,155,161,.2)}
.champ .aide{font-size:13.5px;color:var(--encre-doux)}
fieldset.champ{border:0;padding:0;margin:0}
.choix{display:flex;flex-wrap:wrap;gap:10px}
.choix label{position:relative}
.choix input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.choix span{display:inline-flex;align-items:center;min-height:46px;padding:0 20px;border-radius:var(--r-pilule);background:var(--blanc);box-shadow:inset 0 0 0 1.5px var(--filet-2);font-weight:700;font-size:15px;transition:background .2s,box-shadow .2s}
.choix input:checked + span{background:var(--nuit);color:var(--creme);box-shadow:none}
.choix input:focus-visible + span{outline:3px solid var(--lagon);outline-offset:3px}
.note-form{grid-column:1/-1;padding:16px 20px;border-radius:12px;background:var(--creme-2);font-weight:600;font-size:15.5px}
.coord{display:flex;flex-direction:column;gap:6px}
.coord li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:14px 0;border-bottom:1.5px solid rgba(254,243,231,.18)}
.coord .val{font-weight:800;font-size:clamp(18px,1.8vw,22px);user-select:all}
.coord .quoi{display:block;font-family:var(--f-cond);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--nuit-doux);margin-bottom:2px}
.copier{min-height:38px;padding:0 14px;border-radius:var(--r-pilule);box-shadow:inset 0 0 0 1.5px var(--nuit-filet);font-family:var(--f-cond);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--creme)}
.copier:hover{background:var(--creme);color:var(--nuit)}

/* ---------- Pied de page ---------- */
.pied{background:var(--nuit);color:var(--creme)}
.pied-in{padding-block:var(--esp-l) var(--esp-l);padding-left:calc(var(--marge-g) + clamp(10px,3.5vw,56px))}
.pied-grille{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--esp-l)}
@media (min-width:760px){.pied-grille{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}}
.pied .logo-v{width:110px;height:auto}
.pied .pied-titre{margin-top:0;font-family:var(--f-cond);font-weight:400;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--nuit-doux);margin-bottom:12px}
.pied ul{display:flex;flex-direction:column;gap:2px}
.pied ul a{display:inline-flex;min-height:36px;align-items:center;text-decoration:none;font-weight:500;font-size:15px}
.pied ul a:hover{text-decoration:underline}
.pied .sign{font-weight:600;font-size:15px;line-height:1.5;max-width:30ch;margin-top:var(--esp-l)}
.pied-bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:var(--esp-l);padding-top:var(--esp-m);border-top:1px solid var(--nuit-filet);font-size:13.5px;color:var(--nuit-doux)}
.pied-bas a{color:var(--nuit-doux)}

/* ---------- Bouton flottant (téléphone) ---------- */
.flottant{position:fixed;z-index:40;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));box-shadow:0 10px 26px -10px rgba(11,35,53,.55);transform:translateY(160%);transition:transform .5s var(--pose)}
.flottant.visible{transform:none}
@media (min-width:760px){.flottant{display:none}}

/* ---------- Visionneuse ---------- */
.visionneuse{border:0;padding:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;background:rgba(11,35,53,.96);color:var(--creme)}
.visionneuse::backdrop{background:rgba(11,35,53,.96)}
.visionneuse[open]{display:grid;grid-template-rows:auto minmax(0,1fr)}
.vis-haut,.vis-bas{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px))}
.vis-haut{padding-top:calc(12px + env(safe-area-inset-top,0px))}
.vis-bas{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));font-size:14px;color:var(--nuit-doux)}
.vis-scene{position:relative;display:flex;align-items:center;justify-content:center;padding:0 max(16px,env(safe-area-inset-left,0px)) calc(16px + env(safe-area-inset-bottom,0px));min-height:0}
.vis-fleche{position:absolute;top:50%;translate:0 -50%;background:none;width:56px;height:56px}
.vis-fleche svg{width:22px;height:22px}
.vis-fleche:hover{background:none;opacity:.7}
.vis-prec{left:max(12px,env(safe-area-inset-left,0px))}
.vis-suiv{right:max(12px,env(safe-area-inset-right,0px))}
.vis-scene img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.vis-bt{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;border-radius:50%;color:var(--creme);font-family:var(--f-cond);font-size:15px;letter-spacing:.16em;text-transform:uppercase}
.vis-bt:hover{background:var(--nuit-2)}
.vis-bt svg{width:18px;height:18px}
.vis-compte{font-family:var(--f-cond);letter-spacing:.18em;font-size:14px;color:var(--nuit-doux)}


/* ---------- Version 2 : après la relecture croisée ---------- */
/* Bandeau de Noël (disparaît tout seul le 25 décembre) */
.annonce{background:var(--nuit);color:var(--creme);text-align:center;font-family:var(--f-cond);letter-spacing:.12em;text-transform:uppercase;font-size:14px;line-height:1.35}
.annonce a{display:block;padding:10px var(--marge-d) 10px var(--marge-g);text-decoration:none}
.annonce a:hover b{text-decoration:underline}
.annonce b{font-weight:400;color:var(--soleil)}
/* Ouverture des pages intérieures : grande phrase en Chau, tirage à droite */
.page-tete .deux{align-items:center}
.page-tete .tirage{max-width:560px;margin-inline:auto}
@media (max-width:899px){.page-tete .deux > figure{order:-1}}
.page-tete .label{font-size:15px}
/* Planche composée : une grande, deux empilées, trois verticales, une bande, deux moyennes */
.planche-c{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gout)}
.planche-c > *{min-width:0}
.planche-c .g,.planche-c .bande{grid-column:span 12}
.planche-c .pile2{grid-column:span 12;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gout)}
.planche-c .t,.planche-c .m{grid-column:span 6}
.planche-c .tl{grid-column:span 12}
@media (min-width:760px){
  .planche-c .g{grid-column:span 8;display:flex}
  .planche-c .g img{height:100%;aspect-ratio:auto}
  .planche-c .pile2{grid-column:span 4;grid-template-columns:minmax(0,1fr)}
  .planche-c .t,.planche-c .tl{grid-column:span 4}
  .planche-c .m{grid-column:span 6}
}
.r219 img{aspect-ratio:21/9}
/* Tarif en une ligne (le tarif complet n'est que sur la page tarifs) */
.tarif-ligne{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-s) var(--esp-l);padding:clamp(22px,3vw,36px) clamp(22px,3vw,44px);border-radius:var(--r-bloc);background:var(--corail);color:var(--nuit)}
.tarif-ligne .gros{font-weight:800;font-size:clamp(44px,5vw,64px);line-height:1;letter-spacing:-.03em;color:var(--creme)}
.tarif-ligne ul{display:flex;flex-direction:column;gap:6px;font-weight:700;flex:1 1 300px}
.tarif-ligne li{display:inline-flex;align-items:flex-start;gap:8px}
.tarif-ligne li::before{content:"";flex:none;width:9px;height:9px;margin-top:calc(.81em - 4.5px);border-radius:50%;background:var(--nuit)}
.calcul{font-weight:700;font-size:16px;padding:14px 18px;border-radius:12px;background:var(--creme-2)}
/* Témoignages : une grande citation, deux petites */
.citation{font-weight:700;font-size:clamp(22px,2.3vw,32px);line-height:1.3;max-width:30ch;text-wrap:balance}
.citation-qui{font-family:var(--f-cond);letter-spacing:.16em;text-transform:uppercase;font-size:14px;margin-top:var(--esp-s);display:block;font-style:normal}
.petites-citations{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--esp-m);margin-top:var(--esp-l);padding-top:var(--esp-l);border-top:1.5px solid rgba(11,35,53,.25)}
@media (min-width:760px){.petites-citations{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gout)}}
.petites-citations p{font-weight:600;font-size:17px;line-height:1.5}
.petites-citations cite{display:block;margin-top:8px;font-style:normal;font-family:var(--f-cond);letter-spacing:.16em;text-transform:uppercase;font-size:13px}
/* Contact : deux portes */
.portes{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gout)}
@media (min-width:760px){.portes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.porte{display:flex;flex-direction:column;gap:var(--esp-s);align-items:flex-start;border-radius:var(--r-bloc);padding:clamp(24px,3vw,40px)}
.porte h2{font-size:var(--t-titre-2);line-height:1.15}
.porte-corail{background:var(--corail);color:var(--nuit)}
.porte-corail .label{--etincelle:var(--soleil)}
.porte-creme{background:var(--creme-2)}
.porte .actions{margin-top:auto;padding-top:var(--esp-xs)}
/* Prix de Noël sur les cartes cadeau */
.carte .prix s{margin-left:.3em;font-weight:700;font-size:22px;opacity:.6;text-decoration-thickness:2px}
.carte .prix small{display:block;width:100%;font-weight:700;font-size:14.5px;color:var(--encre-doux)}

/* ---------- Compléments ---------- */
.bloc-nuit .label{--etincelle:var(--soleil)}
.bloc-lagon .label{--etincelle:var(--soleil)}
.tarif .label{--etincelle:var(--soleil)}
.bloc-soleil .label{--etincelle:var(--punch)}
.faits a{text-decoration:none}
.faits a:hover{text-decoration:underline}
.encart{background:var(--nuit);color:var(--creme);border-radius:var(--r-bloc);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:var(--esp-m)}
.encart .lien{color:var(--creme)}
.encart .doux{color:var(--nuit-doux)}
.encart h2,.encart h3{font-size:var(--t-titre-2);line-height:1.15}
.etapes.quatre{grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.etapes.quatre{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--esp-l) var(--gout)} .etapes.quatre .etape{grid-template-columns:minmax(0,1fr)}}
@media (min-width:1100px){.etapes.quatre{grid-template-columns:repeat(4,minmax(0,1fr))}}
.centre{text-align:center;align-items:center;margin-inline:auto}
.en-haut{align-items:start}

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

/* ---------- Promesses (« ce que je te promets ») ---------- */
.promesses{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gout)}
.promesse{display:flex;flex-direction:column;align-items:flex-start;gap:var(--esp-xs);background:var(--blanc);border-radius:var(--r-carte);padding:var(--esp-m);box-shadow:inset 0 0 0 1.5px var(--filet)}
.promesse::before{content:"";width:30px;height:11px;border-radius:6px;background:var(--c,var(--corail));transform:rotate(var(--biais));margin:4px 0 var(--esp-xs)}
.promesse h3{font-weight:800;font-size:clamp(19px,1.6vw,22px);line-height:1.22;letter-spacing:-.005em}
.promesse p{font-size:15.5px;line-height:1.5;color:var(--encre-doux)}
@media (min-width:640px){.promesses{grid-template-columns:repeat(2,minmax(0,1fr))}.promesse:last-child{grid-column:1/-1}}
@media (min-width:960px){.promesses{grid-template-columns:repeat(6,minmax(0,1fr))}.promesse{grid-column:span 2}.promesse:nth-child(n+4){grid-column:span 3}}
.galerie-entiere .label{--etincelle:var(--punch);margin-bottom:6px}

.tete > .ruban{height:5px}


@media (max-width:759px){.tirages .exclam{--ex-d:16px}}

@media (min-width:600px) and (max-width:959px){.ouverture .affiche{font-size:clamp(54px,8.2vw,78px)}}

/* ---------- Mentions légales ---------- */
.mentions{display:grid;gap:var(--esp-l);max-width:var(--ligne)}
.mention{display:flex;flex-direction:column;gap:var(--esp-xs)}
.mention h2{font-size:clamp(20px,1.6vw,24px);margin-bottom:4px}
.mention p,.mention li{font-size:var(--t-texte);line-height:1.55}
.mention a{color:inherit}
.infos{display:grid;gap:8px}
.infos li{display:grid;grid-template-columns:minmax(120px,15ch) 1fr;gap:4px 16px}
.infos li > span:first-child{font-weight:700}
@media (max-width:559px){.infos li{grid-template-columns:1fr}}

.grosse-phrase .l2{display:block}
/* Pied de page sur téléphone : logo plus petit, la signature à sa droite */
@media (max-width:759px){
  .pied-marque{display:flex;align-items:center;margin-right:calc(var(--marge-d) * -1)}   /* le bloc va jusqu'au bord de l'écran */
  .pied .logo-v{width:66px}
  .pied .sign{margin:0 auto;padding-inline:12px;font-size:14.5px;line-height:1.45}   /* centré entre le logo et le bord droit */
  .pied-grille{gap:var(--esp-m)}
  .pied-pages ul{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
}
/* Téléphone : quand le lien passe sous le bouton, il se centre sous lui */
@media (max-width:599px){.actions:has(> .bouton + .lien){flex-direction:column;align-items:center;width:fit-content;max-width:100%}}

/* Visionneuse sur téléphone (et téléphone tourné) : la photo est centrée sur tout l'écran, et elle a la même taille
   qu'elle soit horizontale ou verticale (le grand côté vaut L), comme un tirage qu'on tourne. Flèches en bas à droite, côte à côte. */
@media (max-width:759px),(max-height:500px){
  .visionneuse[open]{display:block}
  .vis-haut{position:absolute;top:0;left:0;right:0;z-index:2}
  .vis-scene{position:absolute;inset:0;padding:0}
  /* horizontale : toute la largeur (moins 16 px de chaque côté). Verticale : on triche un peu, elle descend jusqu'à
     l'espace laissé sous les flèches (20 px) répété au-dessus d'elles, et autant en haut, pour paraître aussi grande. */
  .vis-scene img{--marge-v:calc(184px + 2 * env(safe-area-inset-bottom,0px));max-width:calc(100vw - 32px);max-height:calc(100vh - var(--marge-v))}
  @supports (height:100dvh){.vis-scene img{max-height:calc(100dvh - var(--marge-v))}}
  /* téléphone tourné : le grand côté garde à peu près la même longueur qu'en vertical */
  @media (orientation:landscape){.vis-scene img{max-width:calc(100vw - 300px);max-height:calc(100vh - 24px)}
    @supports (height:100dvh){.vis-scene img{max-height:calc(100dvh - 24px)}}}
  .visionneuse .vis-fleche{top:auto;translate:none;bottom:calc(20px + env(safe-area-inset-bottom,0px));background:rgba(11,35,53,.72);width:52px;height:52px}
  .visionneuse .vis-fleche svg{width:18px;height:18px}
  .visionneuse .vis-suiv{left:auto;right:max(16px,env(safe-area-inset-right,0px))}
  .visionneuse .vis-prec{left:auto;right:calc(max(16px,env(safe-area-inset-right,0px)) + 62px)}
}

/* Téléphone : moins d'air en haut des blocs de couleur ; un bouton seul se centre dans son bloc */
@media (max-width:759px){
  .bloc{padding-top:var(--esp-l)}
  .bloc .actions:not(:has(.lien)){justify-content:center;align-self:stretch}
}
@media (max-width:759px){.section-espace{padding-top:0!important;margin-top:-8px}}   /* téléphone : 48 px entre « Connexion » et « en images » */
/* Téléphone : ma photo au téléphone, 30 % plus petite, avec de l'air autour */
@media (max-width:759px){.david .tirage{max-width:70%;margin:-8px auto 0} .david .deux{row-gap:28px}}
/* Le logotype David Huitorel et le lien vers les mariages restent collés : c'est la marque des mariages */
.signe-dh{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.signe-dh .lien{min-height:32px}
/* Ligne de prix : le conseil, plus petit et moins gras, sur le ton de la conversation */
.tarif-ligne .conseil{display:block;margin-top:2px;font-weight:500;font-size:15px;line-height:1.45}
/* Ordinateur : le logotype et le lien des mariages descendent (trois fois l'écart habituel sous le texte) */
@media (min-width:760px){.signe-dh{margin-top:calc(var(--esp-m) * 2)}}
/* Ordinateur : appel final avec photo, autant d'air sous la photo (avant le pied de page) qu'au-dessus */
@media (min-width:760px){main > .section.final:has(.ph){padding-bottom:var(--esp-xl)}}
/* Ouverture de la page bon cadeau : autant d'air au-dessus et au-dessous de la photo qu'à sa droite */
.bloc-ouverture{padding-block:clamp(40px,6.2vw,89px)}
/* Bon cadeau : « Choisis ton cadeau » plus près du bloc jaune */
#cartes{padding-top:clamp(40px,4.5vw,64px)}
/* Appel final sans photo : un peu moins d'air au-dessus, plus avant le pied de page */
main > .section.final:not(:has(.ph)){margin-top:clamp(-28px,-2vw,-12px);padding-bottom:clamp(56px,5.6vw,80px)}
/* Ancres de la page tarifs, calées comme « comment ça se passe » : le bas du bloc d'avant reste caché sous l'en-tête,
   et la FAQ (qui suit une section sans marge haute) descend d'autant que les autres */
#tarifs{scroll-margin-top:-11px}
#faq{scroll-margin-top:calc(var(--esp-xl) - 11px)}
@media (max-width:759px){.br-large{display:none}}
/* Photos qu'on attrape au doigt : pas de menu « enregistrer l'image » à l'appui long, la photo se soulève */
.vivant .tirage{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:transform .5s var(--pose),scale .45s var(--rebond),box-shadow .3s}
.vivant .tirage img{-webkit-touch-callout:none;-webkit-user-drag:none;pointer-events:none}
.vivant .tirage.saisi{scale:var(--grand,1.05);z-index:6;box-shadow:0 1px 2px rgba(40,30,15,.18),0 10px 20px -4px rgba(11,35,53,.22),0 30px 50px -16px rgba(11,35,53,.42)}
/* Téléphone : les boutons de l'ouverture à égale distance du texte et du bloc rose (40 px de chaque côté) */
@media (max-width:759px){.ouverture{padding-bottom:var(--esp-l)} .ouverture .actions{margin-top:var(--esp-s)}}
/* « Derrière Oté Famiy, » tient toujours sur la première ligne : la taille baisse un peu sur les petits écrans */
.titre-david{font-size:min(var(--t-titre),calc((100vw - 32px) / 11.8))}
/* Un tirage attrapé dans un bloc de couleur passe par-dessus le bord du bloc au lieu d'être caché */
.bloc:has(.tirage){overflow:visible}
/* Bloc rose sur téléphone : la photo un peu plus petite (92 %) ; attrapée, elle reprend sa taille d'avant */
@media (max-width:759px){.moi-aussi .tirage{max-width:92%;margin-inline:auto;--grand-saisi:1.087}}
main{overflow-x:clip}   /* une photo tirée hors de l'écran ne fait jamais défiler la page sur le côté */
/* Ordinateur : la photo s'attrape à la souris */
@media (hover:hover){.vivant .tirage{cursor:grab}.vivant .tirage.saisi{cursor:grabbing}}
/* Ma photo au téléphone qui vibre pendant la sonnerie */
.feuille.sonne{will-change:translate,rotate}
/* Formulaire : piège à robots invisible, et le merci après l'envoi */
.pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.merci-form{grid-column:1/-1;display:flex;flex-direction:column;gap:var(--esp-s);padding:clamp(22px,3vw,36px);border-radius:var(--r-bloc);background:var(--lagon);color:var(--nuit)}
/* Ouverture agrandie (page grossesse) : photo en colonne 7/12, tirage jusqu'à 680px */
.page-tete.tete-grande .tirage{max-width:680px}
/* Bloc couleur resserré (page grossesse, « Ton corps, tel qu'il est ») : 1240px au plus sur ordinateur */
@media (min-width:900px){.bloc-etroit{margin-inline:max(var(--mat),calc((100% - 1240px) / 2),5vw)}}
/* Ligne « duo » des planches : verticale 2:3 + horizontale 3:2 à la même hauteur (2 fr / 4,5 fr) */
.planche-c .duo{grid-column:span 12;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,4.5fr);gap:var(--gout)}

/* Mots à ne jamais couper en fin de ligne (Saint-Paul garde un tiret normal pour Google) */
.nw{white-space:nowrap}

/* La photo d'ouverture prend sa largeur tout de suite, sans attendre l'image */
.page-tete .tirage{width:100%}

/* Délai de réponse sous le bouton du formulaire */
.delai-reponse{margin-top:-8px;font-size:15px}