/* Polices : déposer les fichiers dans /fonts */
@font-face{font-family:"Apfel Grotesk";src:url("absans.woff2") format("woff2");font-weight:400;font-display:swap}   /* graisse 400 = absans (fichier à la racine) */
@font-face{font-family:"Apfel Grotesk";src:url("ApfelGrotezk-Fett.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Apfel Grotesk Mittel";src:url("ApfelGrotezk-Mittel.woff2") format("woff2");font-weight:400;font-display:swap}

:root{--bleu-clair:#5cb6e4;--bleu-fonce:#045a59;--rouge:#e65559;--noir:#000;--blanc:#fff;
  --pad:clamp(1.25rem,5vw,4.5rem);--r:28px}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:"Apfel Grotesk",system-ui,sans-serif;color:var(--bleu-fonce);background:var(--blanc);font-size:1rem;line-height:1.5;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
.c-clair{color:var(--bleu-clair)}.c-rouge{color:var(--rouge)}.c-fonce{color:var(--bleu-fonce)}
:focus-visible{outline:3px solid var(--bleu-clair);outline-offset:3px}

/* Boutons : pastille pleine, texte blanc */
@property --btn-bg{syntax:"<color>";inherits:true;initial-value:#045a59}
.btn{--btn-bg:var(--bleu-fonce);background:var(--btn-bg);position:relative;display:inline-block;font-family:"Apfel Grotesk Mittel","Apfel Grotesk",system-ui,sans-serif;font-weight:400;padding:.55em 1.6em .55em 1.2em;border-radius:0 999px 999px 0;font-size:clamp(1rem,1.2vw,1.2rem);text-decoration:none;color:var(--blanc);transition:transform .25s,--btn-bg .25s}
/* Queue à 3 piques : coordonnées exactes du SVG fourni (Fichier_1), qui suit la hauteur du bouton */
.btn::before{content:"";position:absolute;top:0;right:calc(100% - 2px);height:100%;aspect-ratio:39.91/51.59;background:var(--btn-bg);
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,67% 74%,0 50%,67% 28%)}
.btn--fonce{--btn-bg:var(--bleu-fonce)}
.btn:hover{transform:translateY(-2px) scale(1.04);--btn-bg:var(--bleu-clair)}

/* Soulignés fins façon maquette */
.ruban{width:max-content;max-width:100%;margin:0 auto;padding:.4em 3em;background:var(--bleu-fonce);color:var(--blanc);font-weight:400;font-size:clamp(1.1rem,2vw,2rem);
  clip-path:polygon(0 0,100% 0,calc(100% - 1.4rem) 50%,100% 100%,0 100%,1.4rem 50%)}

/* ===== EN-TÊTE ===== */
.header{position:absolute;inset:0 0 auto 0;z-index:20;display:flex;justify-content:space-between;padding:0 var(--pad) 0 0}
.menu{position:fixed;inset:0;z-index:15;background:var(--bleu-fonce);display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;text-align:left;gap:.4em;padding:6rem var(--pad) calc(var(--pad) * 2);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.menu.open{opacity:1;visibility:visible}
.menu__deco{position:absolute;right:clamp(1rem,3vw,3rem);bottom:clamp(1rem,3vw,3rem);width:min(46vw,680px);height:55vh;object-fit:contain;object-position:right bottom;pointer-events:none}
.menu a{color:var(--blanc);font-size:clamp(2rem,5.5vw,4.5rem);line-height:1.1;font-weight:700;text-decoration:none;transition:color .25s,transform .25s}
html.menu-ouvert .logo{position:fixed}   /* menu ouvert : le logo reste visible en haut à gauche, même si on a défilé */
.menu a:hover,.menu a:focus-visible{color:var(--bleu-clair);transform:translateX(.3em)}

/* ===== 1. HERO ===== */
.hero{position:relative;height:clamp(420px,min(63vw,100vh),900px);height:clamp(420px,min(63vw,100svh),900px);background:var(--rouge)}   /* au plus la hauteur de l'écran */
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__btn{position:absolute;left:50%;bottom:2.2rem;margin-left:.97em;transform:translateX(-50%)}
.hero__btn:hover{transform:translateX(-50%) translateY(-2px) scale(1.04)}
@media(max-width:640px){.hero{height:66vh;height:66svh}}   /* téléphone : environ 2/3 de l'écran, la vidéo est recadrée sur les côtés */

/* ===== 2. ACCROCHE ===== */
.accroche{position:relative;overflow:hidden;min-height:43.9vw;padding:8.3vw var(--pad) 17vw}   /* proportions de la maquette : 2576 × 1131 */
.accroche h1{max-width:min(64vw,64rem);margin-inline:auto;font-size:clamp(1.75rem,4vw,3.6rem);line-height:1.12;font-weight:700;position:relative;z-index:1}

/* ===== 3. PROJETS : cards 3/4 rectangulaires, arrondies au survol ===== */
.projets{padding:2.5vw 4vw 6.5vw}   /* maquette 1774 px : marges 4 %, cards 26,9 %, gap colonnes 5,6 % */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:max(1.75rem,2.2vw) 3.6vw}
.card{text-decoration:none;color:var(--bleu-fonce)}
.card--wide{grid-column:1/-1;margin:.9vw 0 1.7vw}
.card .vis{overflow:hidden;border-radius:0;aspect-ratio:477/542;background:var(--bleu-clair);transition:border-radius .45s cubic-bezier(.2,.8,.2,1)}
.card--wide .vis{aspect-ratio:1630/390}
.card:hover .vis,.card:focus-visible .vis{border-radius:var(--r)}
.card img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s}
.card:hover img{transform:scale(1.15)}
.card strong{display:block;margin-top:.3em;font-size:clamp(1.125rem,1.58vw,28px);line-height:1.15}   /* 28 px à 1774 px d'écran et plus */
.card small{display:block;font-size:1rem;line-height:1.2}   /* 16 px */

