/* 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; } }

/* — 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; } }