/* Styles des procédés (outils/procedes/*.js). À copier dans le site avec les scripts utilisés ; n'ajoute aucune couleur ni police : l'identité reste celle du client. */

/* — titre découpé : caché jusqu'à son découpage, avec un secours (visible après 3 s même si le script ne démarre pas) — */
.js [data-titre-decoupe]:not(.pret) { visibility: hidden; animation: td-secours 0s linear 3s forwards; }
@keyframes td-secours { to { visibility: visible; } }
/* le masque de chaque ligne est coupé net : on l'agrandit un peu (et on compense) pour ne pas rogner les queues de g, j, p, y */
[data-titre-decoupe] > div[style*="clip"] { padding-block: 0.14em; margin-block: -0.14em; }
@media (prefers-reduced-motion: reduce) { .js [data-titre-decoupe]:not(.pret) { visibility: visible; animation: none; } }

/* — fond par section — */
.fond-actif body { background: var(--fond); color: var(--texte, inherit); transition: background-color 0.8s ease, color 0.8s ease; }
@media (prefers-reduced-motion: reduce) { .fond-actif body { transition: none; } }

/* — galerie horizontale : rangée à glisser par défaut, épinglée sur grand écran — */
.gh-piste { display: flex; gap: clamp(12px, 2vw, 28px); overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: max(16px, 4vw); padding-block: 8px; -webkit-overflow-scrolling: touch; }
.gh-carte { flex: 0 0 min(82vw, 520px); scroll-snap-align: start; }
.gh-epingle { height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.gh-epingle .gh-piste { overflow: visible; scroll-snap-type: none; width: max-content; }
.gh-epingle .gh-carte { flex-basis: min(60vw, 640px); }

/* — objet qui roule : la zone donne la hauteur du défilement ; l'objet reste centré, il est déplacé par le script — */
[data-roule] { position: relative; overflow: hidden; min-height: 60vh; display: flex; align-items: center; }
[data-roule] > * { flex: none; width: clamp(120px, 22vw, 260px); height: auto; will-change: transform; }
[data-roule]:not(.roule-actif) { justify-content: center; }
.roule-actif > * { position: absolute; left: 0; top: 50%; margin-top: calc(clamp(120px, 22vw, 260px) / -2); }

/* — scène 3D : l'image de secours est remplacée par la 3D quand elle est prête — */
[data-scene-3d] { position: relative; aspect-ratio: 4 / 5; max-height: 80vh; width: 100%; }
[data-scene-3d] > img { width: 100%; height: 100%; object-fit: contain; display: block; }
.s3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.s3d-pret > img { visibility: hidden; }

/* — lettres géantes remplies de photos : le remplissage est du CSS pur (visible sans script), lettres-photo.js ne fait que glisser la photo via --lp-y — */
.lettres-photo, .lettres-photo > span {
  background-image: var(--lp-image);
  background-repeat: no-repeat;
  background-size: var(--lp-zoom, 100% 150%);
  background-position: 50% var(--lp-y, 50%);
  background-color: var(--lp-secours, CanvasText); /* visible si la photo manque : le mot ne disparaît jamais */
}
/* le fond ne couvre que la boîte du texte : on l'agrandit (et on compense) pour que ni les queues de g, j, p, y ni les accents ne soient rognés */
.lettres-photo { display: block; margin: 0; font-size: var(--lp-taille, clamp(72px, 30vw, 420px)); line-height: 0.9; padding-block: 0.3em; margin-block: -0.3em; overflow-wrap: normal; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .lettres-photo, .lettres-photo > span { color: transparent; -webkit-background-clip: text; background-clip: text; }
}
/* une photo par lettre : ce sont les <span> qui portent le fond ; le fond du mot, resté sous les lettres, en liserait les bords de sa couleur */
.lettres-photo:has(> span) { background: none; }

/* — photos découpées en formes : arche, pétale, cercle, ovale en clip-path ; goutte et galet en masque (le dessin de la forme est dans l'image du masque) — */
.forme { position: relative; margin: 0; width: 100%; overflow: hidden; aspect-ratio: 4 / 5; }
.forme > * { display: block; width: 100%; height: 100%; object-fit: cover; }
.forme-arche { aspect-ratio: 4 / 5; clip-path: inset(0 round 999px 999px 0 0); }
.forme-petale { aspect-ratio: 1; clip-path: inset(0 round 100% 0); }
.forme-cercle { aspect-ratio: 1; clip-path: inset(0 round 50%); }
.forme-ovale { aspect-ratio: 3 / 4; clip-path: inset(0 round 50%); }
.forme-goutte { aspect-ratio: 1 / 1.1; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 2C58 22 86 42 86 66A36 36 0 0 1 14 66C14 42 42 22 50 2Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 2C58 22 86 42 86 66A36 36 0 0 1 14 66C14 42 42 22 50 2Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.forme-galet { aspect-ratio: 1 / 0.9; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M22 14C38 2 66 4 82 16C97 28 100 52 90 70C80 90 50 99 28 90C8 82 0 54 6 36C9 26 14 20 22 14Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M22 14C38 2 66 4 82 16C97 28 100 52 90 70C80 90 50 99 28 90C8 82 0 54 6 36C9 26 14 20 22 14Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }

/* — étiquettes façon autocollant : penchée (rotate), bord épais, ombre légère. Le script anime « transform », le CSS gère rotate / scale / translate : les deux s'additionnent sans se gêner — */
.autocollant {
  display: inline-block; width: fit-content; max-width: 100%; box-sizing: border-box;
  padding: 0.45em 0.95em; border: var(--ac-epaisseur-bord, 0.3em) solid var(--ac-bord, #fff); border-radius: 0.65em;
  background: var(--ac-fond, CanvasText); color: var(--ac-texte, Canvas);
  font-size: var(--ac-taille, 1rem); font-weight: 700; line-height: 1.15; text-decoration: none; text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 8px 16px -8px rgba(0, 0, 0, 0.35);
  rotate: var(--ac-angle, -3deg);
  transition: rotate 0.35s cubic-bezier(0.2, 0.8, 0.3, 1.3), scale 0.35s cubic-bezier(0.2, 0.8, 0.3, 1.3), translate 0.35s ease, box-shadow 0.35s ease;
}
.autocollant-rond { display: inline-grid; place-items: center; width: var(--ac-diametre, 6.2em); aspect-ratio: 1; padding: 0.4em; border-radius: 50%; }
/* il se décolle : il se soulève, se redresse à moitié, l'ombre s'allonge */
@media (hover: hover) { .autocollant:hover { rotate: calc(var(--ac-angle, -3deg) * 0.3); scale: 1.06; translate: 0 -4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 16px 24px -10px rgba(0, 0, 0, 0.4); } }
a.autocollant:focus-visible { rotate: calc(var(--ac-angle, -3deg) * 0.3); scale: 1.06; translate: 0 -4px; outline: 2px solid currentColor; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .autocollant { transition: none; } }

/* — barre d'appel collante : téléphone seulement (moins de 761 px). Respecte la zone sûre (il faut viewport-fit=cover dans la balise viewport), ne cache rien (marge en bas de page) et se range quand le clavier s'ouvre. CSS pur, aucun script.
   HTML, juste avant </body> : <nav class="barre-appel" aria-label="Contacter l'entreprise">
     <a href="tel:+262262000000"><svg …aria-hidden="true"/>Appeler</a> <a href="https://www.google.com/maps/search/?api=1&query=…"><svg …/>Itinéraire</a></nav>
   Le premier lien est plein, les suivants sont cerclés (un à trois liens). Réglages : --barre-fond, --barre-bouton, --barre-texte, --barre-trait. Le téléphone et l'adresse viennent de la fiche Google. */
.barre-appel { display: none; }
@media (max-width: 760px) {
  :root { --barre-h: 67px; } /* 8 + 50 + 8 de marges et de bouton, + 1 de filet */
  .barre-appel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px;
    padding: 8px max(12px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
    background: var(--barre-fond, Canvas); border-top: 1px solid var(--barre-trait, rgba(128, 128, 128, 0.35));
    box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, 0.4);
    transition: transform 0.25s ease, visibility 0.25s;
  }
  .barre-appel a {
    display: flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 50px; padding: 0 12px;
    border: 2px solid var(--barre-bouton, CanvasText); border-radius: 999px;
    background: var(--barre-bouton, CanvasText); color: var(--barre-texte, Canvas);
    font-size: 1rem; font-weight: 700; line-height: 1.1; text-decoration: none;
  }
  .barre-appel a:not(:first-child) { background: transparent; color: var(--barre-bouton, CanvasText); } /* le premier bouton (Appeler) est plein, les autres sont cerclés */
  .barre-appel svg { width: 1.25em; height: 1.25em; flex: none; }
  /* la page se prolonge de la hauteur de la barre (+ zone sûre) : le dernier bloc n'est jamais caché, les ancres et les champs non plus */
  body:has(.barre-appel) { padding-bottom: calc(var(--barre-h) + env(safe-area-inset-bottom, 0px)); }
  html:has(.barre-appel) { scroll-padding-bottom: calc(var(--barre-h) + env(safe-area-inset-bottom, 0px) + 16px); }
  /* le clavier s'ouvre (un champ a le focus) : la barre se range, elle ne reste pas posée sur le champ */
  body:has(:is(input:not([type=checkbox], [type=radio], [type=button], [type=submit], [type=reset], [type=range], [type=file]), textarea, select, [contenteditable]):focus) .barre-appel { transform: translateY(105%); visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) { .barre-appel { transition: none; } }
@media print { .barre-appel { display: none; } }

/* — écriture manuscrite : un trait par <path>, tracé par ecriture-manuscrite.js ; sans script, tout est tracé — */
.ecriture { display: block; width: min(100%, 560px); height: auto; overflow: visible; color: var(--ec-couleur, currentColor); }
.ecriture :is(path, line, polyline) { fill: none; stroke: currentColor; stroke-width: var(--ec-epaisseur, 3); stroke-linecap: round; stroke-linejoin: round; }