/* ===== 4. À PROPOS — maquette 2576 px ===== */
.about{position:relative;margin-top:7vw;min-height:36.3vw;background:var(--rouge);color:var(--blanc);padding:3.7vw 5.5vw 3.9vw 35.4vw}
.about__visuel{position:absolute;z-index:2;left:8.05vw;top:-6.2vw;width:var(--w);height:var(--h);
  --w:24.4vw;--h:30.7vw;--sw:3.2vw;--edge:.5vw;--tilt:5deg;--gap:2px;     /* --sw : largeur du caillou ; --edge : centre du caillou depuis le bord gauche de la photo ; --gap : jour photo/caillou */
  --sx:calc(var(--edge) - var(--w) / 2)}                                   /* décalage horizontal du caillou par rapport au centre de la photo */
/* La photo repose sur le caillou : pivot = point de contact, sur le bord bas de la photo inclinée (y = x·tan + h/2cos) */
.about__photo{position:absolute;inset:0;pointer-events:none;
  transform-origin:calc(50% + var(--sx)) calc(50% + var(--sx) * tan(var(--tilt)) + 50% / cos(var(--tilt)))}
.about__rect{width:100%;height:100%;max-width:none;object-fit:cover;background:var(--bleu-clair);transform:rotate(var(--tilt));pointer-events:auto;cursor:pointer}      /* 355° (Illustrator) = 5° dans le sens horaire */
.about__tache{position:absolute;z-index:1;width:var(--sw);height:auto;transform-origin:50% 100%;
  left:calc(50% + var(--sx) - var(--sw) / 2);
  top:calc(50% + var(--sx) * tan(var(--tilt)) + 50% / cos(var(--tilt)) + var(--gap))}   /* le haut du caillou est à --gap sous le bord de la photo, à toutes les tailles d'écran */

/* Équilibre : le caillou oscille à peine, la photo compense (1,5 s) — déclenché à l'apparition et au clic par script.js */
.about__visuel.wobble .about__photo{animation:equilibre 2.55s ease-in-out}
.about__visuel.wobble .about__tache{animation:caillou 2.55s ease-in-out}
@keyframes equilibre{0%{transform:rotate(0)}14%{transform:rotate(-1.2deg)}32%{transform:rotate(0deg)}50%{transform:rotate(-.3deg)}68%{transform:rotate(.45deg)}84%{transform:rotate(-.2deg)}100%{transform:rotate(0)}}
@keyframes caillou{0%{transform:rotate(0)}12%{transform:rotate(3deg)}30%{transform:rotate(-3deg)}48%{transform:rotate(3deg)}66%{transform:rotate(-1.1deg)}84%{transform:rotate(.5deg)}100%{transform:rotate(0)}}                          /* 05 */
.about p{max-width:51vw;margin-bottom:1.4em;font-size:clamp(1rem,1.55vw,2.45rem);line-height:1.4}
.about p+p{max-width:59vw}
.pill{position:relative;z-index:1;display:inline-block;margin:0 0 1.6vw -15vw;padding:.12em 2.25vw .12em 15vw;background:var(--blanc);color:var(--bleu-fonce);
  border-radius:0 999px 999px 0;font-size:clamp(1.5rem,2.9vw,4rem);line-height:1.15;font-weight:700}   /* démarre au milieu du rectangle bleu, texte aligné sur le bloc */
.about__cta{display:flex;justify-content:flex-end;align-items:center;gap:1rem;margin:2.8vw 2.7vw 0 0}
.about__cta img{width:clamp(80px,12vw,170px)}                                                      /* 06 */


/* ===== 5. ILS M'ONT FAIT CONFIANCE ===== */
.confiance{padding:clamp(3rem,6vw,5rem) 0}
.confiance h2{font-family:"Apfel Grotesk Mittel","Apfel Grotesk",system-ui,sans-serif;font-weight:400}
.logos{margin-top:2.5rem;display:grid;gap:1.5rem;overflow:hidden}
.logos__row{display:flex;gap:clamp(2rem,5vw,4.5rem);width:max-content;align-items:center;animation:defile 40s linear infinite}
.logos__row:nth-child(2){animation-direction:reverse}
.logos img{height:clamp(36px,5vw,64px);width:auto}
@keyframes defile{to{transform:translateX(-50%)}}

/* ===== 6. AVIS CLIENTS ===== */
.avis{padding:clamp(2rem,4vw,3rem) 0}
.avis__liste{display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:2.5rem var(--pad);scrollbar-width:none}
.avis__liste::-webkit-scrollbar{display:none}
.avis article{flex:0 0 clamp(280px,40vw,640px);min-height:17vw;scroll-snap-align:start;padding:1.2rem 1.4rem;border:1px solid var(--bleu-clair);border-radius:var(--r);font-size:1rem}
.avis h3{color:var(--bleu-clair);font-size:clamp(1.25rem,1.9vw,1.9rem);font-weight:400;text-transform:uppercase}
.avis__role{font-size:.875rem;font-weight:700;text-transform:uppercase;color:var(--bleu-fonce);margin-bottom:1rem}

/* ===== 7. PRESTATIONS ===== */
.prestations{padding:clamp(2rem,5vw,4rem) 0 0}
.prestations .souligne{margin-bottom:2rem}
.bande{overflow:hidden;white-space:nowrap;font-size:clamp(1.1rem,3vw,2.9rem);padding:.7em 0}
.bande__track{position:relative;top:var(--decalage,0em);display:inline-flex;align-items:center;gap:.6em;animation:defile-bande 30s linear infinite;animation-play-state:paused;transform:translateX(20vw)}   /* top : centrage optique du texte (--decalage calculé par script.js) */
.bande.visible .bande__track{animation-play-state:running}   /* le défilé démarre quand la bande entre à l'écran */
.bande.visible:hover .bande__track{animation-play-state:paused}
.bande img{position:relative;top:calc(-1 * var(--decalage,0em));height:1.7em;width:auto}   /* les pictos restent centrés dans la bande */
.bande--rouge{background:var(--rouge);color:var(--blanc)}
.bande--noir{background:var(--bleu-fonce);color:var(--blanc)}
.bande--blanc{background:var(--blanc);color:var(--bleu-fonce)}
.bande--clair{background:var(--bleu-clair);color:var(--blanc)}

/* Défilé des bandes : 6 copies du contenu ; au départ, le début du texte est à 1/5 de l'écran (20vw), la copie précédente occupe la zone à gauche */
@keyframes defile-bande{from{transform:translateX(calc(20vw - 16.6667%))}to{transform:translateX(calc(20vw - 66.6667%))}}

/* ===== 8. CITATION ===== */
.citation{position:relative;text-align:center;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,50vw) minmax(0,1fr);align-items:center;column-gap:clamp(1.5rem,4vw,5rem);padding:clamp(5rem,10vw,10rem) var(--pad) clamp(4.5rem,8vw,8rem)}
.citation p{grid-column:2;grid-row:1;max-width:none;margin:0 auto;font-weight:700;font-size:clamp(1.3rem,2.7vw,2.9rem);line-height:1.2}

/* ===== 9. CONTACT ===== */
.contact{position:relative;background:var(--rouge);color:var(--bleu-fonce);padding:clamp(2.5rem,5vw,4rem) var(--pad) 5rem;display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:start}
.contact h2{color:var(--blanc);font-size:clamp(1.8rem,3.5vw,3.4rem);margin-bottom:1.2rem}
.contact p{color:var(--bleu-fonce);font-weight:400;font-size:clamp(1.05rem,1.8vw,1.7rem);margin-bottom:.4rem}
.contact__label{font-family:"Apfel Grotesk Mittel","Apfel Grotesk",sans-serif;font-weight:400}
.contact p a{transition:color .2s ease}
.contact p a:hover,.contact p a:focus-visible{color:var(--blanc)}
.contact p:not(.social) a{display:inline-block;transform-origin:left center;transition:color .2s ease,transform .25s}
.contact p:not(.social) a:hover,.contact p:not(.social) a:focus-visible{transform:scale(1.03)}
.contact__rond img{width:clamp(130px,26vw,360px);height:auto}
.social{display:flex;align-items:center;gap:.5rem}
.footnav{position:absolute;left:var(--pad);right:var(--pad);bottom:1.2rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem 1.5rem;font-size:.875rem}
.footnav a{text-decoration:none}.footnav a:hover{text-decoration:underline}
.contact > .totop{position:absolute;right:var(--pad);bottom:1.2rem;display:inline-flex;width:1.8rem;height:1.8rem;align-items:center;justify-content:center}
.contact > .totop img{width:100%;height:100%;object-fit:contain}
.contact > .totop:hover{transform:translateY(-3px)}
.totop{transition:transform .3s}

/* Apparition douce */
.rev{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s}
.rev.in{opacity:1;transform:none}

/* Responsive */
@media(max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .accroche h1{max-width:100%}
  .citation{grid-template-columns:minmax(0,1fr) minmax(0,62vw) minmax(0,1fr)}
}
@media(max-width:560px){
  .grid{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .contact h2{font-size:clamp(1.8rem,4.2vw,4rem)}
  .contact__rond{justify-self:center}
  .contact__rond img{width:min(60vw,260px)}
  .footnav{position:static;margin-top:1.5rem;grid-column:1}
  .contact{padding-bottom:5rem}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rev{opacity:1;transform:none}
}

/* ===== Tracés SVG (dossier assets/, numérotés par ordre d'apparition) ===== */
/* Burger actuel : pastille fixe 56px (cible tactile ≥ 44px), 2 barres fines qui forment une croix */
.burger{position:fixed;top:1rem;right:clamp(1rem,3vw,2.5rem);z-index:30;width:5.5rem;height:5.5rem;border:0;background:none;cursor:pointer;display:grid;place-content:center;transition:transform .25s}
.burger:hover{transform:scale(1.08)}
.burger img{grid-area:1/1;width:5rem;height:5rem;object-fit:contain;transition:filter .25s}   /* caillou.menu.svg (fermé) et caillou.menu2.svg (ouvert) superposés dans le bouton */
.burger:hover .burger__ferme,.burger:focus-visible .burger__ferme{filter:brightness(0) saturate(100%) invert(60%) sepia(99%) saturate(206%) hue-rotate(156deg) brightness(87%) contrast(115%)}   /* survol : bleu clair #5cb6e4 */
/* Survol : le caillou fait l'équilibriste — +3° (horaire), puis -8° (antihoraire), puis se stabilise */
.burger:hover img{animation:caillou-menu 1.2s ease-in-out}
@keyframes caillou-menu{0%{transform:rotate(0)}22%{transform:rotate(3deg)}50%{transform:rotate(-8deg)}70%{transform:rotate(2deg)}86%{transform:rotate(-1deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.burger:hover img{animation:none}}
.burger__ouvert{display:none}
.burger[aria-expanded=true] .burger__ferme{display:none}
.burger[aria-expanded=true] .burger__ouvert{display:block}
.logo{position:absolute;top:0;left:0;z-index:25;display:block;width:clamp(150px,25vw,480px)}.logo img{width:100%}   /* 01 : png dans le hero */
.decor{position:absolute;left:0;bottom:6.87vw;width:100%;height:auto;pointer-events:none}   /* 04 */
.ul{position:relative;white-space:nowrap}
.ul img{position:absolute;left:-7%;top:100%;margin-top:-.03em;width:130%;height:auto}                                /* 03 */
.souligne{position:relative;display:table;margin:0 auto;font-weight:400;font-size:clamp(1.1rem,2vw,2rem);text-align:center;color:var(--bleu-clair)}
.souligne::after{content:"";display:block;margin-top:.2em;aspect-ratio:376/26.88;background:url("assets/07-souligne-titre.svg") center/100% 100% no-repeat} /* 07 */
.citation{overflow:hidden}
.courbe{display:block;grid-row:1;height:clamp(14rem,30vw,32rem);width:auto;max-width:100%;object-fit:contain;pointer-events:none}   /* 12 et 13 : colonnes latérales de la grille, hors du texte */
.courbe--g{grid-column:1;justify-self:start;object-position:left center}.courbe--d{grid-column:3;justify-self:end;object-position:right center}
/* Apparition : les deux tracés se dévoilent en même temps, vite, avec un bord adouci (masque dégradé) — .in ajouté par script.js quand la citation entre à l'écran */
.courbe{opacity:0;-webkit-mask-size:100% 300%;mask-size:100% 300%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  transition:mask-position .9s cubic-bezier(.4,0,.2,1),-webkit-mask-position .9s cubic-bezier(.4,0,.2,1),opacity .25s ease-out}
.courbe--g{-webkit-mask-image:linear-gradient(to bottom,#000 33.3%,transparent 66.6%);mask-image:linear-gradient(to bottom,#000 33.3%,transparent 66.6%);   /* de haut en bas */
  -webkit-mask-position:0 100%;mask-position:0 100%}
.courbe--d{-webkit-mask-image:linear-gradient(to top,#000 33.3%,transparent 66.6%);mask-image:linear-gradient(to top,#000 33.3%,transparent 66.6%);      /* de bas en haut */
  -webkit-mask-position:0 0;mask-position:0 0}
.citation.in .courbe{opacity:1}
.citation.in .courbe--g{-webkit-mask-position:0 0;mask-position:0 0}
.citation.in .courbe--d{-webkit-mask-position:0 100%;mask-position:0 100%}
.social img{width:1.9rem;transition:transform .25s}.social a:hover img{transform:scale(1.12)}          /* 14 et 15 */
.totop img{width:100%}                                                                                /* 16 */

/* ===== 2. ACCROCHE — tablette et téléphone : le tracé passe entièrement sous le texte ===== */
@media(max-width:1024px){.accroche{min-height:0;padding-bottom:calc(29.6vw)}}

/* ===== 8. CITATION — téléphone : tracés au-dessus et en dessous du texte ===== */
@media(max-width:640px){
  .citation{grid-template-columns:1fr;row-gap:1.5rem;padding-top:1.5rem;padding-bottom:3.5rem}   /* marge haute très réduite, marge basse légèrement réduite */
  .citation p{grid-column:1;grid-row:2}
  .courbe{height:8.5rem}   /* tracé légèrement agrandi */
  .courbe--g{grid-column:1;grid-row:1;justify-self:start}
  .courbe--d{display:none}   /* téléphone : tracé de droite supprimé */
}

/* ===== 4. À PROPOS — tablette et téléphone ===== */
@media(max-width:900px){
  .about{margin-top:12vw;padding:38vw var(--pad) 2.5rem}
  .about__visuel{left:var(--pad);top:-8vw;--w:36vw;--h:45vw;--sw:6vw;--edge:1.9vw}
  .pill{margin-left:calc(-1 * var(--pad));padding:.12em 1.2rem .12em var(--pad);font-size:clamp(1.5rem,5.5vw,2.5rem)}
  .about p,.about p+p{max-width:100%}
  .about__cta{margin:1.5rem 0 0;justify-content:flex-start}
}

/* Page mentions légales */
.legal{max-width:900px;margin:0 auto;padding:clamp(5rem,10vw,9rem) var(--pad)}
.legal h1{font-size:clamp(2rem,4vw,3.5rem);line-height:1.1;margin-bottom:2rem}
.legal h2{font-size:1.35rem;margin:2rem 0 .6rem}
.legal p,.legal li{margin-bottom:.75rem}
.legal a{overflow-wrap:anywhere}
.social a:hover img {
  filter: brightness(0) invert(1);
}
.legal__back{display:inline-block;margin-top:2rem}

/* ===== CURSEUR COMÈTE (ajout) ===== */
/* Natif masqué uniquement si la souris est précise ET si le JS a créé la comète (classe .has-comet) */
@media (hover:hover) and (pointer:fine){
  html.has-comet,html.has-comet *{cursor:none!important}
}
.comet{position:fixed;left:0;top:0;width:0;height:0;z-index:9999;pointer-events:none;opacity:0;transition:opacity .25s}
.comet.on{opacity:1}
.comet__in{position:absolute;left:0;top:0;width:0;height:0;transition:transform .2s}
.comet.hover .comet__in{transform:scale(1.35)}
.comet svg{position:absolute;overflow:visible}
.comet__tail{will-change:transform,opacity}

/* ===== ACCROCHE — animation de la bille et de ses 2 traits (ajout) ===== */
.decor{--depart:.1s;--glisse:.9s;--pause:.05s;--ecart:.2s}   /* attente avant départ · durée du glissement · pause avant le 1er trait · écart entre les 2 traits */
.decor .t{fill:none;stroke:var(--bleu-fonce);stroke-miterlimit:10;stroke-width:2px}
/* état initial : bille invisible, décalée en haut à gauche des traits (unités du tracé) ; traits invisibles */
.decor .bille{opacity:0;transform:translate(-120px,-56px)}
.decor .trace{visibility:hidden}
/* glissement : accélère jusqu'à la fin puis ralentit tout à la fin */
.decor.go .bille{animation:bille-glisse var(--glisse) cubic-bezier(.5,0,.9,1) var(--depart) forwards,bille-opacite .125s ease-out var(--depart) forwards}
/* apparition sèche, l'un après l'autre */
.decor.go .trace{animation:trace-apparait 0s linear calc(var(--depart) + var(--glisse) + var(--pause)) forwards}
.decor.go .trace--2{animation-delay:calc(var(--depart) + var(--glisse) + var(--pause) + var(--ecart))}
@keyframes bille-glisse{from{transform:translate(-120px,-56px)}to{transform:translate(0,0)}}
@keyframes bille-opacite{from{opacity:0}to{opacity:1}}
@keyframes trace-apparait{to{visibility:visible}}
@media(prefers-reduced-motion:reduce){.decor .bille{opacity:1;transform:none}.decor .trace{visibility:visible}}

/* ===== ILS M'ONT FAIT CONFIANCE — tiroir à logos (ajout) ===== */
.tiroir{--cell:clamp(80px,9.6vw,200px);--gap:clamp(.75rem,1.6vw,2rem);--cols:5;
  width:min(70vw,1800px);margin:clamp(2rem,4vw,5rem) auto 0}
.tiroir__vue{position:relative}
.tiroir__grille{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-auto-rows:var(--cell);gap:var(--gap);overflow:hidden;
  max-height:calc(var(--cell) * 2 + var(--gap));                /* fermé : 2 rangées */
  transition:max-height .9s cubic-bezier(.4,0,.2,1)}
.tiroir__grille img,.tiroir__grille .logo-nom{justify-self:center;align-self:center}
.tiroir__grille img{width:auto;height:auto;max-width:82%;max-height:78%;object-fit:contain}
.logo-nom{max-width:100%;overflow-wrap:anywhere;font-weight:700;text-align:center;color:var(--noir);font-size:clamp(.5rem,1.4vw,1.4rem);line-height:1.1}
/* voile blanc qui fond la 2e rangée quand le tiroir est fermé */
.tiroir__voile{position:absolute;left:0;right:0;bottom:0;height:calc(var(--cell) * 1.05);pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,0),var(--blanc) 95%);transition:opacity .5s}
.tiroir.ouvert .tiroir__voile{opacity:0}
/* bouton flèche */
.tiroir__btn{display:block;margin:clamp(.5rem,2vw,2.5rem) auto 0;padding:.8rem 1rem;border:0;background:none;cursor:pointer;color:var(--bleu-clair);transition:transform .25s}
.tiroir__btn svg{display:block;overflow:visible;width:clamp(40px,3.6vw,90px);height:auto;fill:none;stroke:currentColor;stroke-width:6;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.tiroir__btn:hover{transform:translateY(3px)}
.tiroir.ouvert .tiroir__btn svg{transform:rotate(180deg)}
.tiroir.ouvert .tiroir__btn:hover{transform:translateY(-3px)}
@media(max-width:900px){.tiroir{--cell:clamp(44px,14vw,170px);--gap:clamp(.4rem,1.6vw,1rem);width:calc(100% - 2 * var(--pad))}}   /* toujours 5 colonnes */

/* ===== 3. PROJETS — téléphone : une card par ligne, toutes du même format (ajout) ===== */
@media(max-width:640px){
  .grid{grid-template-columns:1fr}
  .card--wide{margin:0}
  .card--wide .vis{aspect-ratio:477/542}
}

/* ===== TÉLÉPHONE — marges latérales plus larges (ajout) ===== */
/* --pad pilote les marges de l'accroche, de À propos, de la citation, du contact, du menu… ; Projets avait sa propre marge (4vw) */
@media(max-width:640px){
  :root{--pad:1.75rem}
  .projets{padding-left:calc(var(--pad) + .75rem);padding-right:calc(var(--pad) + .75rem)}   /* cards : marge latérale plus large que le reste */
}


/* ===== BOUTONS — survol : l'image Fichier 21.svg part du bord droit du bouton et file vers la gauche en accélérant, jusqu'à sortir du cadre (ajout) ===== */
.btn__fx{position:absolute;top:0;right:0;bottom:0;left:calc(-2.0113em + 2px);overflow:hidden;border-radius:0 999px 999px 0;pointer-events:none;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,1.3476em 74%,0 50%,1.3476em 28%)}   /* cadre = corps du bouton + queue à 3 piques (mêmes proportions que .btn::before : hauteur 2,6em, largeur 2,0113em) : l'image y est rognée */
.btn__fx img{position:absolute;right:0;top:15.4%;height:69.2%;width:auto;max-width:none;visibility:hidden}   /* au repos : invisible ; 69 % de la hauteur du bouton, centré (proportions du plan) */
.btn:hover .btn__fx img,.btn:focus-visible .btn__fx img{visibility:visible;animation:btn-fx .4s cubic-bezier(.55,0,1,.45) forwards}   /* durée = vitesse ; la courbe fait accélérer */
@keyframes btn-fx{from{right:0;transform:translateX(20%)}to{right:100%;transform:translateX(0)}}   /* départ (plan) : l'image dépasse de 20 % de sa largeur à droite du bouton ; arrivée : son bord droit touche le bord gauche du bouton, donc sortie complète */
@media(prefers-reduced-motion:reduce){.btn__fx{display:none}}